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 21–27	Preliminaries	WebGL2 warmup
Aug 28–Sep 03	DDA	AnyLang warmup
Sep 05–10	Depth and related concepts	Rasterizer
Sep 11–17	Javascript		Rasterizer electives
Sep 18–24	WebGL2		Psychedelic
Sep 25–Oct 01	3D Math	Logo	GPU jitter, CPU jitter
Oct 02–08	GL example and Lighting	Orbits	Lineograph
Oct 09–15	Fractals	Terrain	Cliffs, Weathering, Height map, Parametric, Subdivision
Oct 16–22	Animation and Code example	Flight
Oct 23–29	Textures	Textures	Drive, Fog, OBJ
Oct 30–Nov 05	Raytracing	Raytracer
Nov 06–12	Raytracing		Raytracer electives
Nov 13–17	Dynamics	Spheres	Many Spheres, Goop
	Fall Break
Nov 27–Dec 03	Better rasterization
Dec 03–06	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