cs291 ยป

Interactive 3D Graphics Course Syllabus

Here is a listing and links to all lessons in CS 291, Interactive 3D Graphics.

Demos are italicized, quizzes are bold, and exercises are both.

If you know about 3D graphics already and just want to learn about three.js, go to the lessons marked three.js. All exercises let you practice programming using three.js; those marked three.js provide three.js instruction in their introductions. You may also find the three.js reference sheet useful for this course.

Lesson 1: Introduction

Motivation and a trip down the graphics pipeline, laying out the fundamental processes

Interactive 3D Rendering - what's "interactive", "3D", and "rendering" mean?
First Quiz (quiz)
WebGL Setup - three.js - what WebGL is, and setting up your computer to run it
Core Ideas - refresh rate, the eye, light, and the pipeline
Interactivity and FPS - 6 frames per second is a (somewhat arbitrary) minimum for interactivity
FPS Demo - set the frame rate yourself and see how it feels
FPS and Refresh Rate - 30 and 60 FPS, frame rate vs. refresh rate
Math Refresher (quiz) - 50 Hertz gives what frame rate?
CPU Cycles - how much computation happens in a single frame
The Eye - basics of the eye's structure
The Pinhole Camera - a simplified camera and how it works
Seeing is Believing (quiz) - checkerboard brightness
Eye versus Camera (quiz) - how does our visual system differ from a basic camera?
View Frustum - how we think of viewing the world for interactive 3D graphics
Screen Door - each pixel on the screen can be thought of as a tiny window in a screen door
3D Scene - a scene has object, lights, and a camera
How Many Pixels (quiz) - how many pixels do we need to generate per second?
Light and Rendering - how light travels through the world
How Many Computers (quiz) - how many would you need to track all the photons in a simple scene in real time?
Reversing the Process - simplify lighting by looking from the eye
History of the Teapot (teacup) (teaspoon) (teapot) - all about Newell's famous Utah Teapot
Simple Materials (quiz) - what materials can be displayed by using simple "rays from the eye" rendering?
A Jog Down the Pipeline - the basics of how the GPU works
Pipeline Parallelism - box factory assembly line
Advanced Box Factory (quiz) - what happens if we add more stages to the pipeline?
Parallelism - we can also add more assembly lines
Bottleneck (quiz) - there's always at least one stage that's the slowest; how does it affect things?
Stalling and Starving - how the bottleneck affects the other stages
Painter's Algorithm - the simplest way to render in 3D, paint one object atop another
Flawed Painting (quiz) - however, the Painter's Algorithm has a problem
Z-Buffer - keeping track of the depth at each pixel solves this problem
How Z-Buffer Works - how the Z-buffer works at a single pixel
Z-Buffer Optimization (quiz) - how can we use the Z-buffer most effectively?
WebGL and three.js - three.js - API, OpenGL, OpenGL ES, and DirectX defined
Tricky Question - different rendering modes
Demo: Rendering Mode #0
Demo: Rendering Mode 1
Demo: Rendering Mode 2
Different Rendering Options (quiz) - how do the different rendering demos work?

Lesson 1 Problem Set

Frame Skipping (quiz) - what happens if you can't create a frame quickly enough?
What is Not Paintable (quiz) - which image is not easily created with the Painter's Algorithm?
FPS vs. MIlliseconds (quiz) - why averaging frames per second is a bad idea
Rendering Costs (quiz) - order the renderings by the difficulty of computing each one
Firefly (quiz) - what happens if you view the scene from the light's location?
Light Field Dimensions (quiz) - radiance and the light field, and how many dimensions it has
First Programming Exercise (exercise) - three.js - getting used to the programming interface

Interview: 3D Modelling and Printing

Making Virtual Things Real - introduction
Jesse Harrington Au at Autodesk - Jesse's background
How 3D Printing Works - how 3D printing works
Any shape can be made - many constraints have been removed
Complexity is Free - it is!
3D Printing Materials - including multiple materials
Design Process - exporting and printing prototypes, and some free programs for this process
Problems and Future of 3D Printing - rapid prototyping and the future

