Prev:
W11 , Next:
W13 , Quiz of the week:
Q12
Links:
Zoom ,
TopHat (223815), 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 [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 .
📗 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 [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 8 from 12:25 to 2:25 in 1220 Microbial Sciences or online with Honorlock (
Form ).
📗 40 multiple-choice questions: only one answer is correct.
➩ 15 questions from Survey or TopHat.
➩ 15 questions from Past exams.
➩ 9 questions new: I will post \(n\) of them (in survey 15
Q15 ) before the exam if course evaluation reaches \(10 n\) percent completion.
➩ 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 will be asked to fill in a scantron sheet, so please bring pencils and have your 10-digit campus ID.
📗 Questions are similar to weekly surveys (QS6-QS13) and past exams including:
Piazza .
➩ 2023 Exam 2: A1-9, B1-9, C1-9.
➩ 2023 Exam 3: A1-2, A4-7, B1-3, C1-6, C8-9.
➩ 2022 Exam 2: A1-9, B1-10, C1-7, C10.
➩ 2022 Exam 3: A1-4, A6, A10, B5-11, C4-8
➩ 2021 Exam 2: A4-5, A7, A10, B1-2, B4, B6-9.
➩ 2021 Exam 3: A1-12, B1-11.
➩ 2021 Final: A1-3, A5, A9-10, B5-8, B11.
➩ 2020 Final: A1-8, B1-8, C1-10, D1-7.
➩ 2019 Final: Q1-21, Q24-40, Q43-44.
📗 Questions on past exams that will not be on this final:
➩ 2023 Exam 2: -
➩ 2023 Exam 3: A8, (C10).
➩ 2022 Exam 2: -.
➩ 2022 Exam 3: A5, B1, C9.
➩ 2021 Exam 2: A6.
➩ 2021 Exam 3: -.
➩ 2021 Final: A4, A11, B9.
➩ 2020 Final: B9.
➩ 2019 Final: Q22-23, Q41-42.
📗 Review sessions: April 21 Sunday, April 25 Thursday, April 27 Saturday, and April 30 Tuesday.
# 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.
📗 If the code is flagged during code similarity check and there are no attribution and sufficient documentation explaining the code, the grader will give -2 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: Print .
📗 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