Prev: W11, Next: W13, Quiz of the week: Q12
Links: Zoom, TopHat (300987), 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).
📗 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.
📗 It is done in Minecraft: Link, Link.
📗 Ray Tracing in One Weekend: Link.

# Tricks to Fake Effects

📗 Shadow: shadowMap Doc, Doc.
📗 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 [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

# 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.

# Lecture Summary

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



# Final Exam Format

📗 May 6 from 5:30 to 8:30 in Wild Wild West.
📗 40 multiple-choice questions: only one answer is correct.
➩ 15 questions similar to questions from the Survey or TopHat on 2D topics.
➩ 15 questions similar to questions from the Survey or TopHat on 3D topics.
➩ 9 questions will be similar to the questions I cover during the review session.
➩ 1 question: "list questions you think are incorrect or unclear".
📗 Notes on paper are allowed. Calculators are allowed. Other devices are not allowed (in particular, cannot use your phone as calculator).
📗 You can find the past exams on Piazza: Piazza. I will select the ones relevant to our exam and go through them during the review session on April 29.

# Project 2 Grading

📗 If it looks very nice with a good theme, the graders will just give 10 out of 10 without checking p2-workbook.txt and counting items.
📗 If the project is presented during the last two weeks of lectures, the graders will not check p2-workbook.txt and counting items.
📗 If the project has simple or unrelated objects, the graders will count the items in p2-workbook.txt and read the explanation in p2-workbook.txt.
📗 If the project has simple or unrelated objects and p2-workbook.txt in the repo does not have explanations, the graders will give an estimate based on page 4 rubric.
📗 If p2-workbook.txt in the repo is empty or different from p2-workbook.txt submitted on Canvas, the graders will give 0 out of 10.


📗 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 print the notes: .
📗 Anonymous feedback can be submitted to: Form.

Prev: W11, Next: W13, Quiz of the week: Q12





Last Updated: November 21, 2025 at 11:41 PM