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