本書是作者多年來教學與科研工作的總結，採用WebGL圖形編程介面循序漸進開發一個賽車遊戲的方式對計算機圖形學基礎知識和真實感渲染的物理原理進行講解，涵蓋了圖形學基本概念、WebGL圖形編程介面、3D圖形表示、幾何變換、光柵化、光照和陰影技術、紋理映射等基本的計算機圖形學內容，以及粒子系統、光線跟蹤、光子跟蹤、基於圖像的繪製和全域光照等高級內容。並為讀者進一步深入學習和研究，在每章裡都給出了相關的程式實例。

Fabio Ganovelli

于1995年畢業于義大利比薩大學，2001年獲得博士學位，目前是義大利國家研究委員會可視計算研究室的研究員。Fabio目前的研究領域包括變形模擬、多解析度模擬、真實感繪製和幾何處理。Massimiliano Corsini 于2000年畢業于義大利佛羅倫斯大學的資訊工程學院，2005年獲得資訊通訊學院博士學位，目前是義大利國家研究委員會可視計算研究室的研究員。Massimiliano目前主要研究表面獲取和建模、2D/3D註冊技術和基於圖像的重光照技術。

邵緒強

博士，畢業于北京航空航太大學，華北電力大學計算機學院教師，主要專業方向為計算機圖形學，虛擬實境。

第1章 計算機圖形學概述 1
1．1 計算機圖形學的應用範圍和研究領域 1
1．1．1 應用範圍 1
1．1．2 研究領域 2
1．2 顏色和圖像 3
1．2．1 人類視覺系統 3
1．2．2 顏色空間 4
1．2．3 光源 9
1．2．4 伽馬值 9
1．2．5 圖像表示 9
1．3 三維場景的點陣影像生成演算法 12
1．3．1 光線跟蹤 12
1．3．2 光柵化流水線 14
1．3．3 光線跟蹤與光柵化流水線 15

第2章 基本步驟 17
2．1 應用程式介面 17
2．2 WebGL光柵化流水線 18
2．3 渲染流水線演算法：初步渲染 20
2．4 WebGL的支援函式庫 29
2．5 NVMC簡介 29
2．5．1 架構 30
2．5．2 NVMC類用於描述世界 30
2．5．3 基本用戶端 31
2．5．4 代碼的組織方式 35

第3章 三維模型表示方式 37
3．1 概述 37
3．1．1 現實世界數位化 37
3．1．2 幾何建模 38
3．1．3 過程建模 38
3．1．4 模擬 38
3．2 多邊形網格 38
3．2．1 三角形扇和三角形帶 39
3．2．2 流形 39
3．2．3 朝向 40
3．2．4 多邊形網格的優勢和劣勢 40
3．3 隱式曲面 41
3．4 參數曲面 42
3．4．1 參數曲線 42
3．4．2 貝茲曲線 43
3．4．3 B樣條曲線 45
3．4．4 參數曲線擴展為參數曲面 47
3．4．5 貝塞爾曲面 47
3．4．6 NURBS曲面 48
3．4．7 參數曲面的優勢和劣勢 48
3．5 體素 49
3．5．1 體素渲染 49
3．5．2 體素表示的優勢和劣勢 50
3．6 構造實體幾何 50
3．7 細分曲面 51
3．7．1 Chaikin演算法 51
3．7．2 4點演算法 52
3．7．3 曲面的細分方法 52
3．7．4 細分方法分類 52
3．7．5 細分模式 53
3．7．6 細分曲面的優勢和劣勢 55
3．8 多邊形網格的資料結構 55
3．8．1 索引資料結構 56
3．8．2 翼邊 57
3．8．3 半邊 57
3．9 第一個代碼：創建和顯示簡單圖元 58
3．9．1 立方體 58
3．9．2 錐體 59
3．9．3 柱體 61
3．10 自測題 63

第4章 幾何變換 65
4．1 幾何實體 65
4．2 基本幾何變換 66
4．2．1 平移 66
4．2．2 縮放 66
4．2．3 旋轉 67
4．2．4 用矩陣符號表示變換 67
4．3 仿射變換 69
4．3．1 幾何變換組合 69
4．3．2 繞任意點旋轉和縮放 70
4．3．3 剪切 71
4．3．4 逆變換和交換律 71
4．4 框架 72
4．4．1 一般框架和仿射變換 73
4．4．2 框架的層次 73
4．4．3 第三維 74
4．5 三維空間中的旋轉 75
4．5．1 軸-角旋轉 75
4．5．2 歐拉角旋轉 77
4．5．3 用四元數旋轉 78
4．6 觀察變換 79
4．6．1 設置觀察參考框架 79
4．6．2 投影 80
4．6．3 視見體 82
4．6．4 從規範化設備座標到視窗座標 83
4．6．5 小結 85
4．7 圖形繪製流水線中的變換 85
4．8 升級用戶端：第一個3D用戶端 86
4．8．1 組裝樹和汽車 87
4．8．2 定位樹和汽車 88
4．8．3 觀察場景 88
4．9 編碼 88
4．10 用矩陣堆疊操作變換矩陣 89
4．10．1 升級用戶端：增加從上面和後面的觀察 91
4．11 操縱視圖和物件 92
4．11．1 用鍵盤和滑鼠控制觀察 93
4．11．2 升級用戶端：增加攝影師觀察 94
4．11．3 用鍵盤和滑鼠操縱場景：虛擬跟蹤球 95
4．12 升級用戶端：創建觀察者相機 97
4．13 自我練習 98

