Prev:
W11 , Next:
W13
Links:
Zoom , Calculator:
Eval
Slide:
Go All Prev Next
# 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 [ICA]📗 Find a function that generate random patterns that is deterministic.
📗 Aliasing adds to randomness.
Demo shader_noise
# Wood Texture [ICA]📗 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).
📗 Minecraft map generation uses Perlin noise:
Link or
Link .
Demo noise
# Basic Ray Tracing📗 THREE.js is mostly model-centric rendering:
Doc ➩ 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:
Link .
📗 Alex's implementation:
Link .
📗 Ray Tracing in One Weekend:
Link .
# Tricks to Fake Effects📗 Reflection:
envMap Doc ,
Doc .
📗 Ambient Occlusion:
aoMap:
Doc .
📗 Refraction:
ior (index of refraction) of
MeshPhysicalMaterial Doc ,
Doc .
📗 Light beams: (not sure if it can be done in THREE.js)
➩ Glow effects can be faked: (use transparency)
Link , (use shader)
Link , (bloom pass)
Doc .
➩ Another example (fake) glow effect using shader: (Tron)
Link (the "walls" use
ExtrudeGeometry along the path).
# 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 [ICA]📗 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
# Merged Geometries📗 To deal with a large number of meshes with different geometries, the geometries can be merged into one to make rendering faster:
Doc .
➩ One example is voxel geometry like Minecraft:
Doc .
# 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.
# Examples📗 YouTube Playables:
Link .
# Lecture Summary📗 Randomness.
📗 Perlin noise.
📗 Light based rendering.
📗 Ray tracing.
📗 Particle system.
📗 Texture atlas.
📗 Deferred shading.
📗 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: Expand , or print the notes: Print .
Prev:
W11 , Next:
W13
Last Updated: September 08, 2026 at 12:48 AM