📗 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.
📗 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 should be:
➭ Efficient in higher dimensions.
➭ Tile-able.
➭ Better interpolation.
➭ Multiple frequencies.
📗 One example is the Perlin noise: Wikipedia.
📗 Professor Gleicher's demo: Link.
📗 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
📗 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 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).
📗 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.
📗 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.
📗 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.
📗 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.
📗 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
📗 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.
📗 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 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.
📗 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 14) 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.
📗 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.