Lesson 2: Points, Vectors, and Meshes

The basics of 3D geometry definition

Coordinate System - points and vectors
Cartesian Coordinates - our standard 3D coordinate system
Point or Vector (quiz)
Left Handed vs. Right Handed - the two types of coordinate systems
Right or Left (quiz) - what is longitude/latitude/altitude?
The Sun Also Rises (quiz) - what handedness is Minecraft's coordinate system?
Which Way Is Up - Y or Z?
Interview: Which Way is Up - YMMV
Coordinate System Transform (quiz) - how to convert from one system to another?
Points and Lines - how these are defined
Triangles - defined by three points
Creating Geometry in three.js - three.js - how to draw a square
Creating a Square (exercise) - three.js - your turn
Triangulation and Tessellation - splitting a polygon or surface into simpler primitives, and why that's good
Minimum Triangulation (quiz) - what's the minimum number of triangles needed?
How Many Triangulations (quiz) - adding no vertices and creating edges only inside the figure limits the possibilities
Vertex Ordering and Culling - back and front face culling, and loop direction
Return of the Square (exercise) - three.js - fix the data representation to make the square reappear
Model Creation - ways to create meshes

Lesson 2 Problem Set

Polygon Creator (exercise) - write a general function to make a regular polygon of any number of sides
Polygon Location (exercise) - now change the polygon's location
Polygon Radius (exercise) - now change its size
Build a Stairway (exercise) - three.js - use procedural modeling to build a model
The Drinking Bird (exercise) - three.js - how to control various basic primitives
Z-Fighting (quiz) - what happens when two polygons are in the same location

Interview: Modeling in the Real World

Sam Black - Background - some industries that use computer graphics
What is AutoCAD - what this system is about
Types of Work - how does games programming and CAD programming differ?
Variety - customers want all sorts of different things
Styles of Material - different ways of rendering
Minimum Requirements - testing, certification, and frame rate
Endless Polygons - techniques for simplification of complex scenes

Lesson 3: Colors and Materials

Color representation, material computations, transparency

Overview of the Lesson
The Programmable Pipeline - how an image is formed by a GPU: vertex shader, fragment shader
RGB Color Definition - channels, floating point or integers
Color Definition - subtractive vs. additive
RGB Color demo - mix additive colors to see the effect
Setting the Color - three.js - many ways to set the color in three.js
What Color is Magenta? (quiz)
What Color is Chartreuse? (quiz) - I got it wrong myself
The Color Cube - ways to visualize the RGB color space
Vertex Attributes (exercise) - three.js - how put add a color to each vertex
Color Interpolation - how colors are spread from each vertex to across the triangle
The Color Gamut - CIE XYZ, Mach bands, and displayable colors in a gamut
A Simple Lighting Model - emissive, ambient, diffuse, and specular
Kiss of Death - a simple shading equation
Light on a Diffuse Sphere - why the eye location doesn't matter for this component
Normalizing a Vector - making a vector 1 unit long
Vector Length (quiz)- how long is this vector?
The Dot Product - how to compute it
The Dot Product in Detail - build up some intuition of the dot product by looking at a circle and vector projection
Diffuse Material (exercise) - three.js - setting the material and diffuse & ambient colors
Shading Normal - making a shading normal at each vertex
Enable Smooth Shading (exercise) - three.js - how to turn on smooth shading in three.js
Ka, Kd, and HSL - three.js - ambient and diffuse control, and the HSL color space
Demo: Lambert - play with ambient, diffuse, and HSL
Baking (quiz) - compute shade once and store at the vertex
Specular Material - computing a shiny color and how shininess works
Material Demo - control the specular component
Gouraud Shading - Mach banding due to Gouraud shading
Phong Shading - shading normal interpolation across the triangle
Material Calculations (quiz) - per vertex vs. per pixel computation costs
Introduction to Transparency - basic transparency, caustics, and jellyfish
Blending - algorithms for transparency: screen door
The Over Operator - blending one color atop another
Simple Transparency Demo - vary alpha to see the effect of blending
The Over Operator Quiz (quiz) - your turn to compute how the over operator works
The Over Operator Demo - vary the source and destination colors and alpha to see the effect of blending using these
The Z Buffer and Transparency - problems with the z-buffer and transparency
Solving Transparent Z Buffering (quiz) - how to solve the transparency problem?
Solving Transparent Z Buffering part II (quiz) - how to solve another transparency problem?
Transparency and three js - three.js - how to enable and set transparency
Another transparency demo - shows the problem of z-buffer drawing and transparency
What Went Wrong (quiz)
Advanced Transparency Methods - more transparency problems and solutions
Future of Transparency - transparency is not yet efficiently solved for the GPU