第5章 頂點轉化為圖元 100
5．1 光柵化 100
5．1．1 直線 100
5．1．2 多邊形(三角形) 103
5．1．3 屬性插值：質心座標 105
5．1．4 小結 107
5．2 隱藏面消除 108
5．2．1 深度排序 108
5．2．2 掃描線 109
5．2．3 深度緩存 109
5．2．4 深度緩存精度和深度衝突 110
5．3 從片元到圖元 111
5．3．1 丟棄測試 112
5．3．2 融合 112
5．3．3 走樣和反走樣 113
5．3．4 升級用戶端：從駕駛員角度進行觀察 114
5．4 裁剪 117
5．4．1 裁剪線段 117
5．4．2 裁剪多邊形 119
5．5 剔除 119
5．5．1 背面剔除 119
5．5．2 視見體剔除 120
5．5．3 遮擋剔除 122

第6章 光照和著色 123
6．1 光與物質之間的交互 123
6．2 輻射度量學簡介 127
6．3 反射率和雙向反射分佈函數(BRDF) 129
6．4 繪製方程 131
6．5 評估繪製方程 132
6．6 計算表面法向量 133
6．6．1 折痕角 135
6．6．2 表面法向量變換 136
6．7 光源類型 136
6．7．1 方向光 137
6．7．2 升級用戶端：添加太陽光源 138
6．7．3 點光源 141
6．7．4 升級用戶端：添加路燈光源 142
6．7．5 聚光燈光源 143
6．7．6 面光源 144
6．7．7 升級用戶端：添加汽車的前燈和隧道的指示燈 145
6．8 Phong光照模型 146
6．8．1 概述和動機 146
6．8．2 漫反射光分量 147
6．8．3 鏡面反射光分量 147
6．8．4 環境光分量 148
6．8．5 完整模型 148
6．9 著色技術 149
6．9．1 平面著色和Gouraud著色 149
6．9．2 Phong著色 150
6．9．3 升級用戶端：使用Phong光照 150
6．10 高級反射模型 151
6．10．1 Cook-Torrance模型 151
6．10．2 Oren-Nayar模型 152
6．10．3 Minnaert模型 153
6．11 自測題 153

第7章 紋理 155
7．1 引言：是否需要紋理映射 155
7．2 基本概念 155
7．3 紋理過濾：從片元紋理座標到片元顏色 157
7．3．1 紋理放大效應 157
7．3．2 多重映射的紋理縮小效應 158
7．4 透視校正插值：從頂點紋理座標到片元紋理座標 160
7．5 升級用戶端：為地面、街道和建築物增加紋理 162
7．6 升級用戶端：添加後視鏡 165
7．7 紋理座標生成以及環境映射 167
7．7．1 球體映射 167
7．7．2 立方體映射 169
7．7．3 升級用戶端：為視域增加一個天空盒子 169
7．7．4 升級用戶端：為賽車增加反射效果 171
7．7．5 投影紋理映射 173
7．8 利用紋理映射為幾何模型增加細節 173
7．8．1 位移貼圖 173
7．8．2 法線貼圖 174
7．8．3 升級用戶端：添加瀝青 175
7．8．4 切空間法線貼圖 176
7．9 網格參數化 178
7．9．1 接縫 179
7．9．2 參數化的品質 180
7．10 三維紋理及其用途 181
7．11 自測題 181

第8章 陰影 182
8．1 陰影現象 182
8．2 陰影貼圖 183
8．3 升級用戶端程式：增加陰影 185
8．4 陰影貼圖的偽影和局限 188
8．4．1 有限的數值精度：表面缺陷 188
8．4．2 有限的陰影圖解析度：走樣 190
8．5 陰影體 191
8．5．1 構建陰影體 192
8．5．2 演算法 193
8．6 自測題 193

