Interactive Computer Graphics: A Top-Down Approach with WebGL

Citation

Angel, E., & Shreiner, D. (2021). Interactive Computer Graphics: A Top-Down Approach with WebGL (8th ed.). Pearson.

Chapter Summary

The 8th edition (published September 2020, copyright 2021) has thirteen chapters and four appendices. Pearson describes it as an introduction to computer graphics for undergraduates that fully integrates WebGL and emphasizes application-based programming; all examples use WebGL and JavaScript. The "top-down" approach of the title means that students write complete three-dimensional programs early through the API, and the algorithms inside the graphics pipeline (clipping, rasterization, hidden-surface removal) are opened up only near the end. Each chapter closes with a summary and notes, suggested readings and exercises, and the programming chapters also list code examples.

Chapter 1: Graphics Systems and Models

An overview of the field: applications of graphics, the components of a graphics system (pixels and the framebuffer, CPU and GPU, input and output devices), physical and synthetic images, the pinhole camera and human vision, and the synthetic-camera model. The chapter then outlines the programmer's interface, graphics architectures and the stages of the graphics pipeline (vertex processing, clipping and primitive assembly, rasterization, fragment processing), programmable pipelines and the relationship between OpenGL versions and WebGL.

Chapter 2: Graphics Programming

The first program draws the Sierpinski gasket. Around it the chapter introduces the WebGL API, primitives and attributes (polygons, triangulation, vertex attributes), RGB colour, two-dimensional viewing, the HTML canvas and viewports, and the complete structure of a WebGL program: sending data to the GPU, writing a vertex shader and a fragment shader, and initializing shaders. It ends with a three-dimensional gasket and a first look at hidden-surface removal.

Chapter 3: Interaction and Animation

Animation (a rotating square, double buffering, timers and requestAnimationFrame) and interaction: input devices, event-driven programming with event listeners, buttons, menus, key codes and sliders, position input, window events, gesture and touch, picking, and building models interactively.

Chapter 4: Geometric Objects and Transformations

The mathematical heart of the book. It develops scalars, points and vectors in both a mathematical (vector and affine spaces) and a computer-science view, coordinate systems, frames and homogeneous coordinates, and models a coloured cube. Affine transformations (translation, rotation, scaling, shear), their concatenation and their use in WebGL lead to spinning the cube, smooth rotations, quaternions and a virtual trackball.

Chapter 5: Viewing

Classical and computer viewing: orthographic, axonometric, oblique and perspective projections, positioning the camera with a look-at function, projection normalization and the projection matrices, hidden-surface removal and culling, displaying meshes and walking through a scene, and projected shadows and shadow maps.

Chapter 6: Lighting and Shading

Light and matter, types of light source, the Phong lighting model and its modified form, the computation of normal and reflection vectors, polygonal shading, a sphere approximated by recursive subdivision, implementing lighting in shaders, per-fragment lighting, non-photorealistic shading and a short section on global illumination.

Chapter 7: Texture Mapping

Buffers and digital images, mapping methods, two-dimensional texture mapping and its WebGL implementation, environment and reflection maps, and bump mapping.

Chapter 8: Working with Framebuffers

Techniques that use the framebuffer as more than a destination: blending, image processing, general-purpose GPU computation, framebuffer objects, multi-pass rendering and buffer ping-ponging, picking, shadow maps and projective textures.

Chapter 9: Modeling and Hierarchy

Geometries and instances, hierarchical models built around a robot arm, trees and their traversal, animation, graphical objects, scene graphs and their implementation.

Chapter 10: Procedural Methods

Algorithmic and physically based models: particle systems governed by Newtonian dynamics, their numerical solution and constraints, agent-based models, point sprites, language-based models, recursive methods and fractals, and procedural noise.

Chapter 11: Curves and Surfaces

Parametric cubic polynomial curves, interpolation, Hermite, Bézier and B-spline curves and surfaces, rendering them, the Utah teapot, algebraic surfaces, subdivision curves and surfaces, and mesh generation from data.

Chapter 12: From Geometry to Pixels

The bottom of the top-down approach: basic rendering strategies, the rendering pipeline, clipping, rasterization of lines and polygons, hidden-surface removal algorithms, hardware implementations, antialiasing and display considerations.

Chapter 13: Advanced Rendering

Beyond the pipeline: ray tracing and a simple ray tracer, the rendering equation, global illumination and path tracing, RenderMan, parallel rendering, volume rendering (isosurfaces, marching cubes and tetrahedra, direct volume rendering), mesh simplification, image-based rendering, and virtual, augmented and mixed reality.

The appendices cover initializing shaders, vector, affine and Euclidean spaces, matrices, and sampling and aliasing.

Key Concepts

Chapters 1–3: Systems, programming and interaction