Lesson 3 Problem Set

RGB Representation (quiz) - conversion from one three.js color representation to another
Shiny Bird (exercise) - three.js - setting the specular component
Building a Better Bird (quiz) - what geometry has changed in the bird, and why
Drinking Bird Transparency (exercise) - three.js - setting transparency
Paper Lantern Shading (quiz) - how to differentiate inside vs. outside surfaces
Glass Cube (quiz) - what happens with a glass cube on a table?
Shading and Illumination Costs (quiz) - what are the relative speeds of various shading and interpolation methods?

Lesson 4: Transforms

Translation, scale, rotate and how to properly combine all these

Overview - what's a transform, and what's linear algebra?
Point and Vector Operations - basics of point and vector math
Coordinate Values - frames of reference, and what coordinates are
Point and Vector Sum (quiz) - find the coordinates of a point modified by two vectors
Vector Operation (quiz) - three.js - what function do we call to make a vector be a length of one?
Translation - three.js - how to move an object to a new location
Rotation - three.js - how to rotate an object around an axis
Rotate a Block (exercise) - three.js - rotate a clock hand around the dial
Name That Object (quiz) - what's the surface of revolution for a rotating hand?
Euler Angles - three.js - how the three axes of rotation can be used together
Demo: Euler Angles - try it yourself, in this enhanced demo
Rigid Body Transforms vs. Scaling - three.js - uniform and non-uniform scaling
Scale a Sphere (exercise) - use non-uniform scaling to change a sphere's shape
Scale Rotate Translate - three.js - the order of operations matters
Rotate, then Scale - what happens if the order is reversed
Build a Snowman (exercise) - rotation and translation
Rotate, then Translate - what happens if we reverse the order?
Object3D - three.js - how to string transforms together in any order
Two Clock Hands (exercise) - use Object3D to properly position clock hands
Hierarchy of Objects - how we often make linkages between objects, and ways to think about transforms
Instancing (quiz) - three.js - how to reuse a single model multiple times
Robot Arm - three.js - how to create a hierarchy of objects
Demo: Robot Arm - see how the hierarchy controls the model's behavior

Lesson 4 Problem Set

Extended Robot Arm (exercise) - adding another part to the arm
Robot Hand (exercise) - a hand for the robot
Series of Transforms (quiz) - when does order of transformation not matter?
Scale versus Translate (quiz) - how does the order of scaling and translation affect things?
Make a Flower (exercise) - apply a series of transforms to create petals
Improved Petals (exercise) - apply a few more transforms for more realism

Lesson 5: Matrices

Transform representation and how to fully control these

