交互式计算机图形学 基于WebGL的自顶向下方法（第七版）

第1章 图形系统和模型
1．1 计算机图形学的应用
1．1．1 信息的显示
1．1．2 设计
1．1．3 仿真和动画
1．1．4 用户界面
1．2 图形系统
1．2．1 像素和帧缓存
1．2．2 CPU与GPU
1．2．3 输出设备
1．2．4 输入设备
1．3 物理图像与合成图像
1．3．1 对象和观察者
1．3．2 光和图像
1．3．3 成像模型
1．4 成像系统
1．4．1 针孔照相机
1．4．2 人类视觉系统
1．5 虚拟照相机模型
1．6 应用程序编程接口
1．6．1 笔式绘图仪模型
1．6．2 三维API
1．6．3 使用WebGL API绘制的一系列
图像
1．6．4 建模-绘制模式
1．7 图形绘制系统的体系结构
1．7．1 显示处理器
1．7．2 流水线体系结构
1．7．3 图形绘制流水线
1．7．4 顶点处理
1．7．5 裁剪和图元组装
1．7．6 光栅化
1．7．7 片元处理
1．8 可编程流水线
1．9 性能特征
1．10OpenGL版本和WebGL
小结和注释
建议阅读资料
习题
第2章 图形学编程
2．1 Sierpinski镂垫
2．2 编写二维图形应用程序
2．3 WebGL应用程序编程接口
2．3．1 图形函数
2．3．2 图形绘制流水线和状态机
2．3．3 OpenGL和WebGL
2．3．4 WebGL接口
2．3．5 坐标系
2．4 图元和属性
2．4．1 多边形的基本概念
2．4．2 WebGL中的多边形
2．4．3 利用多边形近似球面
2．4．4 三角剖分
2．4．5 文本
2．4．6 曲线和曲面对象
2．4．7 属性
2．5 颜色
2．5．1 RGB颜色
2．5．2 索引颜色
2．5．3 设置颜色属性
2．6 观察
2．6．1 正投影
2．6．2 二维观察
2．7 控制函数
2．7．1 和窗口系统的交互
2．7．2 宽高比和视口
2．7．3 应用程序组织结构
2．8 Sierpinski镂垫绘制程序
2．8．1 向GPU发送数据
2．8．2 绘制Sierpinski镂垫的
点数据
2．8．3 顶点着色器
2．8．4 片元着色器
2．8．5 组合代码段
2．8．6 initShaders()函数
2．8．7 init()函数
2．8．8 从应用程序读入着色器
2．9 多边形和递归
2．10三维Sierpinski镂垫
2．10．1 使用三维点
2．10．2 命名规范
2．10．3 使用多边形的三维Sierpinski
镂垫
2．10．4 隐藏面消除
小结和注释
建议阅读资料
习题
第3章 交互和动画
3．1 动画
3．1．1 旋转的正方形
3．1．2 显示过程
3．1．3 双缓存
3．1．4 使用定时器
3．1．5 使用requestAnimFrame
函数
3．2 交互
3．3 输入设备
3．4 物理输入设备
3．4．1 键盘码
3．4．2 光笔
3．4．3 鼠标和跟踪球
3．4．4 数据板、 触摸板和触摸屏
3．4．5 操作杆
3．4．6 多维输入设备
3．4．7 逻辑设备
3．4．8 输入模式
3．5 客户和服务器
3．6 事件驱动输入编程
3．6．1 事件和事件监听器
3．6．2 增加按钮
3．6．3 菜单
3．6．4 使用键码
3．6．5 滑动条
3．7 位置输入
3．8 窗口事件
3．9 拾取
3．10建立交互式模型
3．11交互式程序的设计
小结和注释
建议阅读资料
习题
第4章 几何对象和变换
4．1 标量、 点和向量
4．1．1 几何对象
4．1．2 与坐标无关的几何
4．1．3 数学的观点： 向量空间和仿射
空间
4．1．4 计算机科学的观点
4．1．5 几何ADT
4．1．6 直线
4．1．7 仿射加法
4．1．8 凸性
4．1．9 点积和叉积
4．1．10平面
4．2 三维图元
4．3 坐标系和标架
4．3．1 向量的表示和n元组
4．3．2 坐标系的变换
4．3．3 举例： 不同基下的表示之间的
变换
4．3．4 齐次坐标
4．3．5 举例： 标架变换
4．3．6 对表示进行处理
4．4 WebGL中的标架
4．5 矩阵和向量类型
4．6 建模一个彩色立方体
4．6．1 建模立方体的面
4．6．2 向内和向外的面
4．6．3 表示对象的数据结构
4．6．4 彩色立方体
4．6．5 颜色插值
4．6．6 显示立方体
4．6．7 使用元素绘制网格
4．7 仿射变换
4．8 平移、 旋转和缩放
4．8．1 平移
4．8．2 旋转
4．8．3 缩放
4．9 变换的齐次坐标表示
4．9．1 平移
4．9．2 缩放
4．9．3 旋转
4．9．4 错切
4．10 变换的级联
4．10．1 不动点在任意位置的
旋转
4．10．2 一般的旋转
4．10．3 实例变换
4．10．4 绕任意轴的旋转
4．11 WebGL中的变换矩阵
4．11．1 当前变换矩阵
4．11．2 基本矩阵函数
4．11．3 旋转、 平移和缩放
4．11．4 绕任意不动点的旋转
4．11．5 变换的顺序
4．12使立方体旋转起来
4．13三维应用程序的接口
4．13．1 使用屏幕区域
4．13．2 虚拟跟踪球
4．13．3 平滑的旋转
4．13．4 增量式旋转
4．14四元数
4．14．1 复数和四元数
4．14．2 四元数和旋转
4．14．3 四元数和万向节死锁
小结和注释
建议阅读资料
习题
第5章 观察
5．1 经典观察和计算机观察
5．1．1 经典观察
5．1．2 正投影
5．1．3 轴测投影
5．1．4 斜投影
5．1．5 透视观察
5．2 计算机观察
5．3 定位照相机
5．3．1 照相机标架的定位
5．3．2 两个观察API
5．3．3 lookAt函数
5．3．4 其他观察API
5．4 平行投影
5．4．1 正投影
5．4．2 WebGL中的平行投影
5．4．3 投影的规范化
5．4．4 正投影变换矩阵
5．4．5 斜投影
5．4．6 交互式观察立方体
5．5 透视投影
5．6 WebGL中的透视投影
5．7 透视投影变换矩阵
5．7．1 透视投影的规范化
5．7．2 WebGL中的透视投影
变换
5．7．3 透视投影示例程序
5．8 隐藏面消除
5．9 显示网格
5．9．1 显示网格曲面
5．9．2 多边形偏移
5．9．3 在场景中漫游
5．10 投影和阴影
5．11 阴影映射
小结和注释
建议阅读资料
习题
第6章 光照和着色
6．1 光线和材质
6．2 光源
6．2．1 彩色光源
6．2．2 环境光
6．2．3 点光源
6．2．4 聚光灯
6．2．5 远距离光源
6．3 Phong反射模型
6．3．1 环境光反射
6．3．2 漫反射
6．3．3 镜面反射
6．3．4 改进的Phong模型
6．4 计算向量
6．4．1 法向量
6．4．2 反射角
6．5 多边形的着色
6．5．1 均匀着色
6．5．2 平滑着色
6．5．3 Phong着色
6．6 通过递归细分逼近球面
6．7 指定光照参数
6．7．1 光源
6．7．2 材质
6．8 实现光照模型
6．8．1 在WebGL应用程序代码中应用
光照模型
6．8．2 绘制效率
6．8．3 在顶点着色器中实现光照
计算
6．9 球面模型的着色
6．10 基于每个片元的光照计算
6．11 非真实感着色
6．12 全局光照
小结和注释
建议阅读资料
习题
第7章 离散技术
7．1 缓存
7．2 数字图像
7．3 映射方法
7．4 二维纹理映射
7．5 WebGL的纹理映射
7．5．1 纹理对象
7．5．2 纹理图像数组
7．5．3 纹理坐标和纹理采样器
7．5．4 纹理采样
7．5．5 使用纹理坐标
7．5．6 多纹理映射
7．6 纹理生成
7．7 环境贴图
7．8 反射贴图示例程序
7．9 凹凸映射
7．9．1 计算凹凸贴图
7．9．2 凹凸贴图示例程序
7．10 融合技术
7．10．1 不透明度与融合
7．10．2 图像融合
7．10．3 WebGL中图像的融合
7．10．4 再探反走样
7．10．5 从后向前或从前向后绘制
多边形
7．10．6 场景反走样和多重采样
7．10．7 图像处理
7．10．8 其他的多通道绘制方法
7．11 GPGPU
7．12 帧缓存对象
7．13 缓存交换
7．14 拾取
小结和注释
建议阅读资料
习题
第8章 从几何到像素
8．1 图形绘制流水线的基本实现
策略
8．2 图形绘制系统的四个主要
任务
8．2．1 建模
8．2．2 几何处理
8．2．3 光栅化
8．2．4 片元处理
8．3 裁剪
8．4 线段的裁剪
8．4．1 Cohen-Sutherland裁剪
算法
8．4．2 Liang-Barsky裁剪算法
8．5 多边形的裁剪
8．6 其他图元的裁剪
8．6．1 包围盒与包围体
8．6．2 曲线、 曲面和字符的裁剪
8．6．3 帧缓存中的裁剪
8．7 三维裁剪
8．8 光栅化
8．9 Bresenham算法
8．10 多边形光栅化算法
8．10．1 内外测试法
8．10．2 WebGL与凹多边形
8．10．3 填充与分类
8．10．4 漫水填充算法
8．10．5 处理奇点
8．11 隐藏面消除
8．11．1 对象空间和图像空间消隐
算法
8．11．2 排序与隐藏面消除
8．11．3 扫描线填充算法
8．11．4 背面剔除
8．11．5 z缓存算法
8．11．6 基于z缓存的扫描转换
算法
8．11．7 深度排序和画家算法
8．12 反走样
8．13 显示方面的问题
8．13．1 颜色系统
8．13．2 颜色矩阵
8．13．3 γ校正
8．13．4 抖动输出技术和半色调输出
技术
小结和注释
建议阅读资料
习题
第9章 层级建模方法
9．1 图符和实例
9．2 层级模型
9．3 机器人手臂
9．4 树与遍历
9．5 使用树数据结构
9．6 动画
9．7 图形对象
9．7．1 方法、 属性和消息
9．7．2 一个立方体对象
9．7．3 对象与层级结构
9．7．4 几何和非几何对象
9．8 场景图
9．9 实现场景图
9．10 其他树结构
9．10．1 CSG树
9．10．2 BSP树
9．10．3 四叉树和八叉树
小结和注释
建议阅读资料
习题
第10章 过程建模方法
10．1 基于算法的建模
10．2 基于物理的建模和粒子系统
10．3 牛顿粒子
10．3．1 独立的粒子
10．3．2 弹簧力
10．3．3 吸引力与排斥力
10．4 求解粒子系统方程
10．5 约束条件
10．5．1 碰撞
10．5．2 软约束
10．6 一个简单的粒子系统
10．6．1 绘制粒子
10．6．2 更新粒子的位置
10．6．3 碰撞
10．6．4 作用力
10．6．5 群聚行为
10．7 基于agent的建模
10．8 基于语言的建模
10．9 递归方法和分形
10．9．1 标尺和长度
10．9．2 分形维数
10．9．3 中点划分及布朗运动
10．9．4 分形山脉
10．9．5 Mandelbrot集
10．9．6 Mandelbrot片元着色器
10．10 过程噪声
小结和注释
建议阅读资料
习题
第11章 曲线和曲面
11．1 曲线和曲面的表示形式
11．1．1 显式表示形式
11．1．2 隐式表示形式
11．1．3 参数表示形式
11．1．4 参数多项式曲线
11．1．5 参数多项式曲面
11．2 设计准则
11．3 三次参数多项式曲线
11．4 插值
11．4．1 调和函数
11．4．2 三次插值曲面片
11．5 Hermite曲线和曲面
11．5．1 Hermite形式
11．5．2 几何与参数连续性
11．6 B?zier曲线和曲面
11．6．1 B?zier曲线
11．6．2 B?zier曲面片
11．7 三次B样条
11．7．1 三次B样条曲线
11．7．2 B样条和基函数
11．7．3 样条曲面
11．8 普通B样条
11．8．1 B样条的递归定义
11．8．2 均匀样条
11．8．3 非均匀B样条
11．8．4 NURBS
11．8．5 Catmull-Rom样条
11．9 曲线和曲面的绘制
11．9．1 多项式求值方法
11．9．2 递归细分B?zier多项式
11．9．3 基于细分算法的其他多项式
曲线的绘制
11．9．4 细分B?zier曲面
11．10 Utah茶壶模型
11．11 代数曲面
11．11．1 二次曲面
11．11．2 使用光线跟踪绘制
曲面
11．12 曲线和曲面的细分
11．13 从数据生成网格
11．13．1 回顾高度场
11．13．2 Delaunay三角剖分
11．13．3 点云
11．14 支持曲线和曲面的图形API
11．14．1 曲面细分着色
11．14．2 几何着色
小结和注释
建议阅读资料
习题
第12章 高级绘制
12．1 超越流水线绘制结构
12．2 光线跟踪
12．3 构建一个简单的光线跟踪器
12．3．1 光线跟踪递归算法
12．3．2 计算交点
12．3．3 其他不同形式的光线
跟踪
12．4 绘制方程
12．5 辐射度方法
12．5．1 辐射度方程
12．5．2 求解辐射度方程
12．5．3 计算排列因子
12．5．4 实现辐射度算法
12．6 全局光照和路径跟踪
12．7 RenderMan
12．8 并行绘制
12．8．1 sort-middle绘制方法
12．8．2 sort-last绘制方法
12．8．3 sort-first绘制方法
12．9 GPU硬件实现
12．10 隐函数和等高线图
12．10．1 步进方格
12．10．2 步进三角形
12．11 体绘制
12．11．1 体数据集
12．11．2 隐函数的可视化
12．12 等值面与步进立方体
12．13 步进四面体
12．14 网格简化
12．15 直接体绘制
12．15．1 指定颜色和透明度
12．15．2 抛雪球算法
12．15．3 体光线跟踪
12．15．4 基于纹理映射的体绘制
12．16 基于图像的绘制
小结和注释
建议阅读资料
习题
附录A 初始化着色器
附录B 空间
附录C 矩阵
附录D 采样与走样
参考文献

