This page does not represent the most current semester of this course; it is present merely as an archive.

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