Interactive Computer Graphics: A Top-Down Approach with WebGL（交互式计算机图形学：基于 WebGL 的自顶向下方法）

引用

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

章节概要

第8版（2020年9月出版，版权年份2021年）共十三章，另有四个附录。Pearson 将其描述为一本面向本科生、全面融入 WebGL 并强调基于应用的编程的计算机图形学入门教材；书中所有示例都使用 WebGL 和 JavaScript。书名中的“自顶向下”是指：学生通过 API 及早编写完整的三维程序，而图形管线内部的算法（裁剪、光栅化、隐藏面消除）直到接近结尾才展开讲解。每章以小结与注释、推荐阅读和习题结束，编程类章节还列出代码示例。

第1章：Graphics Systems and Models（图形系统与模型）

对这一领域的概述：图形学的应用、图形系统的组成（像素与帧缓冲、CPU 与 GPU、输入和输出设备）、物理图像与合成图像、针孔相机与人类视觉系统，以及合成相机模型。随后概述程序员接口、图形体系结构、图形管线的各个阶段（顶点处理、裁剪与图元装配、光栅化、片元处理）、可编程管线，以及 OpenGL 各版本与 WebGL 的关系。

第2章：Graphics Programming（图形编程）

第一个程序绘制谢尔宾斯基垫片。围绕它，本章介绍 WebGL API、图元与属性（多边形、三角剖分、顶点属性）、RGB 颜色、二维观察、HTML canvas 与视口，以及一个 WebGL 程序的完整结构：向 GPU 发送数据、编写顶点着色器和片元着色器、初始化着色器。本章以三维垫片和对隐藏面消除的初步介绍结束。

第3章：Interaction and Animation（交互与动画）

动画（旋转的正方形、双缓冲、定时器与 requestAnimationFrame）和交互：输入设备、基于事件监听器的事件驱动编程、按钮、菜单、键码和滑块、位置输入、窗口事件、手势与触控、拾取，以及交互式地构建模型。

第4章：Geometric Objects and Transformations（几何对象与变换）

本书的数学核心。它从数学视角（向量空间与仿射空间）和计算机科学视角两方面阐述标量、点和向量，讲解坐标系、标架和齐次坐标，并为一个彩色立方体建模。仿射变换（平移、旋转、缩放、错切）、变换的级联及其在 WebGL 中的使用，进而引出立方体的旋转、平滑旋转、四元数和虚拟轨迹球。

第5章：Viewing（观察）

经典观察与计算机观察：正交投影、轴测投影、斜投影和透视投影，用 look-at 函数放置相机，投影规范化与投影矩阵，隐藏面消除与剔除，网格显示与场景漫游，以及投影阴影和阴影贴图。

第6章：Lighting and Shading（光照与着色）

光与物质、光源类型、Phong 光照模型及其修正形式、法向量与反射向量的计算、多边形着色、用递归细分逼近球体、在着色器中实现光照、逐片元光照、非真实感着色，以及关于全局光照的简短一节。

第7章：Texture Mapping（纹理映射）

缓冲区与数字图像、映射方法、二维纹理映射及其 WebGL 实现、环境贴图与反射贴图，以及凹凸贴图。

第8章：Working with Framebuffers（使用帧缓冲）

把帧缓冲不仅仅当作输出目标的技术：混合、图像处理、GPU 通用计算、帧缓冲对象、多遍渲染与缓冲区乒乓、拾取、阴影贴图和投影纹理。

第9章：Modeling and Hierarchy（建模与层次结构）

几何体与实例、以机械臂为例的层次模型、树及其遍历、动画、图形对象、场景图及其实现。

第10章：Procedural Methods（过程化方法）

算法模型和基于物理的模型：遵循牛顿力学的粒子系统、其数值求解与约束、基于智能体的模型、点精灵、基于语言的模型、递归方法与分形，以及过程噪声。

第11章：Curves and Surfaces（曲线与曲面）

参数三次多项式曲线、插值、Hermite 曲线与曲面、Bézier 曲线与曲面、B 样条曲线与曲面及其渲染、犹他茶壶、代数曲面、细分曲线与曲面，以及由数据生成网格。

第12章：From Geometry to Pixels（从几何到像素）

自顶向下方法的最底层：基本渲染策略、渲染管线、裁剪、直线与多边形的光栅化、隐藏面消除算法、硬件实现、反走样以及显示方面的考虑。

第13章：Advanced Rendering（高级渲染）

超越管线：光线追踪与一个简单的光线追踪器、渲染方程、全局光照与路径追踪、RenderMan、并行渲染、体渲染（等值面、移动立方体与移动四面体、直接体渲染）、网格简化、基于图像的渲染，以及虚拟现实、增强现实和混合现实。

附录讨论着色器初始化，向量空间、仿射空间和欧几里得空间，矩阵，以及采样与走样。

核心概念

第1–3章：系统、编程与交互

