This page provides a list of videos and notes with the intent that following them in the order presented here will result in a cohesive approach to the subject of interactive computer graphics.

In general, the intent is that for a given topic the video and notes will provide equivalent explanations of the material; however, that intent is not always completely achieved. The notes often have more formal definitions and more mentions of ancillary topics than the videos. The videos often have additional commentary and exposition than the nodes. When the video is using an interactive example or discussing or developing code samples, the notes often just have the example or code without commentary.

How things appear videos are included after each section but in generally have no direct correlation with the section itself, and are generally not tested by any of the course’s assessments. I include them because computer graphics is the process of trying to simulate how the world looks, so I assume you’ll be interested in understanding how the world looks. Feel free to message me with additional appearances you’d like me to describe, either general phenomena or specific images; there are more interesting visual phenomena than I have any hope of fully enumerating.

Videos are hosted on ClassTranscribe, a tool that allows variable-speed video playback, transcription search, and collaborative editing of subtitles and transcripts. Backup copies are available through Coursera. With a few exceptions, notes are written by Luther Tychonievich and hosted directly on this website.

A recommended weekly schedule follows. MPs are listed in the week where the relevant content has been presented; it is expected most students will start them then and complete them a week or two later; that delay is why there are not MPs listed for the last two weeks. Electives vary significantly in complexity and time required, as noted by their differing point values. You only need to do some electives, and if 3cr only some core. See the MPs page for more.

Week Content Core MPs Elective MPs
Aug 26–Sep 01 Preliminaries WebGL2 warmup
Sep 02–08 DDA AnyLang warmup
Sep 09–15 Depth and related concepts Rasterizer
Sep 16–22 Javascript Rasterizer electives
Sep 23–29 WebGL2 Psychedelic
Sep 30–Oct 06 3D Math Logo GPU jitter, CPU jitter
Oct 07–13 GL example and Lighting Orbits Lineograph
Oct 14–20 Fractals Terrain Cliffs, Weathering, Height map, Parametric
Oct 21–27 Animation and Code example Flight
Oct 28–Nov 03 Textures Textures Drive, Fog, OBJ, Subdivision
Nov 04–10 Raytracing Raytracer
Nov 11–17 Raytracing Raytracer electives
Nov 18–22 Dynamics Spheres Many Spheres, Goop
Fall Break
Dec 02–08 Better rasterization
Dec 09–11 Review and finish coding

Experience has taught me that getting behind on lecture material or MPs is usually a sign that additional instructor/student interaction is needed. If you are more than a week behind the schedule given here, please contact me.

1 Graphics Preliminaries

Topic Video Notes
Rasters and pixels ClassTranscribe Aliasing
Color in the eye ClassTranscribe Color
Color on the screen ClassTranscribe Color
Other color models ClassTranscribe Color
Dithering ClassTranscribe Dithering
What is interactive computer graphics? ClassTranscribe "Interactive" Graphics
The GPU graphics pipeline ClassTranscribe WebGL’s Graphics Pipeline
Q&A Where is white in LMS? ClassTranscribe
Q&A Why dither and gamma? ClassTranscribe

How things appear: The Student, the Fish, and Agassiz by The Student and Mirages and total internal reflection

2 Rasterization

2.1 DDA and related algorithms

Topic Video Notes
DDA ClassTranscribe DDA (and Bresenham)
Scanline ClassTranscribe DDA (and Bresenham)
Bresenham ClassTranscribe DDA (and Bresenham)
Interpolation ClassTranscribe DDA (and Bresenham)
Rendering curves ClassTranscribe Bézier curves
In-class Q&A ClassTranscribe

How things appear: Refraction

2.2 Emulating 3D with depth

Topic Video Notes
Perspective via w ClassTranscribe Projection
Frustum clipping ClassTranscribe Clipping
Hidden surface removal ClassTranscribe
Z buffer ClassTranscribe

How things appear: Fresnel effect

2.3 Related concepts

Topic Video Notes
Viewport ClassTranscribe Other parts of the rasterization process
Alpha blending ClassTranscribe Other parts of the rasterization process
Back-face culling ClassTranscribe Other parts of the rasterization process
Full-scene anti-aliasing ClassTranscribe Other parts of the rasterization process
What we covered on rasterization ClassTranscribe
In-class Q&A ClassTranscribe

How things appear: Diffraction rainbows

3 Using the GPU with WebGL2

