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 prior years (2022 Outline) (2021 Outline) 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/27)

[Tue 1/24] Welcome
[Videos Lecture 1 ] [Slides Lecture 1 ]

• Lectures in Zoom: emojis, polls, chat, slides [02:44]
• What is Computer Graphics? [25:09]
• Course Goals [31:05]
• Learning JavaScript [45:46]
• Course Webs and Tools [53:33]
• Course Staff and Getting Help [59:26]
• The Weekly Rhythm (Assignments, Lectures, Grading, and Resources) [1:05:48]
• Summary [1:11:26]
• End/Questions [1:11:59]

[Thu 1/26] Pre-Graphics
[Videos Lecture 2 ] [Slides Lecture 2 ]

• Using Live Server [06:02]
• Advice on Learning JavaScript [12:30]
• Variables, conditionals, and loops [18:10]
• Object Orientation in JS [27:03]
• Functions in JS [31:44]
• Functions and Lexical Scope [42:49]
• Intro to Web Pages [51:50]
• When will JS run? [1:05:06]

Closures
[Videos Closures ] [Slides Closures ]

Git Help
[Videos Git Part A , Git Part B ] [Slides Git Part A , Git Part B ]

JS Tips of the Day
[Videos JS Tips ] [Slides JS Tips ]

Week 2 (1/30 - 2/3)

[Tue 1/31] Graphics and Web Graphics 101
[Videos Lecture 3 ] [Slides Lecture 3 ]

• How do we see? [02:20]
• How computers create images [11:40]
• Drawing Shapes on Web Pages [20:35]
• The Canvas Element [24:39]
• When do I draw? [35:38]
• Where do I draw? [45:16]
• Paths and the Pen Model [55:55]
• Summary [1:07:39]

[Thurs 2/2] More Basic Graphics and Web Graphics
[Videos Lecture 4 ] [Slides Lecture 4 ]

• Buffering and Making Motion Believable [02:32]
• Back to the Pen Model [27:27]
• Determining how to fill a shape (Even/Odd) [36:05]
• Winding (Non-zero) Method [41:57]
• Drawing Summary, About Canvas Positioning [48:56]
• Event Handling [54:12]
• Demo [01:07:19]
• Summary [01:14:37]

Week 3 (2/6 - 2/10)

[Tue 2/7] Transformations 1
[Videos Lecture 5 ] [Slides Lecture 5 ]

• Agenda [00:01:38]
• Visualizing Transformations [00:06:16.00]
• Return of Lecture [00:14:32]
• Instancing [00:23:03]
• Types of Transformations [00:31:57]
• Points of Scaling/Rotation [00:50:55]

[Thurs 2/9] Feb 9 Transformations and Retained Mode Graphics
[Videos Lecture 6 ] [Slides Lecture 6 ]

• Agenda [0:00:42]
• Sequences of Transformations, Non-Uniform Scaling [0:08:34]
• Skew [0:18:33]
• Hierarchy and Chaining [0:20:37]
• A "Tree of Parts" [0:36:56]
• Structured SVG [0:48:45]
• Reusing Assets [1:00:12]
• SVG vs Canvas [1:10:25]

Week 4 (2/13 - 2/17)

[Tue 2/14] Transformation Math
[Videos Lecture 7 ] [Slides Lecture 7 ]

• About Transformations and Coordinate Systems [00:03:49]
• Vectors and Points [00:13:05]
• Matrix Math [00:20:36]
• Transformations are Functions [00:33:41]
• Affine Transforms Across Dimensions [00:43:17]
• Non-Affine Matrices in 3D [00:53:50]
• How APIs do this Math [00:59:25]
• Summary [01:07:29]

[Thu 2/16] More Transformation Math
[Videos Lecture 8 ] [Slides Lecture 8 ]

• Review [00:02:46]
• Intepretation of Transformation in SVG [00:12:02]
• Composition of Transformation [00:15:41]
• Order changing example [00:21:14]
• Affine as Linear [00:26:48]
• What about rotation [00:38:15]
• Linear Interpolation and Matrices [00:52:07]
• Use of Rotations: Boids [01:00:43]
• Summary [01:13:48]

