Content Outline

Overview

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 in two places, in part so that if one site is down the other can be used:

With a few exceptions, notes are written by Luther Tychonievich and hosted directly on this website, which is also hosted in two places:

1 Graphics Preliminaries

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

How things appear: Mirages and total internal reflection CT MS

2 Rasterization

2.1 DDA and related algorithms

Topic Video Notes
DDA CT MS DDA (and Bresenham)
Scanline CT MS DDA (and Bresenham)
Bresenham CT MS DDA (and Bresenham)
Interpolation CT MS DDA (and Bresenham)
Rendering curves CT MS Bézier curves

How things appear: Refraction CT MS

2.2 Emulating 3D with depth

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

How things appear: Fresnel effect CT MS

2.3 Related concepts

Topic Video Notes
Viewport CT MS Other parts of the rasterization process
Alpha blending CT MS Other parts of the rasterization process
Back-face culling CT MS Other parts of the rasterization process
Full-scene anti-aliasing CT MS Other parts of the rasterization process
What we covered on rasterization CT MS

How things appear: Diffraction rainbows CT MS

3 Using the GPU with WebGL2

3.1 Enough JavaScript to get by

Topic Video Notes
Running JavaScript CT MS Parts of JavaScript We’ll Use
JavaScript syntax and scoping CT MS Parts of JavaScript We’ll Use
JavaScript values and types CT MS Parts of JavaScript We’ll Use
JavaScript functions CT MS Parts of JavaScript We’ll Use
HTML CT MS Parts of JavaScript We’ll Use
Q&A on promises, fetch, and CORS CT

How things appear: Dispersion rainbow CT MS

3.2 Starting with WebGL2 coding

How things appear: Exposure noise CT MS

3.3 Mathematics of interactive 3D graphics

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

How things appear: Lens bloom CT MS

3.4 Multi-part coding example

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

How things appear: Subsurface scattering CT MS

3.5 Lighting on the GPU

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

How things appear: Rayleigh scattering CT MS

4 Creating and animating geometry

4.1 Fractals

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

How things appear: Shiny hair CT MS

4.2 Animation

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

How things appear: Brushed metal CT MS

4.3 Multi-part coding example

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

How things appear: Mirrors and one-way mirrors CT MS

4.4 Optional deep-dive content

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

5 Texture mapping

Topic Video Notes
Texture concepts CT MS Textures in WebGL
Texture code elements CT MS Textures in WebGL
Texture maps for all visual details CT MS Using Textures
Parallax texture mapping CT MS Using Textures

How things appear: Retroreflectors CT MS

6 Raytracing

6.1 Basic Raytracing

Topic Video Notes
Q&A introducing raytracing CT
Why raytracing? CT MS
Ray-plane intersection CT MS Raytracing
Barycentric coordinates and ray-triangle intersection CT MS Raytracing
Raytracer design CT MS Raytracing
Q&A on raytracing code design CT

How things appear: Scale and depth of field CT MS

6.2 Intermediate Raytracing

Topic Video Notes
Bounding volume hierachies CT MS Bounding Volume Hierarchies
Raytracing as integration CT MS Integrating incident light
Q&A on importance sampling CT
Raytracing many bounces CT MS Integrating incident light
Raytracing acceleration CT MS
Q&A on raytracing on GPU CT
Q&A on raytracing in context CT

How things appear: Peach fuzz CT MS

7 Simulating dynamics

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

How things appear: Optical illusions from relative color perception CT MS

8 Faster and prettier rasterization

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

How things appear: Sunbeams CT MS

8.1 Optional deep-dive content

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