Outline of Spring 2020
This class will cover roughly the same material as we did in the Spring of 2020 (and the Spring of 2019). In Spring of 2020, we lost a little time as we transitioned to remote instruction when the COVID pandemic began, so at the end, we missed a few topics (we didn’t talk about rendering).
This is the course outline for the Spring of 2020. It shows you the topics we covered - which will be very similar to the topics we cover this year. There are links to last year’s lecture videos - they can be a resource for you. If you want to hear about a topic presented a different way, you can listen to how it was presented last year.
Pre-Graphics
Course Overview (Lecture 1)
- Computer Graphics as a research field [10:15]
- Computer Graphics as this course [13:50]
- Distributed source control (GIT) concepts [01:03:55]
Graphics Basic (Lecture 2)
- Human perception basic [3:43]
- Images and image representations [11:49]
- Displays and display types [16:54]
- Buffers and buffering [24:54]
- Web basics (HTML, DOM, etc.) [42:45]
- Event models [57:43]
JavaScript Basic (Lecture 3)
Coordinate Systems, Transformations, and Drawing
Canvas Basic (Lecture 4)
- Canvas APIs [10:47]
- Canvas events [14:05]
- Canvas coordinate systems [23:52]
- First transformation - Translation [1:06:01]
Transformations Basic (Lecture 5 , 6 )
- Translate, scale, and rotate [26:01]
- Rotate/scale about center [56:58]
- Composition of transformations [22:41]
- Forward and backward ways to think about transformations [42:48]
- Shear (skew) [17:12]
- Articulated chains and hierarchies [19:27]
- Scene-graph APIs (SVG) [39:18]
Transformations Math (Lecture 7 , 8 )
- Points vs. vectors [6:19]
- Matrics basics [12:00]
- Linear and affine transformations [21:54]
- Composition by matrix multiply [26:11]
- Homogeneous coordinates [32:05]
- Using transformation matrices in Canvas APIs [44:18]
- Rotation matrics [19:21]
- Linear interpolation [36:34]
- Oriented particles [39:31]
Polygons (Lecture 8)
- Convex vs. non-convex [50:29]
- Non-zero vs. Even-Odd winding rule [56:03]
- Shape concepts (curves vs. areas) [1:04:13]
Curves and Shape Representation
Basic of Curves (Lecture 9)
- Shapes and Curves [6:46]
- Curves vs. areas/regions/surfaces [11:05]
- Implicit/parametric/subdivision representations [15:41]
- Free parameters and shape parameters [36:50]
- Defining smoothness: Continuity and continuity conditions [43:31]
- Creating curves using lines, arcs, and piecewise polynomials [01:02:28]
Piecewise Polynomials (Lecture 10)
- Piecewise polynomial curves/splines [04:30]
- Polynomial forms: line (1st degree) [22:17]
- Polynomial forms: quadratic (2nd degree) [29:37]
- Polynomial forms: cubic (3rd degree) and cubic Hermite splines [40:10]
- Cardinal and Catmull-Rom splines [57:38]
- Bézier curves [01:04:45]
Even More Curves (Bézier Curves) (Lecture 11)
- Sketching hermite, cardinal, and Bézier cubics [02:40]
- Properties of Bézier curves [16:43]
- Using Bernstein basis polynomials (algebra) to define Bézier curves [26:15]
- De Castlejau (geometric) construction of Bézier curves [38:35]
- Train demo: smoother curves and arc length re-parameterization [51:48]
- B-Splines (curves with controllable smoothness) [01:06:55]
Drawing in 3D
3D Graphics Abstractions and THREE.js (Lecture 12 , 13 )
- Some 3D math and basics of drawing in 3D [01:39]
- THREE.js and graphics abstractions [09:13]
- Create a world using scenes [26:57]
- Make objects using materials, geometries, and meshes [28:54]
- Place objects in world using transformations and hierarchy [40:10]
- Transform to screen using cameras [54:19]
- Draw! Figure out what's visible and color the pixels using the renderer [59:25]
- Lighting, types of materials, and working with triangles [01:02:44]
Viewing Transformations and Lighting (Lecture 14)
- Working with triangles: barycentric interpolation, normals, and tangents [01:07]
- Perspective and types of projections [11:20]
- Perspective projection math [32:39]
- The perspective transformation in THREE.js and camera transformations [42:58]
- Types of lights and how materials interact with lights [54:36]
- Animation and transformations in THREE.js [01:03:29]
Transformations in 3D
Animation and Transformations in THREE.js (Lecture 15)
Rotations in 3D (Lecture 15)
- Rotation vs. orientation and physical rotation demos [19:08]
- Local vs. global axes for rotation, sequences of rotations, and web demos [26:05]
- Euler's two most popular rotation theorems (Euler angles and axis angle) [42:43]
- How to compose multiple rotations and web demo [54:25]
- Gimbal lock and Euler angles vs. axis angle representation [59:50]
- Rotation vectors, matrices, and unit quaternions [01:07:15]
Another Look at 3D Rotation Representations (Lecture 16)
- Euler angles with web demo [01:57]
- Composing rotations [11:37]
- Axis angle [18:30]
- Rotation matrices [21:00]
- Unit quaternions, comparison to other methods, and converting to quaternions [23:09]
- How THREE.js handles rotations [37:15]
- Special THREE.js rotations: LookAt/LookFrom/LookUp [39:40]
Hierarchical Modeling and More about Meshes (Lecture 16)
Shapes in 3D
Meshes (Lecture 17-B)
- Meshes: collections of triangles [00:12]
- Criteria for good meshes [03:11]
- Properties of meshes and vertices [04:41]
- Vertex splitting [05:53]
- Mesh operations, representation, and data structures [08:13]
- Meshes in THREE.js (called Geometry in THREE.js!) [16:24]
- Mesh summary [37:13]
Colors (Lecture 17-B)
- Combining material, face, and vertex colors and examples in THREE.js [20:09]
- More about face colors [27:55]
- How THREE.js defines colors [29:13]
- More about vertex colors [30:08]
- Interpolating colors and other vertex properties (barycentric interpolation) [30:08]
- Barycentric interpolation [57:19]
Normals (Lecture 17-B)
- Overview of normals [37:53]
- Specifying normals [40:17]
- Uses of normals (backface culling, lighting, and more) [41:00]
Appearance
Lighting (Lecture 17-C)
- Bi-Directional Reflectance Distribution Functions (BRDF) [05:48]
- Local vs. global lighting [09:06]
- Emission, ambient, diffuse, and specular components of lighting models [14:50]
- Diffuse / Lambertian materials [17:46]
- Specular lighting [28:54]
- The Phong model [31:53]
- Alternative workflow (metalness and roughness) [45:52]
- Compute colors once per pixel [46:53]
Texture Mapping (Lecture 18-B , 18-C , 18-D , 19/20-P1 )
- Steps of texture mapping [02:57]
- Texture coordinates / UV mapping [10:23]
- Texture wrapping: clamping, repeating, and mirroring [14:28]
- Texture mapping in THREE.js [01:18]
- Texture lookup: magnification (Nearest-Neighbor vs. Bilinear Interpolation) [03:40]
- Texture lookup: minification and filtering [08:50]
- Summed area table [14:40]
- Mip map and anisotropy [18:18]
- Example: a virtual book [01:14]
Advanced Textures (Lecture 19/20-P2 , 19/20-P3 , 19/20-P4 , 19/20-P5 )
- Fake normals [00:11]
- Normal maps and bump maps [11:17]
- Layered textures [09:04]
- Light maps for pre-computed lights [10:55]
- Ambient occlusion [15:07]
- Procedural and solid textures [17:43]
- Sky Boxes [03:28]
- Environment mapping [08:43]
- Shadow maps [00:01]
Using Graphics Hardware
3D Drawing (Lecture 21/22-P1 , 21/22-P2 , 21/22-P3 , 21/22-P4 )
- Steps of drawing [09:27]
- Clipping [13:12]
- Rasteriztion [00:11]
- Brezenham / Midpoint Algorithm [05:02]
- Aliasing and anti-aliasing [00:01]
- Visibility [00:10]
- Z-Buffer [10:31]
Graphics Pipeline (Lecture 21/22-P5A , 21/22-P5B )
- Assumptions: each triangles and vertices are independent [04:29]
- Pipelining [05:20]
- Some graphics hardware history [10:58]
- Steps in the traditional pipeline [19:03]
- A triangle’s journey [00:18]
Shaders and GLSL (Lecture 23/24-P0 , 23/24-P1 , 23/24-P2 , 23/24-P3 )
- Vertex processing [12:02]
- Fragment processing [18:32]
- Shading Languages and GLSL concepts [00:10]
- Vertex shader and fragment shader [12:36]
- Connect GLSL to host program (JavaScript/THREE) [00:05]