Course Outline: Videos and Slides

in Pages

This page provides an outline of the class topics discussed, with links to the videos and the slides for the lectures (when available). You can click the timestamp to watch a specific topic.

The videos are also available on the MediaSpace Channel.

Lecture videos should appear here a few days after they are recorded.

There is a similar Outline of Spring 2020 if you want to see what happened last year, or see the material presented a different way.

Week 1 (1/25 - 1/29)

[Tue 1/26] Course Overview
[Videos Lecture1 ] [Slides Lecture1 ]

[Bonus] Git, GitHub Classroom, & Chrome Debugger
[Videos Git-Part-A , Git-Part-B , Debugger ] [Slides Git-Part-A , Git-Part-B ]

[Thu 1/28] Pre Graphics & Web Programming
[Videos Lecture2 ] [Slides Lecture2 ]

[Bonus] Closures
[Videos Closures ] [Slides Closures ]

Week 2 (2/1 - 2/5)

[Tue 2/2] Graphics 101 & Web Browser Graphics
[Videos Lecture3 ] [Slides Lecture3-1 , Lecture3-2 ]

  • How we see (light, depth, & distance, 2D vs. 3D) [03:13]
  • Representing images: types of displays & buffers [16:33]
  • Display synchronization (buffering) [39:08]
  • Graphics in the web browser & different APIs [47:30]
  • Intro to the Canvas API [01:00:00]

[Thur 2/4] Canvas & Coordinate Systems
[Videos Lecture4 ] [Slides Lecture4 ]

  • Canvas properties recap & when/where/what do I draw? [03:45]
  • How save & restore works [12:30]
  • Paths & Filling rules (convex, non-convex, disconnected...) [17:28]
  • Winding rules (non-zero vs even-odd) [33:07]
  • Canvas coordinates, handling events, interpreting coordinates... [41:02]
  • Coordinate systems demo (moving objects vs. coordinates) [01:01:31]
  • Instancing & keys ideas of transformations [01:12:27]

Week 3 (2/8 - 2/12)

[Tue 2/9] Transformations in 2D
[Videos Lecture5 ] [Slides Lecture5 ]

  • JavaScript tip: Type hints & dynamic typing [02:55]
  • Intro to transformations: moving triangles w/ translations! [10:47]
  • Instancing & composition of transformations w/ demo [19:31]
  • Scale transformations w/ demo [29:39]
  • Combining scale & translate w/ demo [35:40]
  • Center of scaling demo [47:08]
  • Rotations & handedness (curling fingers) w/ demo [55:56]
  • Rotating around a point (rotate + translate) w/ demo [01:05:51]
  • Hierarchy of objects & articulated chains [01:10:25]

[Thur 2/11] More Transformations in 2D
[Videos Lecture6 ] [Slides Lecture6 ]

  • JavaScript tips: 'class-based' objects [02:15]
  • Recap: Handedness (curling fingers) in 2D [05:54]
  • Recap: Transformation basics & composed transformations [10:46]
  • The shear/skew transformation [18:51]
  • Articulated chains (pieces rotating relative to each other) w/ demos [22:25]
  • Hierarchical modeling (instancing, trees, DAGs, graphs) [35:36]
  • SVG: a retained mode API compared to the immediate mode Canvas API [48:06]
  • Summary of transformations, hierarchy, & APIs [01:07:27]

Week 4 (2/15 - 2/19)

[Tue 2/16] Transformation Math
[Videos Lecture7 ] [Slides Lecture7 ]

  • JavaScript tip: functions are objects! [03:33]
  • Transformations on points, what is a coordinate system, & math you need to know for the class [10:29]
  • Vectors (& points) properties & operations [20:26]
  • Matrix properties & operations [29:06]
  • Linear transformations (rotate, scale, skew, etc.) [38:27]
  • Affine transformations (linear transformation + translation) [47:51]
  • Homogeneous coordinates & encoding transformations in matrices [50:19]
  • Transformation matrix examples [58:07]
  • Transformation implementation in APIs [01:12:30]

