Prev: W11, Next: W13
Links: Zoom, TopHat (993679, or Form), Calculator:
Slide:

# Randomness

📗 Regular patterns look boring and obvious.
📗 Totally random textures look boring and obvious too.
📗 Adding spots and wrinkles to textures with structured randomness makes simple textures fancy.
📗 Independent randomness:
➩ Each frame is independent: randomness would cause it to change each frame.
➩ Each fragment is independent: no way to have structure between fragments.
📗 Psuedo-randomness should be used:
➩ Patterns that are too complex to see, but still controlled and deterministic.
➩ Some important properties can be controlled.

# Simple Psuedo Randomness [TopHat]

📗 Find a function that generate random patterns that is deterministic.
📗 Aliasing adds to randomness.
Demo shader_noise

# Wood Texture [TopHat]

📗 Change the ring width to a deterministic but complex function so that the texture looks like wood.
📗 Professor Gleicher's wood texture example using the sin noise function: Link.
Demo shader_wood



# Better Psuedo Random Functions

📗 Better psuedo random functions should be:
➩ Efficient in higher dimensions.
➩ Tile-able.
➩ Better interpolation.
➩ Multiple frequencies.
📗 One example is the Perlin noise: Wikipedia.
📗 Professor Gleicher's demo: Link.

# Simple Perlin Noise

📗 A simple algorithm to produce Perlin noise is:
➩ Generate random gradient (directions) on a grid.
➩ Interpolate the gradient inside each square in the grid (bi-linear interpolation works, but smoothstep works better).
Demo noise

# Basic Ray Tracing

📗 THREE.js is mostly model-centric rendering:
➩ Centered on primitives (triangles).
➩ Each object's appearance is (largely) independent of other objects.
➩ It can fake several effects.
➩ It's fast.
📗 Light-centric rendering simulates the behavior of light in a scene.
➩ It is based on the physics of light transport.
➩ Requires knowledge of details (surface properties)
➩ It can create more effects.
➩ It's not fast.
📗 Can be done with THREE.js (but too complicated for CS559): Link.



# Forward and Backward Ray Tracing

📗 Forward ray tracing starts with the light sources and check where it goes: some make to the camera.
➩ Many rays are wasted and never reaches the camera.
📗 Backward ray tracing tracks rays from the camera and out into the scene: Wikipedia.
➩ Start from the camera and in the direction of each pixel, figure out where this ray might have come from.
➩ Send out a lot of rays per pixel, and check the most likely directions:
(1) Mirror reflection (specular).
(2) Diffuse reflection (towards light).
(3) Refraction (through surface).

# Ray Tracing Diagram

📗 A simple diagram of ray tracing.
Demo ray
📗 Note: the light bulb is a THREE.Sprite (not a THREE.Mesh) with THREE.SpriteMaterial and always faces towards the camera: Doc. 

# Bi-directional Reflectance Distribution

📗 Each object can be modeled by a function that specifies how likely is a path given a direction in, a direction out, and the color of the light.
📗 This probability distribution over possible paths of light is called the Bi-directional reflectance distribution function (BRDF): Wikipedia.
📗 Given this function, can sample rays at different probabilities, and weight the different samples depending on how likely.



# Performance Tricks

📗 The bottlenecks include:
➩ Getting objects and texture to the hardware:
(1) Avoid extra copies of the things (reuse geometries, materials, textures, ...)
(2) Avoid recreating objects often (not in the animation loop).
➩ Getting complex lighting
(1) Use environment map tricks.
➩ Too much time shading.
(1) Avoid shading things that are not visible.

# Particle System

📗 Using the same geometry with different meshes can still be costly (lots of time switching).
➩ Objects can be combined into one single large buffer geometry (not practical).
➩ Alternative types of meshes can be used:
(1) THREE.InstancedMesh: if there is a large number of objects with the same geometry and material (shader): Doc.
(2) THREE.BatchedMesh: if there is a large number of objects with the same material (shader): Doc.

# Instanced Mesh [TopHat]

📗 Animate the InstancedMesh by updating the matrix and color of each instance.
📗 Change the for loop so that the particles form 10 rows and 10 columns.
📗 Change the for loop so that each particle moves independently and not randomly (follows some deterministic paths as functions of time).
📗 Other examples: Link (and more: Link).
Demo particle



# Texture Atlas

📗 Loading texture images and creating MIP maps are expensive.
📗 Each texture should be loaded only once, and not in an animation loop.
📗 Combining all textures into a single image and set UVs for different objects saves a lot of time. The combined texture is called texture atlas: Wikipedia.

# Deferred Shading

📗 To avoid shading things that are not visible, Z test can be done before fragment shader since fragment shader does not change the Z value.
📗 To achieve this, shading can be done in two passes:
➩ Draw with a really simple shader (and compute Z values).
➩ Draw with the early Z test (only one fragment passes the test).
📗 Many games use deferred rendering: Wikipedia.
➩ This cannot be done in THREE.js.
➩ Store information needed for shading in a Geometry Buffer (G-Buffer).
➩ Compute color (and light) in the second pass.
(1) Draw all object with Z-Buffer and store in G-Buffer.
(2) Draw one big polygon (screen) and shade using G-Buffer.



# THREE.js Animation System

📗 THREE.js has an animation system to do key frame animation: Link.
📗 Key frame animation set properties of the objects (position, rotation in quarternion, or color, ...) at key frames and interpolate the values for the frames in between: Wikipedia.
📗 THREE.js keeps a list of time points [t1, t2, t3, ...] and a list of values [v1, v2, v3, ...] in a KeyframeTrack.
➩ The value of the properties will be set to v1 at t1, v2 at t2, ... and interpolated in between.
➩ The value types can be BooleanKeyframeTrack, ColorKeyframeTrack, NumberKeyframeTrack, QuaternionKeyframeTrack (since axis-angle and Euler angles are difficult to interpolate), StringKeyframeTrack, VectorKeyframeTrack: .
📗 An AnimationClip can be created based on a KeyframeTrack, or from morph target sequences, or loaded from a model that include animation.

# Simple Animation [TopHat]

📗 Change the KeyframeTrack so that the object move in a square.
📗 Add a KeyframeTrack so that the object changes color while moving.
Demo key_frame

# Skinned Mesh Animation [TopHat]

📗 Animate the other bone.
Demo key_frame_skin

# Lecture Summary

📗 Randomness.
📗 Perlin noise.
📗 Light based rendering.
📗 Ray tracing.
📗 Particle system.
📗 Texture atlas.
📗 Deferred shading.
📗 Keyframe animation.


📗 Notes and code adapted from the course taught by Professor Michael Gleicher.
📗 Please use Ctrl+F5 or Shift+F5 or Shift+Command+R or Incognito mode or Private Browsing to refresh the cached JavaScript: Code.
📗 You can expand all the examples and demos: , or print the notes: .
📗 If there is an issue with TopHat during the lectures, please submit your answers on paper (include your Wisc ID and answers) or this Google Form at the end of the lecture.

Prev: W11, Next: W13





Last Updated: January 28, 2025 at 1:22 AM