第9章 基於圖像的Impostor技術 195
9．1 圖像 195
9．2 佈告板 196
9．2．1 靜態佈告板 196
9．2．2 螢幕對齊佈告板 197
9．2．3 升級用戶端：添加螢幕位置固定小工具 197
9．2．4 升級用戶端：添加鏡頭光斑效果 198
9．2．5 軸對齊佈告板 201
9．2．6 動態佈告板 204
9．2．7 球形佈告板 204
9．2．8 佈告板雲 204
9．3 光線跟蹤Impostor 206
9．4 自測題 207

第10章 高級技術 208
10．1 影像處理 208
10．1．1 模糊 209
10．1．2 升級用戶端：一個具有景深的更好的攝像機 211
10．1．3 邊緣檢測 216
10．1．4 升級用戶端：卡通渲染 217
10．1．5 升級用戶端：一個更好的平移攝像機 219
10．1．6 銳化 223
10．2 環境光遮蔽 223
10．3 延遲著色 226
10．4 粒子系統 227
10．4．1 粒子系統的運動 227
10．4．2 粒子系統的渲染 228
10．5 自測題 228

第11章 全域光照 229
11．1 光線跟蹤 229
11．1．1 光線-代數表面相交 230
11．1．2 光線-參數表面相交 231
11．1．3 光線?場景相交 231
11．1．4 基於光線跟蹤的繪製 238
11．1．5 經典光線跟蹤 238
11．1．6 路徑跟蹤 239
11．2 多通道演算法 242
11．2．1 光子追蹤 242
11．2．2 輻射度 243
11．2．3 形狀因數 243
11．2．4 通量傳輸方程和輻射度傳輸方程 244
11．2．5 輻射度方程組求解 247

附錄A NVMC類 250
附錄B 向量積的特性 253
參考文獻 256

前言

目前有很多關於計算機圖形學的書籍，其中大多數都處於初級階段，重點在於講解如何使用圖形API來生成漂亮的圖片。還有相當多的高級圖形學書籍，只專門介紹計算機圖形學的部分領域，如全域光照、幾何建模和非真實感繪製。然而，很少圖形學書籍能夠同時涵蓋計算機圖形基礎知識的細節和真實感繪製背後的物理原理，因此，本書適用的讀者範圍廣泛，從初學者到高水準計算機圖形學課程的學生，以及希望從事計算機圖形相關領域的工作的人和/或希望在計算機圖形學領域進行研究的學者。此外，很少有書籍將理論和實踐作為同一知識體系進行闡述。我們相信，讀者需要這樣一本圖形學書籍，因而在本書中致力滿足這一需求。

本書的中心內容是即時渲染，即三維場景的互動式視覺化。關於這一點，我們從初級到中間層次，漸進地涵蓋即時渲染的有關主題。對於每個主題，本書都對基本數學概念和/或物理原理進行解釋，並推導出相關的方法和演算法。本書還涵蓋了建模，從多邊形表示到NURBS以及細分表面表示。

沒有操作實例和交互而講授計算機圖形學幾乎是不可能的。因此，這本書的許多章節都配有實例。本書的特別之處在於，它遵循在上下文中教學的方法，也就是說，所有的實例都是為開發一個大型圖形應用程式而設計的，提供了將理論付諸實踐的環境。我們選擇的圖形應用程式是賽車遊戲，駕駛員控制汽車在軌道上移動。這個實例程式從場景中沒有任何圖形開始，然後每章都添加一些圖形，最後，期望能夠接近經典視頻遊戲中的場景。

這本書面向相對較廣範圍的讀者而設計。假設讀者已掌握微積分的基本知識和一些編程語言技術。儘管本書包含了從初級到高級的各種主題，讀者將會根據本書的章節來擴展基礎內容之外所需要的專業知識。因此，我們相信，初級水準和高級水準的計算機圖形學專業學生將成為本書的主要讀者。除了能夠從本書獲得計算機圖形學的各方面知識外，從教育的角度來看，學生將會精通許多基本演算法，有助於深入理解更高級的演算法。本書對於從事任何計算機圖形互動式應用程式的軟體發展人員，以及想要瞭解更多計算機圖形學的工作者都是非常有用的。

目前，將即時渲染與GPU編程分開是不可能的，因此對於即時演算法，需要借助於GPU相容的API。本書選擇WebGL作為所有操作實例的圖形API，其為JavaScript綁定了OpenGL-ES。選擇WebGL的原因是多方面的：首先，智慧手機、平板電腦和筆記型電腦已經變得無處不在，幾乎所有這些設備都具有支援WebGL的流覽器。其次，除了Web流覽器和簡單的文字編輯器，WebGL不需要任何專門的開發平臺。最後，還有大量公開可用的高品質教程來獲取有關WebGL的更多資訊。

最後，由於使用了WebGL，本書有大量的線上元件。所有的示例代碼都可以在本書的網站（http://www.envymycarbook.com）上獲得。我們也承諾將來在本網站上提供最新的線上資訊以及更多實例。