[Thur 2/18] More Transformation Math
[Videos Lecture8 ] [Slides Lecture8 ]

  • JavaScript tip: the 'this' keyword [02:39]
  • Composition of transformations (order matters!) [06:18]
  • Affine transformations as a linear equation [17:44]
  • Transformation commands [19:12]
  • Rotation transformation math, & what you can do with rotations [24:56]
  • Linear interpolation [41:03]
  • Oriented 'particles': a use for rotations! [44:05]
  • More on affine transformations [52:02]
  • Transformation implementation in APIs & lots of examples [54:39]
  • Summary of transformation math [01:04:53]

Week 5 (2/22 - 2/26)

[Tue 2/23] Curves
[Videos Lecture9 ] [Slides Lecture9 ]

  • JavaScript tip: ES6 modules [01:48]
  • Shapes, curves, areas, regions, & surfaces [04:47]
  • Types of curve representations (implicit, parametric, procedural, & subdivision) [11:15]
  • Parametric forms, free parameters & shape parameters [24:09]
  • Continuity: defining smoothness [28:36]
  • Speed matters? C vs. G continuity [43:29]
  • Piecewise polynomials & parameterizations [50:24]
  • Line (1st degree), quadratic (2nd degree) & cubic (3rd degree) segments [01:00:09]
  • The Hermite form, hermite equations, & hermite curves [01:09:04]

[Bonus] Continuity Questions
[Videos ContinuityQuestions ] [Slides ]

[Thur 2/25] Curve Interpolation
[Videos Lecture10-Interpolation ] [Slides Lecture10 ]

  • Interpolation, tangents & derivatives [00:20]
  • Recap: Hermite form, designing with hermite curves, & sketching [06:43]
  • Cardinal splines, Catmull-Rom splines, the tension parameter, & sketching [13:21]
  • Locality of control (why not use polynomial pieces of higher degrees?), & demo [19:34]
  • Summary of interpolation [25:53]

[Thur 2/25] Bézier Curves!
[Videos Lecture10-BézierCurves ] [Slides Lecture10 ]

  • Approximating curves & points influencing curves [00:37]
  • Bézier curves introduction [05:03]
  • Quadratic Bézier curves (3 points) [09:19]
  • Why you should love Bézier curves [11:41]
  • Math for Bézier curves (basic functions) [13:37]
  • Variation diminishing / the wiggle theorem / crossing property [16:49]
  • Cubic Bézier curves (4 points) [18:14]
  • Bézier blending functions [21:47]
  • Bézier curves in the Canvas API [23:47]

[Thur 2/25] Geometric Intuitions for Bézier Curves
[Videos Lecture10-GeometricIntuitions ] [Slides Lecture10 ]

  • DeCastlejau Construction [00:28]
  • The blending tree, geometric intuitions, & DeCastlejau subdivision [06:00]
  • Summary: curves part 1 & 2 [08:53]

Week 6 (3/1 - 3/5)

[Tue 3/2] Even More Curves!
[Videos Lecture11 ] [Slides Lecture11 ]

  • JavaScript tip: casting & type checks [01:47]
  • Quick curve review [09:47]
  • Arc length parameterization of a piecewise curve [13:02]
  • Bézier curves - why so important?? (variance diminishing, symmetric, & more) [26:00]
  • Why NOT Bézier curves for everything? (interpolation, affine vs. projective invariance, & more) w/ demos [34:42]
  • B-splines introduction [47:06]
  • Thinking in terms of basis functions [53:08]
  • Simple B-splines & when to use B-splines?? [01:06:36]
  • Train demo (B-Splines vs arc-length parameterization) [01:11:13]
  • Curves summary [01:14:11]

[Thur 3/4] Intro to 3D Graphics
[Videos Lecture12 ] [Slides Lecture12 ]

  • Depth & distance/sensing 2D vs. inferring 3D [01:23]
  • 3D Displays & 3D cues from one image [11:03]
  • 3D Graphics & some 3D math (coordinate systems, right hand rule, & more) [23:27]
  • Triangles & curves vs. surfaces. vs volumes [30:27]
  • Normals & tangents [40:47]
  • Drawing in 3D: thinking in terms of a world [45:18]
  • The THREE.js graphics API & graphics abstractions [51:29]
  • Summary of steps required to draw a triangle & cube with 3D graphics (vertex shader, fragment shader, etc.) [01:00:14]

