graphics-foundations

Graphics Foundations is a self-contained, topic-by-topic learning resource for the foundations of computer graphics, covering the math, the rendering pipeline, and the algorithms behind real-time and ray-traced images. It grew out of six quarters of discussion sections for UCLA's CS 174A (Introduction to Computer Graphics, 2019–2021) and has been rewritten as an independent resource; the author states it is not official course material. Structure and content The material is organized as a learning path of 13 chapters (numbered 0–12), intended to be read in order. Each chapter states what you will learn, explains it with figures, links to a demo, and ends with self-check questions and hidden answers. - Chapter 0: setup and JavaScript for graphics (tools, modules, classes, closures, typed arrays, the frame loop) - Chapter 1: the rendering pipeline and GLSL (vertex/fragment shaders, rasterization, clip space) - Chapter 2: points, vectors and coordinate systems (affine spaces, homogeneous and barycentric coordinates, dot and cross products) - Chapter 3: modeling shapes with triangles (discretization, indexed meshes, strips, winding, flat vs. smooth normals) - Chapter 4: transformations (translate, rotate, scale, shear, reflect; order; hierarchies; animation) - Chapter 5: change of basis (frames, converting coordinates, the camera as a frame) - Chapter 6: viewing and projection (look-at, orthographic and perspective derivations, clipping, z-buffer) - Chapter 7: lighting and shading (Phong and Blinn–Phong, light types, flat/Gouraud/Phong shading, normal matrix) - Chapter 8: texture mapping (uv mapping, filtering, mipmaps, perspective-correct interpolation, bump/normal/displacement) - Chapter 9: collision detection (bounding volumes, separating axis theorem, broad phase, time stepping) - Chapter 10: shadows, mirrors and transparency (shadow mapping, planar mirrors, alpha blending, premultiplied alpha) - Chapter 11: ray tracing (ray generation, intersections, recursive rays, ray trees, acceleration) - Chapter 12: building an interactive graphics project (planning, timing and state machines, particles, skyboxes, picking, composition, color) Two practice sets accompany the notes: Problems I (foundations, transformations, viewing) and Problems II (lighting, textures, collisions, ray tracing), each with full worked solutions. Prerequisites are programming in any language plus linear algebra at the level of vectors, matrices, dot and cross products; Chapter 0 covers the needed JavaScript. Demos Seven interactive browser demos accompany the chapters, linked from a live GitHub Pages site: hello triangle (plain WebGL), transformations, camera and projection, lighting and shading, texture mapping, ray tracing, and bounding volumes. Demos 02–07 are built on TinyGraphics.js, a small teaching library by Garett Ridge, loaded from its published copy rather than vendored. The demos are intended for a desktop browser with WebGL 2. A local server script (node tools/serve.mjs) is provided, with an option to develop against a local clone of TinyGraphics.js. Repository layout and quality checks The repository is organized into notes/, exercises/, figures/ (SVG figures generated by tools/figures.py), demos/ (one HTML file per demo plus shared helpers), and tools/. Notably, the notes are tested like code: scripts recompute every worked number in the notes and exercises, check links, anchors, figure originality and absence of course logistics, load each demo in headless Chromium while pressing every control and taking screenshots, and audit how math renders on github.com. A fix_math.py script rewrites LaTeX constructs (such as \mathbf, \boxed, \tag, \operatorname) that render incorrectly as native MathML on GitHub. The demo check requires a local Chromium with WebGL 2 and writes screenshots for human review. Credits and licensing The notes began as discussion-section material for UCLA CS 174A, supporting courses taught by Prof. Asish Law and Prof. Demetri Terzopoulos; the topic choice and order follow those courses. Lecture slides, textbook figures and assignments are not included. Original weekly discussion materials remain available in an archive tag and in per-quarter repositories. The notes, exercises, figures and demos are © Yunqi Guo and licensed under CC BY-NC-ND 4.0: reading, studying and sharing unmodified copies for non-commercial purposes with credit is permitted, while distributing modified versions or commercial use is not. TinyGraphics.js is a separate project with its own terms.