John David N. Dionisio, PhD

CMSI 3710

Computer Graphics

Spring 2025

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 0205 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 0226 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
  • Another way to connect color perception to RGB values: pixel-by-pixel explorer of the viral dress image from 2015
• Assignment 0331 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 ’22)
  • 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 0409 Our own matrix library
• Assignment 0428 Our lights, our camera…
• Assignment 0512 …Your action!

Setup Assignments 0331–0512

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

Related External Links

These links take you to web sites beyond this server. The sites are in no particular order or bias, just as they came to mind.

• canvas element resources
  • The Mozilla Developer Network’s Canvas tutorial—quite possibly all you’ll need outside of class
  • The Mozilla Developer Network’s Canvas reference—in case you need even more
  • The official canvas element specification from the W3C
• The OpenGL home page—APIs change, but the first principles stay the same
  • Getting Started with OpenGL
  • OpenGL Shading Language (GLSL)
  • The WebGL home page—Bringing 3D to web browsers without requiring plugins
• The Graphics Gems Repository: The place for seminal, foundational graphics algorithms and code
• Chrome Experiments: Lots of inspiration here
• WebGL Fundamentals is a great resource for, well, learning WebGL, with lots of sample code (although note, this sample code is meant to demonstrate specific WebGL functionalities—in a more generalized, reusable library, this code will have a very different structure)
• Wikipedia: A good starting point for virtually any concept lookup
• The pavement art of Julian Beever—his “3D illusion” drawings bear out the mathematics of 3D projection
• This Pixar technical memo describes some of the mathematics behind their animation: Harmonic Coordinates for Character Articulation