Week 5 (2/20 - 2/24)

[Tue 2/21] Curves 1
[Videos Lecture 9 ] [Slides Lecture 9 ]

• Agenda and Introduction to Curves [00:02:03]
• Curve Representations [00:09:36]
• The Free Parameter [00:20:43]
• Approximating Curves [00:29:34]
• Mathematically Defining Continuity [00:37:11]
• Continuity With Arcs [00:49:23]
• Piecewise Parametrization of a Curve [00:57:40]
• A Line as a Parametric Polynomial [01:03:40]
• Summary [01:12:49]

[Thu 2/23] Curves 2
[Videos Lecture 10 ] [Slides Lecture 10 ]

• Agenda [00:01:53]
• Basis Functions [00:13:22]
• Using Basis Functions to Make a Curve [00:21:14]
• Hermite Form [00:25:14]
• Cardinal Splines [00:35:12]
• What To Do With 3 Points [00:48:10]
• Bezier Curves [00:52:41.0]
• De Castlejau Construction [00:58:23]
• Wiggle Theorem and Crossing Property [01:11:36]

Week 6 (2/27 - 3/3)

[Tue 2/28] Curves 3
[Videos Lecture 11 ] [Slides Lecture 11 ]

• Important Notes About Curves [00:01:28]
• Cardinal Interpolation and Bezier Curves [00:08:51]
• The Train Assignment [00:20:59]
• Arc Length [00:33:15]
• TCB Curves (Fancy Cardinals) [00:41:48]
• Good and Bad of Beziers [00:46:41]
• Polynomial Curves [00:51:46]
• B-Splines [00:56:18]
• Thinking in Basis Functions [01:08:20]
• Summary [01:14:58]

[Thu 3/2] Intro to 3D and Three
[Videos Lecture 12 ] [Slides Lecture 12 ]

• These are Small, Those are Far Away [00:01:40]
• Key Concepts in 3D [00:09:05]
• Showing 3D Objects in a 2D Plane [00:15:47]
• Components of a 3D Scene and Program [00:25:38]
• Concepts in THREE.JS [00:30:22]
• Getting Started in THREE.JS [00:38:22]
• A THREE.JS Program [00:46:48]
• Materials in THREE.JS [00:53:53]
• Naming Conventions [00:56:23]
• Naming Conventions [00:56:23]
• Transformations in 3D [01:00:00]
• The 3D Camera [01:04:32]

Week 7 (3/6 - 3/10)

[Tue 3/7] More 3D and Three
[Videos Lecture 13 ] [Slides Lecture 13 ]

• Review of 3D Fundamentals [00:03:09]
• Triangles, Normals, Barycentric Interpolation [00:10:30]
• Surfaces vs Volumes [00:15:49]
• Coordinates in 3D [00:25:23]
• Example 3D Scene [00:30:38]
• Camera Coordinate System [00:47:29]
• How THREE Stores Attributes [00:51:43]
• Scale in THREE [01:03:03]
• Summary [1:05:15]

[Thu 3/9] Cameras Lights
[Videos Lecture 14 ] [Slides Lecture 14 ]

• State vs Transformations [0:03:11]
• Center of Rotation and Examples [0:08:45]
• The Camera in THREE [0:19:43]
• Key Concepts About the 3D Camera [0:32:38]
• Projections [0:38:43]
• Perspective View and History [0:48:51]
• FOV, Focal Length, and Math [0:54:25]
• Defining Camera Properties in THREE [1:06:16]
• Lighting and Materials [1:07:50]
• Summary [1:13:33]

Week 8 (3/20 - 3/24)

[Tue 3/21] More 3D - Rotations
[Videos Lecture 15 ] [Slides Lecture 15 ]

• Review on Cameras [00:02:58]
• Standard Lighting Model [00:08:23]
• Types of Light Sources [00:21:48]
• Animating in 3D [00:24:27]
• Transformations in 3D -- Differences from 2D [00:31:49]
• Rotations are Special [00:36:02]
• Changing the Origin for Rotation, Using Groups [00:48:53]
• Euler's Theorems [01:00:56]
• Good and Bad of Euler Angles, Quaternions [01:07:21]
• Summary [1:13:33]