Matrix Math - three.js - The 4x4 matrix and how matrix/coordinate computation works. Also, you should learn about the debugger!
Matrix Vector Multiplication (quiz) - practice: multiply a vector by a matrix
Point and Vector Coordinates - frame of reference
The Fourth Coordinate - what the fourth coordinate means: point uses 1, vector uses 0
Identity Matrix - three.js - the "do nothing" matrix
Translation Matrix - how to translate a point by a matrix; also, column-major vs. row-major forms
Make a Translation Matrix (quiz) - how do you make a series of translations into a single matrix?
Using a Matrix - three.js - how to set a translation matrix in three.js
Rotation Matrix - rotation and why the rotation matrix works
Dot Product - (repeated - oops) the full meaning of dot product, and what a basis is
Axis of Rotation (quiz) - three.js - using axis/angle rotation, and which axis should we rotate around?
Angle of Rotation - three.js - how to compute the rotation angle around an axis
Cross Product - three.js - how to compute the rotation axis, and how the cross product is computed
Make an Ornament or Caltrop (exercise) - three.js - use axis/angle to make an object
Rotation Times Rotation - how matrices multiply together
World Matrix - how we can chain together a hierarchy's transforms
Series of Operations (quiz) - what do a series of translations form? a series of scales?
Frames - frame of reference, and two ways to look at a series of transforms
Scale Matrix and Normal - how normals can't simply be multiplied by non-uniform scaling matrices
Transpose and Inverse - three.js - what these two operations do
Correct Normal Transformation - using transpose and inverse to properly transform normals
Mirroring - the reflection matrix's uses and problems with it; the determinant
Mirror Normal Transformation (quiz) - how does a mirror matrix affect normals?
Matrix Zones - three.js - decomposing a matrix, quaternions, linear and affine transforms, and how these relate to the matrix itself
Summary of the Lesson - summary of transform usage

Lesson 5 Problem Set

Transpose of a Translation (quiz) - what do you get?
Matrix Spotting (quiz) - what are these matrices?
Cylinder Positioning (exercise) - procedural modeling; using a cone's endpoints to position it
Capsule (exercise) - adding spheres to the ends, using instancing
Helices (exercise) - connect capsules along curves
Revisiting the Drinking Bird (exercise) - adding eyes, nose, and crossbar using transforms
Where to Rotate (quiz) - how do we rotate around some location not at the origin?

Lesson 6: Lights

Directional and point light sources

Lights - objects, lights, and cameras
Photons as Particles - emitters, reflection, absorption
Directional Lights - how to simulate a distant light
Directional Light in three.js - three.js - setting a distant light in three.js
Set a Directional Light (exercise) - add a light to the scene
A Point Light - physical and non-physical point lights
Ambient Lighting - three.js - adding some solid fill lighting to a scene
Head Light (exercise) - three.js - add a light at the eye's location
Spot Light - how to control a spotlight
Spot Light in three.js (exercise) - three.js - adding a spotlight to a scene
Deferred Rendering - a method to render many small point light sources
Shadow Mapping - making shadows by rendering the scene from the light's viewpoint
Shadow Buffer Characteristics (quiz) - what is a shadow buffer most like?
Shadows in three.js (exercise) - three.js - how to turn on shadows for a spotlight
Shadow Buffer Limitations - problems with shadow buffers
Ray Tracing - reflections, refractions, and shadows with one simple rendering method
Ray Tracing History and Future - ray tracing's simplicity and power
What's Missing (quiz) - what does classical ray tracing ignore?
Path Tracing - shooting more rays for better results, and progressive rendering
Umbra and Penumbra - how soft shadows form
Glimpse of Higher End Techniques
David Larsson Introduction
Shadow Summary - soft shadows
Indirect Lighting - indirect illumination
Which are Global? (quiz) - when are global illumination techniques needed?
Hemisphere Lights - three.js - a more elaborate ambient term
Skylighting - how light from the sky can affect the scene
Fog - types of fog
Demo: three.js Fog - fog controls in three.js

Lesson 6 Problem Set

Omni Light (quiz) - what type of light is an "omni light"?
Swivel Light Control (exercise) - swivel the light around the drinking bird
Swivel and Tilt Light Control (exercise) - now add a tilt control for the light
Light Characteristics (quiz) - what attributes do lights have in three.js?
The Disappearing Spotlight (quiz) - if we switch the ground plane to LambertMaterial, why does it go dark?

Lesson 7: Cameras

How the camera is defined