Week 7 (3/8 - 3/12)

[Tue 3/9] 3D & THREE.js
[Videos Lecture13 ] [Slides Lecture13 ]

  • THREE.js & graphics abstractions / how to import THREE.js into your code [00:03:21]
  • JavaScript tip: modules & explicit type checks [00:10:45]
  • Hello Cube overview (steps required to draw a cube) [00:19:48]
  • Renderer: show to the screen [00:20:48]
  • World/Scene: where to draw [00:26:11]
  • Geometry: make the cube [00:28:33]
  • Material: need the 'stuff' object is made out of [00:31:24]
  • Mesh: make it an object (& disambiguation of Mesh vs. Geometry outside of THREE.js) [00:36:37]
  • Add object to the world / hierarchy & transformations in THREE.js [00:39:32]
  • Camera: project the world onto the screen/ viewing transformation [00:49:33]
  • Draw: put things on the screen & animation loops [00:53:39]
  • Lighting & different types of materials [00:58:52]
  • Barycentric interpolation for triangles & the importance of normals [01:07:44]

[Thur 3/11] More 3D & THREE.js
[Videos Lecture14 ] [Slides Lecture14 ]

  • Cube example (lighting, camera, solid appearance, animation, & rotation) [00:02:00]
  • Loading objects (deferred loading) [00:07:06]
  • JavaScript tip: asynchronous programming & callbacks [00:09:46]
  • Material, lighting (types of lights), & shading intuitions [00:22:49]
  • Animation loop & animation in THREE.js [00:37:38]
  • Transformations in THREE.js [00:44:48]
  • How do objects work in THREE.js? (position, orientation, scale, etc.) & state vs. transformation [00:51:16]
  • Rotations in 3D... tricky! [00:58:13]
  • Viewing transformation (camera.lookat & types of projections) [01:02:18]

Week 8 (3/15 - 3/19)

[Tue 3/16] Transformations in 3D [Viewing & Rotations]
[Videos Lecture15 ] [Slides Lecture15 ]

  • JavaScript tip: methods & the 'this' keyword [00:02:43]
  • Projection from 3D to 2D & types of projections [00:08:10]
  • Perspective assumptions & perspective math [00:23:45]
  • Clipping & the frustum [00:35:50]
  • The viewing transformation (place camera + projection 3D to 2D) [00:39:44]
  • Special rotations for cameras & other objects: lookat & lookfrom [00:44:06]
  • Order of transformations in THREE.js (T, R, & S) [00:51:07]
  • Hierarchy in THREE.js (any object can have children) [00:56:30]
  • More about rotations in THREE.js (rotation vs. orientation) [01:03:47]

[Thur 3/18] Rotations in 3D
[Videos Lecture16 ] [Slides Lecture16 ]

Week 9 (3/22 - 3/26)

[Pre-recorded] Lecture 17B: Meshes, Color, & Normals
[Videos Lecture17B ] [Slides Lecture17B ]

  • Meshes: collections of triangles [00:12]
  • Criteria for good meshes & properties of meshes, vertices [03:11]
  • Vertex splitting [05:53]
  • Mesh operations, representation, & data structures [08:13]
  • Meshes in THREE.js [16:24]
  • Combining material, face, & vertex colors & examples in THREE.js [20:09]
  • Interpolating colors & other vertex properties (barycentric interpolation) including face colors [29:13]
  • Mesh summary [37:13]
  • Overview of normals & their use (backface culling, lighting...) [37:53]

[Pre-recorded] Lecture 17C: Lighting
[Videos Lecture17C ] [Slides Lecture17C ]

[Pre-recorded] Lecture 18A: JavaScript Subclasses & Lighting Review
[Videos Lecture18A ] [Slides Lecture18A ]

  • JavaScript tip: all about subclasses [1:41]
  • Lighting review (local vs. global / diffuse vs. specular / where do we put colors? / & more) [6:32]