[Thu 3/23] More Rotations - Meshes
[Videos Lecture 16 ] [Slides Lecture 16 ]

• Representing Rotations [00:01:31]
• Euler Angles Demo [00:08:25]
• Composing Rotations and Problems With This [00:12:09]
• Quaternions [00:23:17]
• ThreeJS and Quaternions [00:34:06]
• Look At Matrices/Operations [00:41:35]
• Rotations Summary [00:47:37]
• Mesh Basics [00:49:07]
• Buffers and BufferGeometry [1:09:13]

Week 8 (3/27 - 3/31)

[Tue 3/28] Meshes and Lighting
[Videos Lecture 17 ] [Slides Lecture 17 ]

• Meshes and Buffer Geometry [00:01:49]
• Colors on Meshes [00:16:13]
• Barycentric Colors [00:20:57]
• Normal Vectors and Colors [00:25:47]
• Transforming Normals and Mesh Summary [00:36:16]
• Diffuse and Specular Materials [00:40:19]
• Improving Results and Summary [01:08:40]

Standard Texturing - Basic Texturing Review
[Videos Lecture 18A ] [Slides Lecture 18A ]

• Why Basic Textures? [00:00:18]
• How To Do Basic Textures? [00:02:00]
• What do we need from a texture? [00:04:33]
• Putting textures in THREE [00:06:45]
• What the hardware does [00:11:47]
• End [00:15:35]

Standard Texturing - Texture Basics
[Videos Lecture 18B ] [Slides Lecture 18B ]

• How to get more than 3 colors on a triangle? [00:00:06]
• Texture Mapping: Basic Idea [00:02:01]
• Basic Texture Mapping [00:04:25]
• Demo [00:08:36]
• UV Mapping [00:10:23]
• Texture Wrapping [00:14:28]
• Steps for using Texture Mapping [00:17:37]
• End [00:20:03]

Standard Texturing - Texture in THREE
[Videos Lecture 18C ] [Slides Lecture 18C ]

• The steps to texture mapping [00:00:45]
• Textures in THREE: Create objects with UVs [00:01:51]
• Textures in THREE: Load Textures [00:05:26]
• Textures in THREE: Attack as colors to objects [00:08:25]
• An Entire Example [00:09:42]
• Some caveats for Textures in THREE [00:12:04]
• End [00:13:23]

Standard Texturing - How Texture Mapping Works
[Videos Lecture 18D ] [Slides Lecture 18D ]

• Texture Coordinate and Texture Lookup [00:00:14]
• The Problems of Texture Lookup [00:01:54]
• Texture Lookups: Magnification [00:03:39]
• Texture Lookups: Minification [00:08:50]
• Simple Filtering [00:11:12]
• Digging into Filtering: Summed Area Table [00:13:27]
• Digging into Filtering: Mip-Maps [00:18:18]
• THREE Options [00:30:06]
• End [00:32:07]

Week 9 (4/3 - 4/7)

Advanced Texturing - Normals and Bump Mapping
[Videos Lecture 19A ] [Slides Lecture 19A ]

• Fake normals [00:00:11]
• Normal maps and bump maps [00:11:17]
• End [00:23:05]

Advanced Texturing - Other Texturing Tricks
[Videos Lecture 19B ] [Slides Lecture 19B ]

• Layered textures [00:09:04]
• Light maps for pre-computed lights [00:10:55]
• Ambient occlusion [00:15:07]
• Procedural and solid textures [00:17:43]
• End [00:22:01]

Advanced Texturing - Sky Boes and Environment Maps
[Videos Lecture 19C ] [Slides Lecture 19C ]

• Sky Boxes [00:03:28]
• Environment mapping [00:08:43]
• End [00:23:01]

Advanced Texturing - Shadow Maps
[Videos Lecture 19D ] [Slides Lecture 19D ]

• Shadow map [00:00:01]
• Shadow map [00:14:48]

[Thu 4/6] Drawing in 3D
[Videos Lecture 20 ] [Slides Lecture 20 ]