3.1 Enough JavaScript to get by

Topic Video Notes
Running JavaScript ClassTranscribe Parts of JavaScript We’ll Use
JavaScript syntax and scoping ClassTranscribe Parts of JavaScript We’ll Use
JavaScript values and types ClassTranscribe Parts of JavaScript We’ll Use
JavaScript functions ClassTranscribe Parts of JavaScript We’ll Use
HTML ClassTranscribe Parts of JavaScript We’ll Use
In-class Q&A ClassTranscribe

How things appear: Dispersion rainbow

3.2 Starting with WebGL2 coding

Topic Video Notes
First WebGL2 file ClassTranscribe Minimal WebGL
Using multiple files ClassTranscribe ex02-fragment.glsl
ex02-split.html
ex02-vertex.glsl
ex02.js
Data paths on GPU ClassTranscribe WebGL Geometry
Loading a model ClassTranscribe ex03-fragment.glsl
ex03-geometry.json
ex03-model.html
ex03-vertex.glsl
ex03.js
Motion with uniforms ClassTranscribe ex04-fragment.glsl
ex04-geometry.json
ex04-motion.html
ex04-vertex.glsl
ex04.js
In-class Q&A ClassTranscribe

How things appear: Exposure noise

3.3 Mathematics of interactive 3D graphics

Topic Video Notes
Matrices and vectors ClassTranscribe Math Review
Rotation matrices ClassTranscribe Homogeneous Vectors and Transformations
Scaling matrices ClassTranscribe Homogeneous Vectors and Transformations
Sheering ClassTranscribe Homogeneous Vectors and Transformations
Homogeneous vectors, take 1: definition first ClassTranscribe Homogeneous Vectors and Transformations
Homogeneous vectors, take 2: objective first ClassTranscribe Homogeneous Vectors and Transformations
Visualizing 2D matrics ClassTranscribe matrixdemo.php
Visualizing order of matrics ClassTranscribe matrixdemo.php
Visualizing 3D matrices ClassTranscribe matrixdemo2.php
Standard matrix hierarchies ClassTranscribe
In-class Q&A ClassTranscribe

How things appear: Lens bloom

3.4 Multi-part coding example

Topic Video Notes
3D WebGL2 code ClassTranscribe 1-the-code.html
math.js
wrapWebGL2.js
Adding perspective ClassTranscribe 2-viewing.html
Coloring vertices and faces ClassTranscribe 3-color.html
Multi-object scene ClassTranscribe 4-several.html
Choosing motion ClassTranscribe 5-scripted.html
Random procedural geometry ClassTranscribe 6-makegeom.html
Designing procedural geometry ClassTranscribe 7-starburst.html

How things appear: Subsurface scattering

3.5 Lighting on the GPU

Topic Video Notes
Phong’s simple model of lighting ClassTranscribe Lighting models
In-class Q&A re Halfway vector ClassTranscribe
Loading a monkey ClassTranscribe 0-initial.html
1-monkey.html
math.js
monkey.json
Computing surface normals ClassTranscribe 2-normals.html
Adding diffuse light ClassTranscribe 3-lambert.html
Adding multiple light sources ClassTranscribe 4-two-lights.html
Adding specular light ClassTranscribe 5-blinn-phong.html
Physically-based lighting ClassTranscribe the-pbr-guide-part-1
In-class Q&A re PBR ClassTranscribe

How things appear: Rayleigh scattering

4 Creating and animating geometry

4.1 Fractals

Topic Video Notes
Fractional dimension ClassTranscribe Fractals
In-class Q&A fractal overview ClassTranscribe
fBm noise ClassTranscribe Fractals
Subdivision noise ClassTranscribe Fractals
Fractal terrain via random faulting ClassTranscribe Terrain via the faulting method
Perlin noise ClassTranscribe Fractals
Weathering and erosion of terrain ClassTranscribe Hydraulic Erosion
In-class Q&A re MP3 ClassTranscribe

How things appear: Shiny hair

4.2 Animation

Topic Video Notes
In-class Q&A on many topics ClassTranscribe
Key frames and tweening ClassTranscribe Keyframes, Bones, and Skinning
Interpolating with lerps and Bezier curves ClassTranscribe
Coding lerps of keyframes ClassTranscribe 3-lerp-code-1.html
3-lerp-code-2.html
math.js
Lerping rotation matrices doesn’t work ClassTranscribe 4-rotation-problems-1.html
4-rotation-problems-2.html
Quaternions ClassTranscribe Quaternions
Interpolating quaternions ClassTranscribe 6-quaternion-interpolation.html
In-class Q&A re Quaternions ClassTranscribe
Skeletal animation with skinning ClassTranscribe Keyframes, Bones, and Skinning