• 合成相机模型：类比相机来形成图像，把物体、观察者和光分开处理。
• 可编程管线：顶点和片元阶段运行由应用程序编写的程序（着色器）的管线。
• 顶点着色器与片元着色器：处理每个顶点和每个片元的 GLSL 程序。
• 事件驱动输入：通过监听器响应用户事件的程序。

第4–6章：几何、观察与光照

• 齐次坐标：一种四分量表示，使平移、旋转和缩放都能用矩阵表达。
• 四元数：一种避免万向节锁的旋转代数表示。
• 投影规范化：把任意投影转换为标准正交投影。
• Phong 光照模型：结合环境反射、漫反射和镜面反射的模型。

第7–11章：纹理、帧缓冲与建模

• 纹理映射、环境映射与凹凸映射：利用图像改变颜色、反射或表面的视觉几何形状。
• 帧缓冲对象与多遍渲染：渲染到屏幕外缓冲区并重复利用其结果。
• 场景图：表示层次模型的树结构。
• 粒子系统：按照物理定律运动的粒子集合。
• Bézier 曲线与 B 样条曲线：由控制点定义的光滑曲线和曲面。

第12–13章：实现与高级渲染

• 裁剪与光栅化：去除视野之外的图元，并把其余部分转换为片元。
• 渲染方程：描述光传输的积分方程，是全局光照的基础。
• 体渲染：显示三维数据集，包括用移动立方体法提取等值面。

评析

优点

• 一开始就编程。 第一个程序出现在第2章，交互和动画出现在第3章，因此学生在最初几周就能做出可运行的交互式图形。出版社强调，这种方法使课程能及早引入吸引人的三维内容。
• 现代的、基于着色器的管线。 全书始终讲授可编程管线，从第一个程序起就使用顶点着色器和片元着色器；WebGL 无需安装即可在浏览器中运行，降低了动手实验的门槛。
• 几何讲解细致。 第4章在使用点、向量和标架之前，先从数学和编程两个角度加以阐述，并涵盖四元数和虚拟轨迹球；附录补充了线性代数。
• 覆盖面广。 帧缓冲技术、层次建模、过程化方法、曲线与曲面，以及一直讲到路径追踪、体渲染和 VR 的高级渲染一章，为教师提供了远超最小课程的选择。

局限

• 绑定于单一 API。 所有示例都使用 WebGL 和 JavaScript。使用其他 API 或较新的 Web API 的读者必须自行改写代码，而书中的 API 细节会比原理过时得更快。
• 算法出现得晚。 想从基本原理理解光栅化和裁剪的学生要等到第12章，光线追踪则要等到第13章；以算法为先的课程可能会觉得这种顺序不便。
• 高级章节只是概览。 第13章在一章之内列出了许多主题（从 RenderMan 到混合现实），每个主题都只得到入门性的处理。

在课程中的定位

本书与 Marschner 和 Shirley 的 Fundamentals of Computer Graphics 是本课程中两本覆盖面广的入门教材，二者顺序正好相反。Marschner 和 Shirley 从光线追踪和变换的数学讲起，把管线作为两种方法之一来介绍，不讲授特定 API；Angel 和 Shreiner 从 WebGL 编程开始，最后才讲到内部算法。课程可以一本作主教材，另一本作为另一角度的讲解：动手编程用 Angel 和 Shreiner，理论用 Marschner 和 Shirley。Gambetta 的 Computer Graphics from Scratch 是一本从基本原理出发、用伪代码构建光线追踪器和光栅化器的简短入门书，是本书第12–13章的有益搭配。

读完本书后，Akenine-Möller 等人的 Real-Time Rendering 是 GPU 渲染技术的综合参考书，可接续第6–8章；Pharr、Jakob 和 Humphreys 的 Physically Based Rendering 深入探讨第13章介绍的光线追踪和全局光照。Rogers、Sharp 和 Preece 的 Interaction Design 讨论交互式产品的设计与评估，与第3章的事件处理代码属于课程的不同方面。

如何使用本书

本书适合会编程、掌握向量和矩阵基础的本科生。WebGL 和 JavaScript 通过示例来介绍；由于 WebGL 程序在网页浏览器中运行，不需要另外安装图形库。

• 核心（一个学期）： 第1–6章，时间允许再加第7章。第2章的垫片程序不要只读，要亲手输入并修改，因为后面所有示例都建立在它的结构之上。
• 数学： 学习第4章时配合附录 B 和 C；不要跳过第4章关于标架和齐次坐标的内容，第5章依赖于它。
• 选读： 帧缓冲与多遍技术读第8章，层次模型与场景图读第9章，粒子与过程化方法读第10章，曲线与曲面读第11章。
• 实现及更多： 讲解管线内部如何工作的第12章，最好在学生用过管线之后再读；第13章可作为概览和项目灵感的来源。

用代码完成习题。一个好习惯是：在每个示例中只改动一处（变换顺序、光照参数、纹理过滤方式），并在运行前预测结果。