[Pre-recorded] Lecture 18B: Texture Basics
[Videos Lecture18B ] [Slides Lecture18B ]

  • Intro to textures: how to get more than 3 colors on a triangle? [00:05]
  • Steps of texture mapping (most commonly use UV coordinates) [02:57]
  • Texture mapping demo [08:44]
  • UV coordinates & texture wrapping (clamping, mirroring, repeating) [10:23]
  • Texture use/re-use & beyond basic textures [16:31]

[Pre-recorded] Lecture 18C: Texture Mapping in THREE.js
[Videos Lecture18C ] [Slides Lecture18C ]

  • Basic texture mapping in THREE.js [01:17]
  • Basic texture mapping in THREE.js [01:17]
  • Using UV coordinates for geometry [03:32]
  • How textures work in THREE.js [06:36]
  • Some caveats for textures in THREE.js (lighting, material, Y direction) [11:31]

[Pre-recorded] Lecture 18D: How Texture Mapping Works
[Videos Lecture18D ] [Slides Lecture18D ]

  • UV mapping with barycentric coordinates [00:13]
  • The problems that can happen with UV mapping [01:53]
  • Texture lookups: magnification (nearest-neighbor vs. bilinear interpolation) [03:40]
  • Texture lookups: minification & filtering (summed area tables vs. mipmaps) [08:50]
  • Summed area tables (key idea: pre-computation) [14:40]
  • Mipmaps & anisotropy (key idea: approximating value of pixel) [18:18]
  • Mipmaps summary [28:24]
  • Texture mapping summary [30:05]

[Pre-recorded] Lecture 18E: Texture Review
[Videos Lecture18E ] [Slides Lecture18E ]

  • Why & how to use basic textures? [00:17]
  • Getting & using UV values with THREE.js [5:14]
  • Putting all the steps together in THREE.js [10:13]
  • What does the hardware do for texture mapping? [11:45]
  • Filtering fast using mipmaps [14:00]

Week 10 (3/29 - 4/2)

[Tue 3/30] Lecture 19: Drawing in 3D
[Videos Lecture19 ] [Slides Lecture19 ]

  • Triangles: the primitive / Meshes: collection of triangles [03:38]
  • Meshes: efficient storage / where does data live (vertices, faces, meshes, or texture?) [08:50]
  • From vertices to triangles / shading: what color does triangle appear? [16:48]
  • Lighting: local vs. global / standard (phong) lighting model [18:19]
  • Exam practice: diffuse vs specular lighting [30:15]
  • Colors per triangle (1, 3, or lots more) [34:50]
  • Recap: texture coordinates & basic mapping process [39:01]
  • Filtering (mipmaps + trilinear interpolation) [45:39]
  • Exam practice: what UV values make a picture? [47:58]
  • Recap: The process of drawing in 3D [52:06]
  • Clipping vs. visibility vs. culling [55:24]
  • Visibility: the painter's algorithm [01:01:30]
  • Visibility: the Z-buffer algorithm [01:07:36]

[Thur 4/1] Lecture 20: Drawing Fast
[Videos Lecture20 ] [Slides Lecture20 ]

  • Recap: the painter's algorithm [05:30]
  • Recap: the Z-buffer algorithm [09:30]
  • Common drawing challenges: z-fighting, aliasing, overdraw efficiency, & semi-transparent objects [16:11]
  • Z-buffer summary [29:41]
  • The steps of the 3D graphics pipeline & intro to graphics hardware [33:17]
  • Parallelization / graphics hardware history & how the modern pipeline came to be [43:41]
  • Modern graphics pipeline overview [55:30]
  • A triangle's journey through the pipeline: application programs, graphics drivers, & command buffers [58:04]
  • A triangle's journey: buffering vertices, vertex processing, vertex shading [01:06:41]

Week 11 (4/5 - 4/9)

