Lecture Materials: Videos and Slides
This page provides links to the videos and slides from the lectures.
It provides a detailed outline of the course content. You can click the timestamp to watch a specific topic.
You can look at the version of this page from last year 2021 Course Outline with Video Links to see a different version of (pretty much) the same material, or to get a sense of coming attractions. Last year’s topics were very similar to what we are doing this year.
Remember: the slides are intentionally not meant to stand alone! They are designed as a prop for supporting the lecture.
Week 1 (1/23 - 1/29)
[Tue 1/25] Course Overview [Videos Lecture 1 ] [Slides Lecture 1 ]
- Lectures in Zoom: emojis, polls, chat, slides [03:11]
- Agenda for today [16:33]
- Course Goals [33:43]
- Course Outline [38:16]
- Graphics Programming/Javascript [44:00]
- Course webs, course staffs, getting help, lectures, exams, surveys, grading, readings, and tools [55:39]
- Summary [1:20:58]
- End [1:21:49]
[Thur 1/27] Pre Graphics [Videos Lecture 2 ] [Slides Lecture 2 ]
- Agenda for today [03:45]
- Tools for this class [13:30]
- How to set up a workbook [15:58]
- Web Basics (DOM and JS) [18:05]
- Event-driven Programming [46:50]
- Loving vs. Hating JavaScript [1:03:51]
- Summary [1:19:23]
- Nested Function Example (corrected) [1:20:24]
- End [1:24:56]
Week 2 (1/30 - 2/5)
[Tue 2/1] Part 1/2 - Graphics 101 [Videos Lecture 3 - Part 1/2 ] [Slides Lecture 3 - Part 1/2 ]
- How computers create things we see [2:06]
- How/what do we see? [2:28]
- Depth and Distance [8:35]
- Representing images: displays, buffers [16:06]
- Distinctions in displays: continuous v.s. flicker/strobe [25:04]
- Flicker fusion [26:09]
- Animation and redraw [32:56]
- Display synchronization (Buffering), double buffering [34:29]
- Buffering and web graphics [40:12]
- End [42:36]
[Tue 2/1] Part 2/2 - Web Browser Graphics [Videos Lecture 3 - Part 2/2 ] [Slides Lecture 3 - Part 2/2 ]
- Web browser graphics APIs: Canvas2D, SVG, WebGL [1:05]
- Web page with a Canvas element [5:51]
- Immediate v.s. Retained APIs [16:14]
- When I draw: once, over and over, when an event happens [22:32]
- Drawing and redrawing [25:09]
- Where do I draw? [28:20]
- Canvas coordinates [30:57]
- End [37:13]
[Thur 2/3] More 2D Graphics [Videos Lecture 4 ] [Slides Lecture 4 ]
- Agenda for today [3:35]
- Canvas API recap (draw & redraw, when/where/what to draw) [4:32]
- Save and Restore [12:09]
- Introduction to drawing with Paths (open/closed/disconnected shapes) [20:53]
- Paths in-depth (path operators, polygon filling rules, convex & concave polygons) [28:39]
- JS Tip for today: Spread Syntax [36:50]
- Winding rules (non-zero vs. even-old) [42:48]
- Capturing mouse positions from events (canvas vs. client coordinates) [51:20]
- The motivation of transformation [1:06:28]
- Key ideas of transformation [1:16:49]
- End [1:24:04]
Week 3 (2/6 - 2/12)
[Tue 2/8] Transformations [Videos Lecture 5 ] [Slides Lecture 5 ]
- Transform vs. Transformation [01:55]
- Forwards and backwards [14:52]
- Instancing [25:52]
- Composition of transforms [28:46]
- Scale transformations [36:00]
- Combining scale and translate [45:40]
- Non-uniform scale [1:03:43]
- Rigid transformations [1:04:38]
- Rotations [1:09:37]
- End [1:19:53]
[Thur 2/10] More Transformations [Videos Lecture 6 ] [Slides Lecture 6 ]
- Handedness of rotation direction [03:55]
- Composed transforms (example: rotate around a point) [06:45]
- Shear/Skew transformation [23:34]
- Articulated chains (example: bent arm) [25:48]
- Hierarchical modeling [34:43]
- Immediate vs. Retained APIs [43:53]
- SVG, a scene-graph API (object, group, instancing) [45:35]
- SVG vs. Canvas [1:09:47]
- Summary [1:13:45]
- End [1:23:58]
Week 4 (2/13 - 2/19)
[Tue 2/15] Transformation Math 1 [Videos Lecture 7 ] [Slides Lecture 7 ]
- What does a transformation do to points? [04:07]
- What is a coordinate system? [11:46]
- Linear combinations [14:07]
- Vectors and points (and tuples) [16:37]
- Matrices [27:40]
- Linear transformations [39:50]
- Affine transformations [50:09]
- Homogeneous coordinates [57:57]
- Implementation in APIs [1:10:08]
- End [1:18:09]
[Thur 2/17] Transformation Math 2 [Videos Lecture 8 ] [Slides Lecture 8 ]
- Composition and matrix multiplication [3:51]
- Affine transformations as a linear equation [17:45]
- Transformation commands [20:20]
- How APIs implement transformations [28:49]
- Rotation transformation math [44:50]
- Linear interpolation [1:00:34]
- A use of rotations: oriented 'particles' [1:05:27]
- Summary: transformation math [1:12:44]
- End [1:16:42]
Week 5 (2/20 - 2/26)
[Tue 2/22] Curves 1 [Videos Lecture 9 ] [Slides Lecture 9 ]
- Shapes (informally) [1:15]
- Curves [3:21]
- Parametric forms [21:18]
- Defining smoothness [29:32]
- Continuity defined [33:20]
- Tangent vectors [36:50]
- Continuity conditions [41:31]
- C and G continuity [46:13]
- Polynomials: piecewise, parameterizations, general, line/quadratic segments, change of parameters [54:25]
- Beyond a line: quadratic, cubics [1:08:45]
[Thur 2/24] Curves 2 [Videos Lecture 10 ] [Slides Lecture 10 ]
- Simple Polynomial Lines [2:47]
- Basis Functions and Control Points [8:39]
- Quadratic Segments [10:03]
- Hermite Cubics (basis functions, interpolation, continuity) [21:09]
- Cardinal Splines [34:42]
- Bezier Curves (nice properties, DeCastlejau construction, blending tree) [48:16]
- Cubic Beziers (4 points) [1:08:22]
- End [1:18:34]
Week 6 (2/27 - 3/5)
[Mon 2/28] Bonus: Bezier Review [Videos Bezier Review ] [Slides Bezier Review ]
- Two-point Beizier curve (it's a line segment!) [0:52]
- Quadratic Bezier (three points [n=3], degree = n-1 = 2) [3:52]
- Connect a line Bezier to a quadratic Bezier [7:40]
- Cubic Bezier (four points [n=4], degree = n-1 = 3) [12:55]
- Convert other Cubic forms to Bezier [16:31]
- Split one Bezier curve to multiple Bezier curves [20:00]
- End [23:27]
[Tue 3/1] Even More Curves [Videos Lecture 11 ] [Slides Lecture 11 ]
- The Train - good for showing curve ideas [2:14]
- Cardinals [7:52]
- Fancier Cardinals: TCB Curves [26:06]
- Beziers [29:09]
- Natural Splines (Cubics) [45:23]
- B-Splines [48:14]
- Thinking in terms of basis functions [52:52]
- A geometric approach: Chakin Corner Cutting [1:09:01]
- Are curves different in 3D? [1:12:48]
- End [1:22:11]
[Wed 3/2] JS Tips [Videos JS Tips ] [Slides JS Tips ]
- Tip 1: Survival Example [1:01]
- Tip 2: Do not pretend it is "some other language" [2:24]
- Tip 3: Understand scope, functions, closures [2:56]
- Tip 4: Spread Syntax and Arguments [3:47]
- Tip 5: Literal Objects [6:26]
- Tip 6: Class-based objects [9:23]
- Tip 7: Functions and Closures [16:25]
- Tip 8: Constructors and Methods [21:22]
- Tip 9: Beware of "this" keyword [24:28]
- Tip 10: ES6 Modules [33:07]
- Tip 11: Typing [36:39]
- End [45:44]
[Thur 3/3] 3D and THREE.js [Videos Lecture 12 ] [Slides Lecture 12 ]
- 3D, what does it mean? (2D vs. 3D) [3:08]
- Drawing in 3D (world, screen, occlusions, shading) [7:54]
- What does it take to "draw" in 3D? [12:25]
- THREE.js [16:19]
- Hello Cube: Renderer [38:37]
- Hello Cube: World/Scene [42:32]
- Hello Cube: Geometry [44:05]
- Hello Cube: Material [45:44]
- Hello Cube: Object [48:16]
- Hello Cube: Camera [1:00:56]
- Hello Cube: Draw [1:05:21]
- End [1:10:04]
Week 7 (3/6 - 3/12)
[Tue 3/8] 3D Coordinate Systems [Videos Lecture 13 ] [Slides Lecture 13 ]
- Looking at things: Depth and Distance [1:57]
- Coordinate systems, Right hand rule, cross-product [9:37]
- Triangles: normals, barycentric interpolation [13:00]
- Normals and Tangents [19:25]
- Coordinates in 3D [21:57]
- Scene Coordinates [29:11]
- Camera Coordinates [1:03:40]
- From object to screen... [1:06:35]
- THREE as an API [1:07:43]
- End [1:16:51]
[Thur 3/10] 3D Hierarchy and Viewing [Videos Lecture 14 ] [Slides Lecture 14 ]
- Making a Scene (graph) [5:04]
- Where do the Matrices Live [10:55]
- THREE (scene-graph API, object 3D, transformation) [17:04]
- Inside of a THREE Object [24:47]
- Cameras (viewing transformation, position of the camera, describing cameras) [36:18]
- Camera Demo [44:11]
- LookFrom/LookAt/VUp in THREE [53:52]
- Projection (from 3D to 2D) [56:47]
- Orthographic Projection [1:02:13]
- Perspective Projection [1:07:16]
- Field of View vs. Focal Length [1:12:05]
- End [1:18:23]
Week 8 (3/13 - 3/20)
[Wed 3/16] Asynchronous Programming (for THREE) [Videos Async Programming ] [Slides Async Programming ]
- Asynchronous Use Case: Loading Collections of Triangles [0:15]
- Asynchronous: Call Back [3:06]
- Some Notes on Asynchronicity [4:38]
- Asynchronous: Promises [5:25]
- Asynchronous Functions [6:50]
- then vs. await [8:32]
- Error Handling [10:04]
- End [12:11]
[Wed 3/19] 3D Extra Video: Projection and Perspective [Videos Lecture 14a ] [Slides Lecture 14a ]
- Projection 3D to 2D [0:15]
- Orthographic Projection [4:10]
- Perspective Projection [8:35]
- Perspective Math: Similar Triangles [17:45]
- Z ordering [23:34]
- In THREE [27:57]
- End [30:30]
[Wed 3/19] 3D Extra Video: Lighting and Materials [Videos Lecture 14b ] [Slides Lecture 14b ]
- Material and Lighting [1:57]
- Shading Intuitions [4:43]
- Types of Lights [11:29]
- Lights in THREE [18:04]
- End [18:26]
[Wed 3/19] 3D Extra Video: Animation in THREE [Videos Lecture 14c ] [Slides Lecture 14c ]
- The Animation Loop [0:17]
- What is easy to animate? Easy vs. Hard [2:59]
- Transformations [5:43]
- End [6:13]
Week 9 (3/21 - 3/26)
[Tue 3/22] Rotations [Videos Lecture 15 ] [Slides Lecture 15 ]
- Rotations are Linear Transformations [3:48]
- Rotation vs. Orientation [9:58]
- Center of Rotation (in THREE) [13:37]
- Rotations about Axes [22:12]
- Axes in the world vs. local axes [26:28]
- Euler's Theorems [29:29]
- Axis Angle (Euler's other theorem) [47:50]
- Unit Quaternions [54:28]
- THREE.js and rotations [1:03:21]
- Lookfrom/Lookat/Up [1:09:53]
- End [1:14:26]
[Thur 3/24] Meshes [Videos Lecture 16 ] [Slides Lecture 16 ]
- Good Meshes [2:05]
- Mesh Properties [9:21]
- Vertex Normals [12:17]
- Vertex Splitting [20:16]
- Mesh Operations / Representation [24:08]
- About Buffers [37:15]
- Interpolating Vertex Colors [47:32]
- About Normals [59:00]
- JS Tips: Inheritance [1:07:58]
- End [1:16:23]
Week 10 (3/27 - 4/2)
[Tue 3/29] Texture A: Basic Texturing Review [Videos Lecture 17a ] [Slides Lecture 17a ]
- Why Basic Textures? [00:18]
- How To Do Basic Textures? [2:00]
- What do we need from a texture? [4:33]
- Putting textures in THREE [6:45]
- What the hardware does... [11:47]
- End [15:35]
[Tue 3/29] Texture B: Texture Basics [Videos Lecture 17b ] [Slides Lecture 17b ]
- How to get more than 3 colors on a triangle? [0:06]
- Texture Mapping: Basic Idea [2:01]
- Basic Texture Mapping [4:25]
- Demo [8:36]
- UV Mapping [10:23]
- Texture Wrapping [14:28]
- Steps for using Texture Mapping [17:37]
- End [20:03]
[Tue 3/29] Texture C: Texture in THREE [Videos Lecture 17c ] [Slides Lecture 17c ]
- The steps to texture mapping [0:45]
- Textures in THREE: Create objects with UVs [1:51]
- Textures in THREE: Load Textures [5:26]
- Textures in THREE: Attach as colors to objects [8:25]
- An Entire Example [9:42]
- Some caveats for Textures in THREE [12:04]
- End [13:23]
[Tue 3/29] Texture D: How Texture Mapping Works [Videos Lecture 17d ] [Slides Lecture 17d ]
- Texture Coordinate and Texture Lookup [0:14]
- The Problems of Texture Lookup [1:54]
- Texture Lookups: Magnification [3:39]
- Texture Lookups: Minification [8:50]
- Simple Filtering [11:12]
- Digging into Filtering: Summed Area Table [13:27]
- Digging into Filtering: Mip-Maps [18:18]
- THREE Options [30:06]
- End [32:07]
[Thu 3/31] Advanced Texturing Part 2: Fake Normals and Bump Mapping (FYI: No Lecture 18A) [Videos Lecture 18b ] [Slides Lecture 18b ]
[Thu 3/31] Advanced Textures: Other Texturing Tricks [Videos Lecture 18c ] [Slides Lecture 18c ]
- Layered textures [09:04]
- Light maps for pre-computed lights [10:55]
- Ambient occlusion [15:07]
- Procedural and solid textures [17:43]
- End [22:01]
[Thu 3/31] Advanced Textures: Sky Boxes and Environment Maps [Videos Lecture 18d ] [Slides Lecture 18d ]
[Thu 3/31] Advanced Textures: Shadow Maps [Videos Lecture 18e ] [Slides Lecture 18e ]
Week 11 (4/3 - 4/9)
[Tue 4/5] Drawing in 3D [Videos Lecture 19 ] [Slides Lecture 19 ]
- Triangles: the primitive [4:12]
- Lighting: Local vs. Global [10:18]
- Colors per Triangle [20:54]
- Texture Maps 1: Texture Coordinates [25:51]
- Mip Maps + Tri-linear interpolation [33:13]
- The Painters Algorithm [54:39]
- The Z-Buffer Algorithm [1:00:21]
- Semi-Transparent Objects? [1:15:31]
- End [1:19:33]
[Thu 4/7] Drawing Fast: The Graphics Pipeline [Videos Lecture 20 ] [Slides Lecture 20 ]
- Why do you care how the hardware works? [3:44]
- The Steps of 3D Graphics [5:25]
- A Pipeline [10:20]
- Parallelization [18:02]
- Some history about the graphics hardware [21:16]
- Modern graphics pipeline and the journey of a triangle [29:09]
- Pixels or Fragments [44:41]
- Pixel Processing Ground Rules [52:28]
- What's next? Program these steps! [1:00:40]
- End [1:09:48]
Week 12 (4/10 - 4/16)
[Tue 4/12] Shaders [Videos Lecture 21 ] [Slides Lecture 21 ]
- The Pipeline [4:50]
- Vertex Processing Unit [23:01]
- Fragment Processing [28:35]
- Uniform, Attribute, Varying [30:06]
- GLSL [38:32]
- Getting Data From Javascript [53:33]
- Using Shaders in THREE [1:01:51]
- End [1:12:09]
[Thu 4/14] Shaders 2 [Videos Lecture 22 ] [Slides Lecture 22 ]
- Lighting: The General Idea [7:10]
- The Historic Lighting Model [14:39]
- Diffuse Materials [20:26]
- Shiny Things [29:28]
- Putting it together: The Phong Lighting Model [40:30]
- Designing Phone Material in THREE [42:58]
- The Geometric Properties (transformations of normals, lighting coordinate system) [50:12]
- What does THREE do [57:24]
- End [1:17:46]
Week 13 (4/17 - 4/23)
[Tue 4/19] Shaders 3 - Stripes Anti-Aliasing Noise Displacement [Videos Lecture 23 ] [Slides Lecture 23 ]
- Thinking About Shaders [1:18]
- Anti-Aliasing in Shaders [19:41]
- Step vs. SmoothStep [25:25]
- What value for the width? [32:29]
- Noise [41:04]
- Perlin Noise [50:37]
- Fake Shape [1:00:32]
- Combine with Environment Maps... [1:12:11]
- Normal Maps and Bump Maps [1:12:54]
- End [1:16:06]
[Thu 4/21] Performance Tricks [Videos Lecture 24 ] [Slides Lecture 24 ]
- Avoid wasting computation by failing Z-test [6:48]
- The modern approach: Deferred Shading [15:00]
- Deferred Shading Example [20:07]
- Complex Lighting [28:03]
- Do we need so many textures [40:37]
- Skinning [52:55]
- Animation by Deformation [1:08:09]
- End [1:11:43]
Week 14 (4/24 - 4/30)
[Tue 4/26] Deformation and Shape [Videos Lecture 25 ] [Slides Lecture 25 ]
- Multi-Pass Rendering [5:19]
- Animation by Transformation [10:53]
- Animation by Deformation [13:27]
- Idea 1: Shape Interpolation (Morphing) [16:35]
- Idea 2: Non-linear Deformations [25:08]
- The trick: coordinates in irregular shapes [40:20]
- Curves vs. Surfaces vs. Solids [43:05]
- Solid Modeling [51:47]
- Lofting and Other Shape Methods [1:03:00]
- End [1:07:13]
[Thu 4/28] Free Form Surfaces [Videos Lecture 26 ] [Slides Lecture 26 ]
- Free Form Surfaces: Approaches [4:05]
- Implicit Surfaces [6:13]
- Parametric Surfaces [13:20]
- Subdivision Surfaces [26:37]
- Butterfly Scheme [41:37]
- Loop Scheme [51:02]
- Catmull-Clark Scheme [58:42]
- Smooth Surfaces Review [1:07:56]
- End [1:16:30]
Week 15 (5/1 - 5/7)
[Tue 5/1] Rasterization and Aliasing [Videos Lecture 27 ] [Slides Lecture 27 ]
- Brezenham / Midpoint Algorithm [8:25]
- Scanline Algorithm [15:48]
- Barycentric Coordinates [17:35]
- Aliasing and Anti-Aliasing [22:56]
- Intuition: Sharp edges are bad [37:22]
- Important: it is PRE-filtering you must filter before Aliasing occurs! [41:51]
- Anti-Aliasing Triangle Edges [52:51]
- In Practice... [57:23]
- An example [1:04:50]
- End [1:13:03]