• Global Lighting Effects [00:08:18]
• Global Lighting Effects [00:12:56]
• Texture Mapping Review [00:19:10]
• Steps of Drawing in 3D [00:27:33]
• Transformation [00:33:05]
• Reasons you might not see a triangle [00:33:05]
• Visibility Algorithms [00:39:58]
• Problems with Z-Indexing [00:58:48]
• Summary [01:08:41]

Week 10 (4/10 - 4/14)

[Tue 4/11]
[Videos Lecture 21 ] [Slides Lecture 21 ]

• Agenda [00:04:43]
• The Pipeline [00:08:05]
• Constant State [00:15:41]
• What can our Program Do? [00:19:46]
• The Vertex Processor [00:24:42]
• The Rasterizer [00:28:30]
• How to use uniform variables [00:33:08]
• Using both the Vertex and Fragment Shader [00:54:27]
• Communicating between JS and GLSL [01:01:05]
• Communicating between JS and GLSL [01:01:05]

[Thu 4/13]
[Videos Lecture 22 ] [Slides Lecture 22 ]

• Agenda [00:05:20]
• Lighting Methods [00:10:19]
• Light Positioning and Coordinates [00:28:25]
• Image Textures [00:37:37]
• Fun with Shaders [00:43:32]
• Jagged Edges Mitigation [00:57:03]
• Functions in GLSL [01:00:30]
• Let's Make a Coronavirus (Displacement Maps) [01:03:49]

Week 11 (4/17 - 4/21)

Aliasing
[Videos Lecture 23A , Lecture 23B , Lecture 23C ] [Slides Lecture 23A , Lecture 23B , Lecture 23C ]

• What is a Pixel? [00:01:45]
• Aliasing Technical Problem [00:07:02]
• Crawlies [00:11:19]
• Texture Sampling Problems [00:15:59]
• Fundamental Problem [00:20:05]
• Anti-Aliasing [00:06:03]
• Blurring [00:08:56]
• Average over the Region [00:13:18]
• Order Matters! [00:15:44]
• Anti-Aliasing Problem [00:23:39]
• Multiple Sampling [00:00:56]
• Using Derivatives [00:06:15]
• Multiple Sampling Pros and Cons [00:12:23]
• Blurring the Edges [00:17:54]
• Smoothstepping [00:30:24]

Shaders and Noise
[Videos Lecture 24A ] [Slides Lecture 24A ]

• Why we need noise [00:02:21]
• Why we need noise [00:06:52]
• Example of psuedo-randomness [00:09:56]
• Perlin Noise [00:19:26]

Week 12 (4/24 - 4/28)

[Tue 4/25] Performance
[Videos Lecture 25 ] [Slides Lecture 25 ]

• Agenda [00:00:36]
• Bottlenecks [00:07:05]
• Bottlenecks [00:07:05]
• 2 Passes [00:16:29]
• Defered Rendering [00:20:24]
• Extensions on DR [00:32:49]
• Complex Lighting Situations [00:38:23]
• Decreasing Number of Commands [00:52:25]
• Animation [00:54:51]
• Matrix Palette [01:05:50]

[Thu 4/27] Shape and Deformation
[Videos Lecture 26 ] [Slides Lecture 26 ]

• How We Animate [00:02:39]
• Matrix Palette [00:04:30]
• Skinning [00:08:33]
• Blending Matrices [00:14:56]
• Skeletons, Armatures, Bones [00:18:57]
• Space Transformations [00:24:26]
• It's Morphing Time [00:43:30]
• Using this in the Project [00:48:11]
• Smoothing Shapes [00:54:06]
• Solid Modeling [01:06:00]

Week 13 (5/1 - 5/5)

[Tue 5/2] Surfaces
[Videos Lecture 27 ] [Slides Lecture 27 ]

• Agenda [00:02:26]
• Lofting - Sweeping Between Shapes [00:19:33]
• Implicit Surfaces (Metaballs) [00:23:48]
• Parametric Surface [00:28:50]
• Subdivision Curves [00:36:51]
• Subdivison in 3D [00:47:42]
• Catmull-Clark Subdivision [01:03:55]