译 者 序
计算机图形学（Computer Graphics）产生于20世纪60年代， 是研究图形的计算机生成、 处理和显示的一门学科。目前计算机图形学已经渗透到工业生产和社会活动的各个领域， 从飞机、 汽车的计算机辅助设计到飞行模拟器， 从视频游戏到数字电影， 从天气预报到地质勘探， 无一不应用计算机图形生成技术。因此， 以图形人机接口和可视化技术为代表的计算机图形学已成为计算机学科中最活跃的分支之一。
在过去十几年， GPU得到了迅速发展， 三维图形程序也经历了从运行速度的提高到拥有高质量图形表现力的转变， 图形绘制系统性能的增长速度远远超过了摩尔定律， GPU的可编程性也不断增强。对于现代的OpenGL应用程序， 所有的绘制都是通过可编程GPU的顶点着色器和片元着色器来控制的， 因此新的可编程结构为三维图形应用程序开发人员提供了极大的灵活性。目前桌面版OpenGL的最新版本为OpenGL 4.3。其中， OpenGL 2.0的出现是OpenGL的重大进步， 因为它引入了OpenGL着色语言， 允许应用程序编程人员编写他们自己的着色器程序并且充分利用GPU的巨大能力。随着移动终端和互联网的广泛应用， OpenGL的变体——OpenGL ES和WebGL陆续衍生出来。OpenGL ES 2.0基于OpenGL 2.0， 在嵌入式设备的应用中（如智能手机、 平板电脑和游戏机等）获得了良好的图形表现。但是桌面版OpenGL和简化版的OpenGL ES都被设计成在本地运行， 不能充分利用Web的优势。2011年Khronos Group发布的第一个WebGL版本源自OpenGL ES 2.0。WebGL是运行在当前大多数Web浏览器上的OpenGL ES 2.0的JavaScript接口， 可以为HTML5 Canvas提供硬件3D加速渲染， 这样我们可以借助本地的图形硬件在几乎所有最新的浏览器上更流畅地展示3D场景和模型， 而不需要额外的专用插件或库。随着GPU和JavaScript引擎的速度与复杂性的日益增加， 我们希望更多图形应用程序都可以使用WebGL开发或者移植到WebGL中。
目前国外许多大学都已经将基于可编程GPU的高级着色语言融入计算机图形学的教学与实践中， 如University of New Mexico、 Harvard、 MIT、 Caltech、 Stanford、 Purdue、 Brown University、 University of Illinois、 University of Texas， Austin， 等等。因此， 随着目前可编程GPU的快速发展， 为了切实提高计算机图形学课程的教学质量与教学水平， 更好地与国际计算机图形学教育及科研实践接轨， 逐渐在我国高校的计算机图形学课程中引入基于可编程GPU绘制流水线及面向着色器编程的新型教学模式已是当务之急。译者多年从事计算机图形学的教学与研究， 深知选择这样一本“基础性与先进性、 理论性与应用性、 科学性与通俗性”相结合且能满足目前计算机图形学新型教学模式教材的重要性。目前在国内外很少有基于这种新型教学模式的计算机图形学书籍， 而本书第七版反映了计算机图形学在图形硬件设备和图形绘制标准等方面的最新发展现状。相比于前面六个版本， 第七版基于可编程GPU的WebGL着色器编程来介绍计算机图形学的相关原理、 方法和技术， 编写的三维图形示例能运行于最新的Web浏览器且不需要任何额外的插件或库。因此， 本书的第七版能很好地满足新型教学模式的需求。与桌面版OpenGL相比， WebGL更适合讲授计算机图形学， 也是培养学生基于现代GPU的可编程计算思维的一本非常难得的优秀教材。
本书的主要特色如下所述。
内容丰富而又系统， 基础性内容和拓展性主题相结合。本书涉及了现代计算机图形学课程几乎所有的主要内容， 涵盖了交互式图形编程、 三维可编程绘制流水线、 变换与观察、 光照与明暗绘制、 曲线曲面建模等基本的计算机图形学内容以及离散技术、 层级建模、 过程建模、 光线跟踪、 并行绘制和体绘制等高级内容。
内容编排和组织独具特色， 综合了知识性和实用性。本书采用了“自顶向下”和面向着色器编程的方法， 使学生能既使用WebGL和JavaScript迅速地编写自己的交互式三维Web图形应用程序， 又能系统地掌握计算机图形学的基本原理、 方法和技术。
本书作者结合自己在计算机图形学领域多年的教学和科研成果， 为本书提供了大量的经典示例程序、 丰富的插图、 彩图和习题， 并在每章后面提供了最新的建议阅读资料， 为进一步加深和扩展读者对有关内容的理解提供了有力支持。
本书既不乏经典理论， 又侧重近几年计算机图形学发展的最新成果。本书第七版中新增的某些技术是最近的文献中出现的新技术。为了及时反映计算机图形学的发展现状， 本书对第六版中的某些章节进行了调整， 并增删了相关内容：
将第六版中有关输入和交互的内容集中起来作为独立的章节， 即本书的第3章； 增加了有关离屏绘制、 绘制到纹理、 基于Agent建模等内容。
所有的应用程序采用WebGL技术标准， WebGL应用程序包含三种语言： HTML5、 JavaScript和OpenGL着色器语言， 虽然第七版中的许多示例程序的输出结果与以前的版本相同， 但代码完全不同。
包含了一个高效的矩阵-向量工具包。
本书原版是国外诸多大学采用的一本经典的计算机图形学教材， 译者甚感荣幸再次承接了本书最新版本的翻译工作。为了确保译文的质量， 译者和校对人员花费了大量时间对译文进行认真的校对和统稿。对于原文中显而易见的错误， 译者在译文中直接进行了更正， 而对于原文中可能有误的地方， 译文中均以“译者注”的形式做了标注， 以供读者参照。
本书的翻译得到了很多人的帮助与参与， 在此衷心感谢为本书翻译付出努力的每一个人！参加本书翻译的人员主要有： 张荣华、 姜丽梅、 邵绪强、 马玉梅、 李继荣、 王蓝婧， 王新颖也参与了本书的翻译和校对工作， 张荣华和李继荣参与了全书的统稿与审校。在此感谢本书第七版的所有译者！
译者在翻译过程中虽然力求准确地反映原著内容， 但由于自身的知识局限性， 译文中难免有不妥之处， 谨向原书作者和读者表示歉意， 并敬请读者批评指正。
华北电力大学计算机系 张荣华 2016年3月于保定
前 言
本书是计算机图形学入门教材， 重点介绍应用程序的编写。本书于1997年首次出版， 第一版在使用OpenGL和自顶向下的方法上多多少少是一场革命。在接下来的16年中， 发行了六个版本， 大多数计算机图形学概论课以及几乎所有的教科书都采用了本书的方法。
本书的第六版反映了主要的图形硬件升级引起的重大图形软件变化。特别地， 第六版是完全基于着色器的， 可以使读者创建完全利用现代GPU性能的应用程序。我们注意到这些改变也被包括在OpenGL ES 2.0中， 可以用来为嵌入式系统和便携式设备开发应用程序， 例如手机和平板电脑， 以及WebGL的JavaScript实现。当初， 通过HTML5支持WebGL的Web浏览器出现的时候， 我们并没有预料到会对WebGL产生如此大的兴趣。
当我们继续编写书籍， 讲授SIGGRAPH课程以及从事其他图形学相关活动的时候， 我们开始意识到对WebGL逐渐产生的兴趣。WebGL的应用如今非常普遍， 包括最近智能手机上的一些程序。虽然WebGL缺少了一些最新版OpenGL的高级功能， 但是其与HTML5的整合开辟了大量新的应用领域。作为一个额外的好处， 我们发现WebGL比桌面版OpenGL更适合讲授计算机图形学。因此， 我们决定使用WebGL作为编程语言编写本书的第七版。我们相信第七版也会像其他版本一样带来巨大变革。
第七版新增内容
● 全书使用了WebGL
● 所有的代码使用JavaScript编写
● 所有的代码在近期的Web浏览器上运行
● 增加了一章关于交互的内容
● 增加了关于绘制到纹理的内容
● 增加了关于显示网格的内容
● 包含了一个高效的矩阵-向量工具包
● 增加了基于Agent建模的介绍
自顶向下的方法
图形学的新进展以及本书前六个版本的成功一直鞭策着我们坚持采用自顶向下的、 面向程序设计的方法来介绍计算机图形学。虽然许多计算机科学与工程系现在开设了多门计算机图形学课程， 但是大多数学生只选修一门。在学生们学习了程序设计、 数据结构、 算法、 软件工程和基础数学以后给他们安排一门图形学课程， 应允许教师以内容充实并且有趣的方式按上述已学课程来组织计算机图形学课程， 我们希望这些学生学习这门课程时尽可能早地编写出三维应用程序。底层的算法， 例如绘制线段或者填充多边形， 可以在学生们编写了图形程序之后再考虑。
当被问到“为什么讲授编程”这个问题时， 计算机教育的先驱John Kemeny曾经把自顶向下的编程方法与我们熟悉的汽车来类比： 你没必要知道汽车发动机罩下面是什么， 但是如果知道内部的工作原理， 就会去驾驶汽车而不是坐在汽车后座上。同样的类比适用于讲授计算机图形学的方法。第一种方法（算法的方法）是把汽车工作原理的方方面面都交代清楚： 发动机、 传动装置、 燃烧过程等。第二种方法（概览的方法）是雇一名司机， 自己坐在后面观光。第三种方法（本书采用的编程方法）是教会你如何驾驶并把汽车开到你想要去的地方， 正如一句过时的租赁广告词说的那样： “让我们把你放在驾驶员的位子上去。”
使用WebGL和JavaScript编程
当本书的第一作者Edward Angel在30年前开始讲授计算机图形学的时候， 当时以面向编程的方式讲授这门课程并编写相应教材的最大障碍是缺乏一个广泛接受的图形库或者应用程序编程接口（API）。遇到的困难包括： 高成本、 可用性受限、 缺乏通用性以及高复杂性