John David N. Dionisio, PhD

CMSI 3710

Computer Graphics

Spring 2022

Note

This page is maintained as an archival record of the course shown above, and as such, some links on this page may no longer be valid nor accessible. They are kept here as a record of the resources that were available at the time of the course offering.

• Brightspace: Where you can access private content and check your grades
• We will use GitHub Classroom to manage and submit assignments
• Every now and then we may use Socrative to ask or answer questions as a class—my Socrative room is DONDILMU
• We continue to live in very fluid and dynamic circumstances—make sure to follow the university’s pandemic portal for the latest news, updates, and policies—to which this class must, of course, adhere

Assignments

• Assignment 0208 Fun with their 3D library Setup
  • Their library is three.js
  • Acquire your own React-wrapped three.js playground for personal experimentation and exploration (it’s labeled as an “assignment” in GitHub Classroom but it’s really just a private space which demonstrates how we embed three.js inside a React app that you can play with)
• Assignment 0224 Pixel-level primitives and filters Setup
  • Color Science from Khan Academy’s Pixar in a Box: Pay particular attention to the RGB color model module and its accompanying practice exercise
• Assignment 0324a  extended to 0401  Static scene based on our polygon mesh library
  • Need some inspiration? Check out some of Ed Catmull and Fred Parke’s early work from the University of Utah, 1972 (h/t Megan Reyes!)
  • The bare-bones WebGL starter code is available as a separate “assignment” repository for individual experimentation and exploration, just like the three.js playground from earlier
• Assignment 0324b  extended to 0401  Our own matrix library
• Assignment 0412  extended to 0419  Our lights, our camera…
• Assignment 0503 …Your action!

Setup Assignments 0324a–0503

Course Content

• The three.js manual: A thorough walkthrough of three.js (and general 3D graphics) concepts, with code you can run live. Here are some highlights:
  • Starting lesson
  • “Responsive design”—but really about how the camera’s aspect ratio, viewport dimensions, and web canvas dimensions interact
  • (3D, not pixel-level) Primitives—a.k.a. Geometries
  • Scenegraph—a.k.a. Scenes, the top-level three.js data structure
  • Materials
  • Textures
  • Lights
  • Cameras
• Readings on easing and tweening
  • Robert Penner’s book chapter Motion, Tweening, and Easing
  • Gilmore Davidson’s presentation Ease Yourself into Animation
• 3D Object Modeling
• Graphics = Light = Color = Memory
• Hello GL!
  • Anatomy of a modern OpenGL/WebGL program
  • Introduction to GLSL
• The Math of Space
• Transforms: More Than Meets the Eye
• Projection
• Look At
• Modeling Light
• Clipping, Hidden Surface Removal
  • Backface culling in greater depth