Introduction to Cameras - some projections: fisheye, perspective, orthographic
Orthographic Camera - lines stay parallel
Demo: Orthographic Projection - distance doesn't make objects smaller
Three.js Orthographic Camera - three.js - how to define the camera's view volume
LookAt - one way to position a camera
three.js Lookat (exercise) - three.js - changing the camera's direction by setting the target
View Transform - transform the world to the camera's frame of reference
Normalized Device Coordinates - three.js - how the view volume transforms to NDC values
Orthographic Matrix Type (quiz) - what transforms does this camera perform?
Perspective Camera - how size on the screen is related to distance
Three.js Perspective Camera - three.js - how a perspective camera is set
FOV Slider (quiz) - hook up UI to change the field of view
Perspective Matrix - what the matrix looks like and what it does
Perspective Coordinate Transform (quiz) - transform some points by a perspective matrix
Homogeneous Coordinate - what we do with the points produced to get locations in the view volume
Clipping - how edges are trimmed to fit inside the view volume
Field of View - how field of view and distance
Demo: Dolly and Zoom - with the middle mouse button zoom in while dollying out
True Field of View - why images sometimes look distorted
Monitor Field of View (quiz)
Target - three.js - how setting the target will keep it in view
Dolly, Pan, Orbit - how dolly and zoom are different, and what panning and orbiting are
Camera Changes (quiz) - does the target or position change for these camera moves?
Near and Far Clipping - z-fighting, non-linear interpolation, and moving the near and far planes
Depth of Field - giving a blur to out-of-focus objects
Window Coordinates - end of the pipeline, and pixel coordinates
Demo: View Transform Pipeline - see all the major transforms in action and how they change; larger version here
Antialiasing - three.js - jaggies and ways to avoid them

Lesson 7 Problem Set

Near Plane of Zero (quiz) - what happens if we set "near" to 0?
Graphics Pipeline Coordinates (quiz) - what is the pipeline order?
Four Viewports (exercise) - three.js - setting up four viewports
Rear View Camera (exercise) - have the rear-view camera look backwards
Division by Zero (quiz) - what does a W coordinate of 0 mean?
Camera Matrices Matching (quiz) - what types are these matrices?

Lesson 8: Textures and Reflections

Color and opacity textures, along with reflection and normal mapping

How Texturing Works - three.js - texturing changes the material based on location
Texture UVs - how we describe locations on a surface
UVs in three.js - three.js - implicit and explicit UVs for surfaces
Make a Textured Square (exercise) - start with a textured triangle and make a textured square.
Texture Mapping - how pieces of an image are attached to a model
Texel Coordinates (quiz) - converting from UV values to image texel coordinates.
Texel Coordinates Explained - why we drop the fraction when converting
Modifying UV Coordinates - how changing the U and V values affect the mapping
Demo: UV Coordinates - modify the upper and right edges' UVs and see the effect
Texture Distortion - what happens when the two upper corners are changed separately
Demo: Texture Distortion - modify the upper corners' UVs and positions and see the effect
What Causes Texture Discontinuities? (quiz) - why is there a diagonal crease?
Wrap Modes - three.js - we can control what happens when UV values are outside the range 0.0 to 1.0
Demo: Wrap Mode - try different wrap modes to see the effect
Texture Transform - three.js - another way to modify the UV values used for texturing.
Texture Magnification - three.js - nearest neighbor and bilinear interpolation filtering.
Demo: Texture Magnification - bilinear filtering can smooth jaggies, if the texture is a good size.
Smooth to Sharp - what is happening in the demo
Why Smooth to Sharp? (quiz) - why does the checkerboard suddenly become sharp when you zoom in?
Minification - many texels inside a single pixel causes noise
Demo: Texture Minification - bilinear interpolation alone doesn't help get rid of noise on the horizon
Mipmapping - the solution is to have the GPU help maintain the texel to pixel ratio to be around one
Demo: Mipmapping - mipmapping gets rid of noise
Mipmap Size Increase (quiz) - how much total space is taken up by a mipmap version of a texture?
Anisotropy - take more samples along the denser axis to get a better result
Sampling and Filtering - three.js - how to set sampling and filtering options, and the importance of sampling and filtering in general
Demo: Anisotropy - mipmapping and anisotropy together
Transparency Mapping - using the alpha channel of a texture to create cutout objects
The Meaning of Alpha - alpha can be though of as opacity, coverage, or both
Premultiplied Alpha - premultiplying can save on blending computations
Valid Unmultiplying (quiz) - given these premultiplied RGBA values, which could come from unmultiplied RGBA values?
Particles and Billboards - use cutouts and make them always face forward to create various effects
Making Particles - three.js - how to create particles in three.js
Demo: Particles - a simple set of particles
Particle Grid (exercise) - put particles at grid points in a volume of space
Displacement and Normal Mapping - change a surface's perceived shape by using displacement and normal mapping
Where Does Displacement Happen? (quiz) - which part of the pipeline changes the surface's locations?
Light Mapping - add an additional texture that captures the illumination to each surface
Ambient Occlusion - some algorithms used to compute light maps or similar methods
Time to Explore - be free and fly!
Skybox - a skybox is a distant textured object surrounding a scene
Reflection Mapping - using a skybox-like texture can give us a reflective surface
Reflection Equation (quiz) - derive the reflection equation yourself
Refraction Mapping - Snell's/Sahl's/Descartes' Law; you can fake refractions by similar means as reflection mapping
Glossy Reflection - blurring the reflection map can approximate less shiny reflections
Diffuse Environment Mapping - sum up the contribution for any hemisphere to get the environment's lighting for a given direction
Diffuse Mapping Example - better lighting in shadows, and high dynamic range image maps
On the Fly Cube Maps - cube maps can be generated every frame
Conclusion - multitexturing, reflection textures, video textures, etc. 

