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.
| 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
Assignments you should be able to complete after this section: Setting up for submitting image-generating code
| 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
Assignments you should be able to complete after this section: MP1: Implementing a Rasterizer
| 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
| 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
Assignments you should be able to complete after this section: MP2: Dancing logo
| 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
| 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
| 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
| 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
| 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
| 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
Assignments you should be able to complete after this section: MP4: Textures and camera movement
| 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
| 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 |
| 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