How things appear: Brushed metal

4.3 Multi-part coding example

Topic Video Notes
Generating a leg ClassTranscribe 1-modeling.html
math.js
Coloring a leg ClassTranscribe 2-colors.html
Joint locations ClassTranscribe 3-joints.html
Skeletal Animation ClassTranscribe 4-rig-1.html
4-rig-2.html
Skinning ClassTranscribe 5-skin.html

How things appear: Mirrors and one-way mirrors

4.4 Optional deep-dive content

Topic Video Notes
Stereoscopic 1 Concepts ClassTranscribe
Stereoscopic 2 Calibration ClassTranscribe stereoscopic.html
Stereoscopic 3 Implementation ClassTranscribe

5 Texture mapping

Topic Video Notes
In-class preview of texture content ClassTranscribe
Texture concepts ClassTranscribe Textures in WebGL
Texture code elements ClassTranscribe Textures in WebGL
Texture maps for all visual details ClassTranscribe Using Textures
Parallax texture mapping ClassTranscribe Using Textures
In-class Q&A on camera movement in the MP ClassTranscribe
In-class Q&A on textures beyond the MP ClassTranscribe
In-class Q&A on OBJ files in MP ClassTranscribe

How things appear: Retroreflectors

6 Raytracing

Topic Video Notes
In-class Q&A introducing raytracing ClassTranscribe
Why raytracing? ClassTranscribe
Ray-plane intersection ClassTranscribe Raytracing
Barycentric coordinates and ray-triangle intersection ClassTranscribe Raytracing
Raytracer design ClassTranscribe Raytracing
In-class Q&A raytracing code design ClassTranscribe
Bounding volume hierachies ClassTranscribe Bounding Volume Hierarchies
Raytracing as integration ClassTranscribe Integrating incident light
In-class Q&A importance sampling ClassTranscribe
Raytracing many bounces ClassTranscribe Integrating incident light
Raytracing acceleration ClassTranscribe
In-class Q&A raytracing on GPU ClassTranscribe
In-class Q&A raytracing in context ClassTranscribe

How things appear: Scale and depth of field and Peach fuzz

7 Simulating dynamics

Topic Video Notes
Simulation-generated motion ClassTranscribe Visual Simulation
Particle dynamics ClassTranscribe Euler, RK, and PBD
Resolving collisions of rigid spheres ClassTranscribe Euler, RK, and PBD
Rendering particles ClassTranscribe Particle Effects
Instability and the CFL conditions ClassTranscribe The CFL Conditions
Particle-based soft bodies and fluids ClassTranscribe Smoothed Particle Hydrodynamics
Divergence-free grid-based fluids ClassTranscribe Fluids on a Grid
Self-advecting grid-based fluids ClassTranscribe Fluids on a Grid
In-class Q&A on fluids ClassTranscribe
In-class Q&A on graphics publication ClassTranscribe

How things appear: Optical illusions from relative color perception

8 Faster and prettier rasterization

Topic Video Notes
In-class Q&A on MP5 ClassTranscribe
In-class Q&A on shadows, deferred shading ClassTranscribe
Shadow maps and shadow acne ClassTranscribe Shadow maps
Visibility and occlusion culling ClassTranscribe
Deferred shading ClassTranscribe Deferred Shading
Inverse Kinematics ClassTranscribe IK_survey.pdf
In-class Q&A on rasterized global illumination ClassTranscribe

How things appear: Sunbeams

8.1 Optional deep-dive content

Topic Video Notes
In-class Q&A setting up Nanite ClassTranscribe
Nanite 1 Highly Detailed Scenes ClassTranscribe Streaming, Level of Detail, and Occlusion
Nanite 2 LOD ClassTranscribe Streaming, Level of Detail, and Occlusion
Nanite 3 Occlusion ClassTranscribe Streaming, Level of Detail, and Occlusion
Nanite 4 Streaming ClassTranscribe Streaming, Level of Detail, and Occlusion
Nanite 5 Other ClassTranscribe Streaming, Level of Detail, and Occlusion