Lesson 8 Problem Set

Pick a Letter (exercise) - choose a letter out of a texture
Y Flipped Texture Coordinates (quiz) - three.js - what are the Y-flipped texel values?
Grassy Plain (exercise) - add a grass texture to the ground plane/plain
Drinking Bird Tail (exercise) - make the tail semi-transparent
Specular Mapping (exercise) - give the teapot a shininess varied by a texture
Bump Map Filtering (quiz) - given two ridges on a bump map, what happens when they're averaged?
Reflection Mapping (exercise) - add a reflection map to a shiny teapot

Lesson 9: Shader Programming

An introduction to programming vertex and pixel shaders

Overview - materials can be simulated by shaders
Programmable Shaders - vertex and fragment shaders are programmable
Compute Chip Design Challenges - fixed-function and programmable elements
Vertex and Fragment Shaders - inputs and outputs for the two types of shaders
Fragment Shader Bottleneck (quiz) - what ideas are worth pursuing to improve a GPU's performance?
Shader Architecture - Blinn-Phong used to be burnt into fixed-function hardware
Shader Inputs - three.js - the specific inputs and outputs for vertex and fragment shaders
Legal Inputs and Outputs (quiz) - which statements are true?
GLSL ES - three.js - how to feed shaders to three.js
Vertex Shader Example - three.js - how to specify inputs and outputs and perform computations
Fragment Shader Example - three.js - inputs and outputs and vector math in fragment shaders
Cartoon Shading - how a two-tone shader works
Two Tone Shading (exercise) - make a two-tone cartoon shader
Non-Photorealistic Rendering - NPR shading is to rendering as fonts are to text
NPR per Material (quiz) - what causes the most problems with our cel shader?
Vertex Shader Programming - three.js - more detail on how to use the vertex shader's matrices
Procedural Textures - textures as procedures instead of images
3D Procedural Texturing (exercise) - make a procedural texture function and use it
Debugging Shaders (exercise) - one way to examine intermediate results
Fresnel Reflectance - surfaces become shinier at grazing angles, and microfacet theory
Demo: Fresnel - try toggling Fresnel on and off and see how shininess varies at different angles
Energy Balanced Materials - surface models that act more like physics are easier to control and feel more realistic
Demo: Energy Balanced Blinn-Phong - try an energy-balanced material approximation
Physically Based Materials - how energy conservation and tone mapping are used to create more photoreal results
BRDF - the material's bi-directional reflectance distribution function and what it means
Anisotropic Material (exercise) - make an isotropic shader into an anisotropic one
BSDF and BSSRDF - more complex distribution functions for materials, how the physics work, and why it's worth it
Monitor Response and Perception - monitors obey a power law and the problems this causes
Gamma Correction - three.js - compute in a linear space, then gamma correct to display on your monitor
Demo: Gamma Correction Demo - without gamma correction, two lights add to be brighter than expected
Texturing and Postprocessing - three.js - taking in an image and modifying it using a fragment shader
Gamma Banding (quiz) - write a program to figure out how many levels will be output when the input is only 8 bits
Conclusion - GPUs and NPUs
Interview: Biggest Surprise - what's surprising about the field of graphics to some professionals

