Prev: W11, Next: W13, Quiz of the week: Q12
Links: Zoom, TopHat (223815), 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, Updated]

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



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

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





Last Updated: November 30, 2024 at 4:35 AM