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.
| 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 interactivecomputer 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
| 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
| Topic | Video | Notes |
|---|---|---|
| Perspective via w | ClassTranscribe | Projection |
| Frustum clipping | ClassTranscribe | Clipping |
| Hidden surface removal | ClassTranscribe | |
| Z buffer | ClassTranscribe |
How things appear: Fresnel effect
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| Topic | Video | Notes |
|---|---|---|
| Stereoscopic 1 Concepts | ClassTranscribe | |
| Stereoscopic 2 Calibration | ClassTranscribe | stereoscopic.html |
| Stereoscopic 3 Implementation | ClassTranscribe |
| 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
| 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
| 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
| 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
| 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 |