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)

Graphics Basic (Lecture 2)

JavaScript Basic (Lecture 3)

Coordinate Systems, Transformations, and Drawing

Canvas Basic (Lecture 4)

Transformations Basic (Lecture 5 , 6 )

Transformations Math (Lecture 7 , 8 )

Polygons (Lecture 8)

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)

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)

Hierarchical Modeling and More about Meshes (Lecture 16)

  • Grouping and hierarchical modeling in THREE.js [48:38]
  • Properties of good meshes [57:19]

Shapes in 3D

Meshes (Lecture 17-B)

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)

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 )

Advanced Textures (Lecture 19/20-P2 , 19/20-P3 , 19/20-P4 , 19/20-P5 )

Using Graphics Hardware

3D Drawing (Lecture 21/22-P1 , 21/22-P2 , 21/22-P3 , 21/22-P4 )

Graphics Pipeline (Lecture 21/22-P5A , 21/22-P5B )

Shaders and GLSL (Lecture 23/24-P0 , 23/24-P1 , 23/24-P2 , 23/24-P3 )

Shader Techniques and Tricks (Lecture 23/24-P4A , 23/24-P4B , 23/24-P4C , 23/24-P4D )