John David N. Dionisio, PhD

CMSI 3710

Computer Graphics

Spring 2024

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

Assignments

• Assignment 0131 Fun with their 3D library Setup
  • Their library is three.js
  • Acquire your own React-wrapped three.js playground for personal experimentation and exploration
• Assignment 0221 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
  • Color practice: What the Hex
• Assignment 0325a 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 0325b  extended to 0403  Our own matrix library
• Assignment 0410  extended to 0422  Our lights, our camera…
• Assignment 0429  extended to 0503  …Your action!

Setup Assignments 0325a–0429

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