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. With a few exceptions, notes are written by Luther Tychonievich and hosted directly on this website.

A recommended weekly schedule follows. Doing assignments a week before they show up in this schedule is generally feasible and recommended if time allows.

Week	Content	Assignments
Jan 13–20	Preliminaries
Jan 23–27	DDA	warmup 1
Jan 30–34	Depth and related concepts
Feb 06–10	Javascript	MP 1
Feb 13–17	WebGL2	warmup 2
Feb 20–24	3D Math
Feb 27–31	GL example and Lighting
Mar 06–10	Fractals	MP 2
	Spring Break
Mar 20–24	Animation and Code example
Mar 27–31	Textures	MP 3
Apr 03–07	Raytracing
Apr 10–14	Raytracing	MP 4
Apr 17–21	Better rasterization
Apr 24–28	Dynamics	4cr MP
May 01–03	Review and finish coding	MP 5

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 few days 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

Assignments you should be able to complete after this section: Setting up for submitting image-generating code

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

Assignments you should be able to complete after this section: MP1: Implementing a Rasterizer

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

Assignments you should be able to complete after this section: Setting up for submitting WebGL2

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

Assignments you should be able to complete after this section: MP2: Dancing logo

3.4 Multi-part coding example

Topic	Video	Notes
3D WebGL2 code	ClassTranscribe	1-the-code.html math.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
Computing surface normals	ClassTranscribe	2-normals.html math.js monkey.json
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

Assignments you should be able to complete after this section: MP3: Generating geometry

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.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 cylinder	ClassTranscribe	1-modeling-1.html math.js
A two-tube leg model	ClassTranscribe	2-modeling-2.html
Rigging bone locations	ClassTranscribe	3-anchors.html
Adding keyframes	ClassTranscribe	4-keyframes.html
Skeletal animation	ClassTranscribe	5-skeleton.html
Skinning	ClassTranscribe	6-skinning.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

Assignments you should be able to complete after this section: MP4: Textures and camera movement

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

Assignments you should be able to complete after this section: 4cr MP: Implementing a Raytracer

7 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

7.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

8 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

Assignments you should be able to complete after this section: MP5: Particle effects