[Tue 4/6] Lecture 21: Graphics Pipeline & Shaders
[Videos Lecture21 ] [Slides Lecture21 ]

  • Why is shader programming hard? [02:50]
  • A triangle's journey through the pipeline: vertex cache, assembly, & triangle processing [05:19]
  • A triangle's journey: rasterization to turn triangles into pixels [07:19]
  • A triangle's journey: pixel processing & pixel tests (Z-buffer, color blending, & more) [11:26]
  • A triangle's journey: the frame buffer (put pixels on screen) [15:13]
  • Summary of a triangle's journey through the pipeline [16:51]
  • The idea of an 'object', constant state (uniform), per vertex information, & what can a graphics program specify? [20:44]
  • The vertex processing unit & fragment processing unit [25:34]
  • Intro to shaders, shading languages, & some history [32:51]
  • GLSL: the shading language for OpenGL [41:45]
  • GLSL example 1: basic vertex shader & fragment shader [47:04]
  • GLSL example 2: using varying variables [55:54]
  • Shaders: getting data from JavaScript & how to use shaders in THREE.js [01:05:19]

[Thur 4/8] Lecture 22: More Shaders
[Videos Lecture22 ] [Slides Lecture22 ]

  • Recap of the graphics pipeline [03:17]
  • Recap of vertex shaders & fragment shaders [07:39]
  • Moving data around in shaders (uniforms, attributes, & varying variables) & using shaders in programs [21:10]
  • Making your own shaders [30:37]
  • Shader uniforms [37:00]
  • Shader attributes [42:07]
  • Using shaders to implement lighting [44:56]
  • Overview of phong lighting & what a material is defined by [48:44]
  • How diffuse & ambient color are calculated [51:16]
  • The vertex shader & transformation of normals [53:52]
  • How does THREE.js calculate lighting? / directional light & point light / how to use THREE.js lights in shaders [57:39]
  • Using textures in shaders / filtering for textures [01:02:22]

Week 12 (4/12 - 4/16)

[Tue 4/13] Lecture 23: Even More Shaders
[Videos Lecture23 ] [Slides Lecture23 ]

  • Shader techniques & tricks (like using built-ins, not conditionals or expressions) with examples [00:02:23]
  • Overview of anti-aliasing in shaders [00:13:20]
  • Anti-aliasing: step, smoothstep, & fwidth [00:19:00]
  • Noise: how to create 'randomness' in shaders with examples
  • Perlin noise / how do you use noise in shaders? [00:40:23]
  • Displacement mapping: changing shape using vertex shaders [00:46:10]
  • Using 'fake' normals to fake lighting in shaders [00:55:53]
  • Toy example: wavy surface (it's not really wavy!) [01:04:07]
  • Normal mapping in shaders [01:08:40]
  • Bump mapping in shaders [01:11:17]

[Thur 4/15] Lecture 24: More Interactive Rendering Tricks
[Videos Lecture24 ] [Slides Lecture24 ]

  • Texture tricks: using procedural textures [00:01:50]
  • Overview of displacement, normal, & bump maps [00:06:27]
  • Using a skybox to be the background of a scene [00:18:46]
  • Environment mapping using sphere maps & cube maps [00:31:46]
  • Dynamic environment maps (for fancy lighting!) [00:43:49]
  • Example of making a woodgrain texture / layered textures [00:49:54]
  • Light maps (pre-computed lighting in a texture) & ambient occlusion shading [00:57:08]
  • Shadow maps (create the illusion of shadows) [01:01:40]

Week 13 (4/19 - 4/23)

[Tue 4/20] Lecture 25: Even More Interactive Rendering Tricks
[Videos Lecture25 ] [Slides Lecture25 ]

Week 14 (4/26 - 4/30)

[Tue 4/27] Lecture 26: Shape in 3D
[Videos Lecture26 ] [Slides Lecture26 ]

[Thur 4/28] Lecture 27: Rasterization & Aliasing
[Videos Lecture27 ] [Slides Lecture27 ]

  • Rasterization (figure out which pixel a primitive 'covers') [00:01:01]
  • Pixels are not a little square! They are point samples [00:05:04]
  • Triangles / point coverage / scanline & midpoint algorithms [00:07:13]
  • Barycentric coordinates & hardware rasterization [00:14:43]
  • Aliasing & anti-aliasing: overview [00:25:40]
  • Aliasing & anti-aliasing: texture sampling, lines, jaggies, crawlies [00:36:10]
  • Aliasing & Anti-aliasing: blur, partial fill, & triangles [00:50:03]
  • Aliasing & Anti-aliasing: super-resolution [00:59:06]
  • The End ... thanks!! [01:04:33]