Lesson 9 Program Set

Vertex or Fragment Shader? (quiz) - which could you use for each task?
Make a Moving Flashlight (exercise) - make the flashlight move around
Model Deformation (exercise) - deform a surface using a vertex shader
What Went Wrong? (quiz) - why does the illumination not very good?
Vertex Normal Creation (exercise) - use the vertex shader to output a normal
Sharp Specular (exercise) - make a highlight appear sharp
Wrap Lighting (exercise) - make the light wrap around the surface a bit

Lesson 10: Interaction and Animation

How to select and make objects move

Events - three.js - keyboard, mouse, and touch events
Demo: Picking - pick on a box and place a dot
Picking - three.js - how picking is done in three.js
Dragging - ways to respond to dragging moves
The Rendering Loop - three.js - how to have render called when needed and where animation is done
Incremental Animation - three.js - one method of animation
Set the Pivot (exercise) - make the drinking bird properly pivot around its cross-bar
Step Size - animation is better linked to time than to frame display
Demo: Constant Steps vs. Timed Steps - how a fixed step animation fails when frames per second changes
Timed Animation - three.js - how best to tie animation to time elapsed
Motion Capture - one method of creating animations is to capture the real-world motions
Keyframing - three.js - set positions at various times and interpolate among them
Keyframing Example - an example showing keyframing in action in three.js
Demo: Three.js Tween Library - the drinking bird animated with keyframing
Texture Animation - two types of texture animation: video and texture coordinate modification
Flowing River (exercise) - animate a texture using texture coordinate offsetting
Quaternion Interpolation - quaternions let you interpolate between two orientations
Demo: Jaunty Hat - quaternions give a sensible linear interpolation
Skinning - how a smooth skin surface can be bent and animated
Morphing - using morph targets to animate a face or other objects
Introduction to Previsualization - using virtual world techniques to make films
Previsualization - demo by Third Floor about pre-vis
Particle Systems - animating particles for a variety of effects
Collision Detection and Response - finding and responding to objects overlapping each other for improved interaction and animation
Simulation - using physical principles can be used to generate animations
Simulation Examples - many different examples of simulation
Guided Simulation - artistic control and simulation can be used together
Drinking Bird Simulation - one last look at the drinking bird animation and how its motion could be simulated
What Kind of System (quiz) - which animation technique is best for each task?
Level of Detail - making objects simpler makes them faster to render
Edge Collapse (quiz) - how many fewer faces and edges are drawn per collapse?
Euler-Poincare Formula - how the number of faces, edges, and vertices relate to each other
Terrain LOD System - teaser of a terrain simplification demo
Interview: Biggest Challenge - what challenges are ahead?
This is not the End

Final Exam

Mix and Match (quiz) - which terms are related to one another?
Dot and Cross Products (quiz) - which of these properties is true?
Vertex and Fragment Shader (quiz) - which shader, vertex or fragment, is better to use?
Which is Different? (quiz) - one of these ideas is different than the others
Volume Lighting (quiz) - what sort of texture holds the lighting for a location in space?
Pipeline (quiz) - pipeline speed and terms
Normal Computation (quiz) - how do you compute the geometric normal?
Perspective vs. Orthographic (quiz) - what is true for perspective and/or orthographic projections?
What's Hardwired? (quiz) - what elements of the pipeline are available as fixed-function hardware?
Brightest Illumination (quiz) - where is the diffuse and specular components brightest?

Many thanks to Chen Jianfei for creating the titles and links in this listing.