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:
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 | Quiz |
---|---|---|---|---|
Aug 25–31 | Preliminaries | WebGL2 warmup | Q01 | |
Sep 01–07 | DDA | AnyLang warmup | Q02 | |
Sep 08–14 | Depth and related concepts | Rasterizer | Q03 | |
Sep 15–21 | Javascript | Rasterizer electives | Q04 | |
Sep 22–28 | WebGL2 | Psychedelic | Q05 | |
Sep 29–Oct 05 | 3D Math | Logo | GPU jitter, CPU jitter | Q06 |
Oct 06–12 | GL example and Lighting | Orbits | Lineograph | Q07 |
Oct 13–19 | Fractals | Terrain | Cliffs, Weathering, Height map, Parametric | Q08 |
Oct 20–26 | Animation and Code example | Flight | Q09 | |
Oct 27–Nov 02 | Textures | Textures | Drive, Fog, OBJ, Subdivision | Q10 |
Nov 03–09 | Basic Raytracing | Raytracer | Q11 | |
Nov 10–16 | Intermediate Raytracing | Raytracer electives | Q12 | |
Nov 17–21 | Dynamics | Spheres | Many Spheres, Goop | Q13 |
Fall Break | ||||
Dec 01–07 | Better rasterization | Q14 | ||
Dec 08–10 | Review and finish coding |
Experience has taught me that getting behind on lecture material, MPs, or quizzes 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 | 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 interactivecomputer 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
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 |
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 |
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 |
Topic | Video | Notes |
---|---|---|
First WebGL2 file | CT MS | Minimal WebGL |
Using multiple files | CT MS | ex02-fragment.glsl ex02-split.html ex02-vertex.glsl ex02.js |
Data paths on GPU | CT MS | WebGL Geometry |
Loading a model | CT MS | ex03-fragment.glsl ex03-geometry.json ex03-model.html ex03-vertex.glsl ex03.js |
Motion with uniforms | CT MS | ex04-fragment.glsl ex04-geometry.json ex04-motion.html ex04-vertex.glsl ex04.js |
Q&A on shaders and uniforms | CT |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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
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
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 |