• Synthetic-camera model: forming images by analogy with a camera, separating objects, viewer and light.
• Programmable pipeline: a pipeline whose vertex and fragment stages run programs (shaders) written by the application.
• Vertex and fragment shaders: GLSL programs that process each vertex and each fragment.
• Event-driven input: programs that respond to user events through listeners.

Chapters 4–6: Geometry, viewing and lighting

• Homogeneous coordinates: a four-component representation that lets translation, rotation and scaling be expressed as matrices.
• Quaternions: an algebraic representation of rotations that avoids gimbal lock.
• Projection normalization: converting any projection into a standard orthogonal one.
• Phong lighting model: a model combining ambient, diffuse and specular reflection.

Chapters 7–11: Textures, framebuffers and modeling

• Texture, environment and bump mapping: using images to vary colour, reflections or apparent surface geometry.
• Framebuffer objects and multi-pass rendering: rendering into off-screen buffers and reusing the results.
• Scene graphs: tree structures representing hierarchical models.
• Particle systems: collections of particles moved by physical laws.
• Bézier and B-spline curves: smooth curves and surfaces defined by control points.

Chapters 12–13: Implementation and advanced rendering

• Clipping and rasterization: removing primitives outside the view and converting the rest into fragments.
• Rendering equation: the integral equation describing light transport, the basis of global illumination.
• Volume rendering: displaying three-dimensional data sets, including isosurface extraction with marching cubes.

Critical Analysis

Strengths

• Programs from the start. The first program appears in Chapter 2 and interaction and animation in Chapter 3, so students produce working, interactive graphics within the first weeks. The publisher emphasizes that this approach brings engaging three-dimensional material early in a course.
• Modern, shader-based pipeline. The book teaches the programmable pipeline throughout, with vertex and fragment shaders from the first program, and WebGL runs in a browser with no installation, which lowers the barrier to experimentation.
• Careful geometry. Chapter 4 develops points, vectors and frames from both a mathematical and a programming perspective before using them, and includes quaternions and a virtual trackball; appendices supply the linear algebra.
• Wide coverage. Framebuffer techniques, hierarchical modeling, procedural methods, curves and surfaces, and an advanced rendering chapter reaching path tracing, volume rendering and VR give instructors options well beyond a minimal course.

Limitations

• Tied to one API. All examples use WebGL and JavaScript. Readers working in another API, or in a newer web API, must translate the code, and the API detail in the text will date faster than the principles.
• Algorithms come late. Students who want to understand rasterization and clipping from first principles must wait until Chapter 12, and ray tracing until Chapter 13; an algorithm-first course may find the order inconvenient.
• Advanced chapter is a survey. Chapter 13 lists many topics (from RenderMan to mixed reality) in a single chapter, so each receives only introductory treatment.

Where It Fits in the Course

This book and Marschner and Shirley's Fundamentals of Computer Graphics are the two broad introductory texts in the course, with opposite orders. Marschner and Shirley begin with ray tracing and the mathematics of transformations and present the pipeline as one of two approaches, without teaching a specific API; Angel and Shreiner start with WebGL programming and reach the internal algorithms last. A course can use one as the main text and the other as a second explanation: Angel and Shreiner for hands-on programming, Marschner and Shirley for theory. Gambetta's Computer Graphics from Scratch is a short first-principles introduction that builds a raytracer and a rasterizer in pseudocode, a useful companion to Chapters 12–13 here.

After this book, Akenine-Möller and colleagues' Real-Time Rendering is the comprehensive reference for GPU rendering techniques, continuing Chapters 6–8; Pharr, Jakob and Humphreys's Physically Based Rendering goes deep into the ray tracing and global illumination introduced in Chapter 13. Rogers, Sharp and Preece's Interaction Design covers the design and evaluation of interactive products, a different side of the course from the event-handling code of Chapter 3.

How to Use This Book

The book suits undergraduates who can program and know basic vectors and matrices. WebGL and JavaScript are introduced through the examples, and since WebGL programs run in a web browser, no separate graphics library has to be installed.

• Core (one semester): Chapters 1–6, with Chapter 7 if time allows. Type in and modify the gasket program in Chapter 2 rather than only reading it, since every later example builds on its structure.
• Mathematics: use Appendices B and C alongside Chapter 4; do not skip Chapter 4's treatment of frames and homogeneous coordinates, which Chapter 5 depends on.
• Options: Chapter 8 for framebuffer and multi-pass techniques, Chapter 9 for hierarchical models and scene graphs, Chapter 10 for particles and procedural methods, Chapter 11 for curves and surfaces.
• Implementation and beyond: Chapter 12 for how the pipeline works internally, best read once students have used it; Chapter 13 as a survey and source of project ideas.

Work the exercises in code. A good habit is to change one thing in each example (a transformation order, a lighting parameter, a texture filter) and predict the result before running it.