交互式電腦圖形學——基於WebGL 2.0的自頂向下方法（第八版） Interactive Computer Graphics

本書採用自頂向下方法並輔以面向編程的方式，基於現代可編程GPU的WebGL 2.0著色器編程，綜合利用HTML5、JavaScript和GLSL(OpenGL ES 3.0)，開發可以在各種瀏覽器中運行的三維圖形應用程序，同時系統地介紹了現代電腦圖形學的核心概念、原理和方法。本書是作者多年教學與科研的結晶，涵蓋了交互式圖形編程、可編程GPU繪制流水線、變換與觀察、光照與著色、曲線與曲面建模等電腦圖形學的基本內容，以及離散技術、層級建模、過程建模、光線跟蹤、並行繪制、體繪制和虛擬現實等高級內容。為了方便讀者進一步深入學習和研究電腦圖形學，本書在每章末尾提供了相關的建議閱讀資料。

目 錄

第1章 圖形系統和模型 1
1.1 電腦圖形學的應用 1
1.1.1 信息的顯示 1
1.1.2 設計 2
1.1.3 模擬和動畫 3
1.1.4 用戶界面 4
1.2 圖形系統 5
1.2.1 像素和幀緩存 6
1.2.2 CPU與GPU 7
1.2.3 輸出設備 7
1.2.4 輸入設備 9
1.3 物理圖像與合成圖像 9
1.3.1 對象與觀察者 9
1.3.2 光和圖像 10
1.3.3 成像模型 11
1.4 成像系統 12
1.4.1 針孔照相機 13
1.4.2 人類視覺系統 14
1.5 虛擬照相機模型 14
1.6 應用程序編程接口 16
1.6.1 筆式繪圖儀模型 16
1.6.2 三維API 18
1.6.3 使用WebGL API繪制的一系列
圖像 20
1.6.4 建模-繪制模式 22
1.7 圖形繪制系統體系結構 23
1.7.1 顯示處理器 23
1.7.2 流水線體系結構 24
1.7.3 圖形繪制流水線 24
1.7.4 頂點處理 24
1.7.5 裁剪和圖元組裝 25
1.7.6 光柵化 25
1.7.7 片元處理 25
1.8 可編程流水線 26
1.9 性能特徵 26
1.10 OpenGL版本和WebGL 27
小結和註釋 28
建議閱讀資料 29
習題 29
第2章 圖形學編程 31
2.1 Sierpinski鏤墊 31
2.2 編寫二維圖形應用程序 33
2.3 WebGL應用程序編程接口 38
2.3.1 圖形函數 38
2.3.2 圖形繪制流水線和狀態機 40
2.3.3 OpenGL和WebGL 40
2.3.4 WebGL接口 41
2.3.5 坐標系 42
2.4 圖元和屬性 43
2.4.1 多邊形的基本概念 45
2.4.2 WebGL中的多邊形 46
2.4.3 三角剖分 47
2.4.4 文本 48
2.4.5 頂點屬性 49
2.5 顏色 50
2.5.1 RGB顏色 51
2.5.2 查色表 53
2.5.3 設置顏色屬性 54
2.6 觀察 55
2.6.1 正投影視圖 55
2.6.2 二維觀察 56
2.7 控制函數 57
2.7.1 HTML canvas元素 57
2.7.2 寬高比和視口 58
2.7.3 應用程序的執行 59
2.8 Sierpinski鏤墊繪製程序 60
2.8.1 向GPU發送數據 62
2.8.2 繪制點數據 63
2.8.3 頂點著色器 63
2.8.4 片元著色器 64
2.8.5 組合各部分代碼 65
2.8.6 initShaders函數 66
2.8.7 init函數 67
2.8.8 在應用程序中讀取著色器 67
2.9 使用多邊形和遞歸 68
2.10 三維Sierpinski鏤墊 69
2.10.1 使用三維點 70
2.10.2 使用多邊形的三維Sierpinski
鏤墊 73
2.10.3 隱藏面消除 75
小結和註釋 76
代碼示例 77
建議閱讀資料 78
習題 78
第3章 交互和動畫 82
3.1 動畫 82
3.1.1 旋轉的正方形 82
3.1.2 顯示過程 84
3.1.3 雙緩存 85
3.1.4 使用定時器 86
3.1.5 使用requestAnimationFrame
函數 86
3.2 交互 87
3.3 輸入設備 88
3.4 物理輸入設備 88
3.4.1 鍵碼 89
3.4.2 鼠標和追蹤球 89
3.4.3 數據板、觸摸板和觸摸屏 90
3.4.4 多維輸入設備 91
3.4.5 邏輯設備 91
3.4.6 輸入模式 91
3.4.7 客戶端和服務器 93
3.5 基於事件驅動輸入的編程 93
3.5.1 事件和事件監聽器 93
3.5.2 增加按鈕 94
3.5.3 菜單 95
3.5.4 使用鍵碼 96
3.5.5 滑動條 97
3.6 位置輸入 97
3.7 窗口事件 99
3.8 手勢和觸摸 100
3.9 拾取 101
3.10 交互式建模 101
3.11 交互式程序的設計 105
小結和註釋 106
代碼示例 106
建議閱讀資料 107
習題 107
第4章 幾何對象和變換 110
4.1 標量、點和向量 110
4.1.1 幾何對象 110
4.1.2 坐標無關的幾何 112
4.1.3 數學的觀點：向量空間和仿射
空間 112
4.1.4 電腦科學的觀點 113
4.1.5 幾何ADT 114
4.1.6 直線 114
4.1.7 仿射加法 115
4.1.8 凸性 115
4.1.9 點積和叉積 116
4.1.10 平面 117
4.2 三維圖元 118
4.3 坐標系和標架 120
4.3.1 向量的表示和n元組 121
4.3.2 坐標系的變換 122
4.3.3 舉例：不同基下的表示之間的
變換 124
4.3.4 齊次坐標 124
4.3.5 舉例：標架變換 127
4.3.6 使用表示 128
4.4 WebGL中的標架 129
4.5 矩陣和向量類型 133
4.5.1 行主序和列主序矩陣表示 134
4.6 建模彩色立方體 134
4.6.1 建模立方體的面 135
4.6.2 向內和向外的面 135
4.6.3 表示對象的數據結構 136
4.6.4 彩色立方體 137
4.6.5 顏色插值 138
4.6.6 顯示立方體 139
4.6.7 使用元素繪制網格 139
4.6.8 圖元重啟 140
4.7 仿射變換 141
4.8 平移、旋轉和縮放 143
4.8.1 平移 143
4.8.2 旋轉 143
4.8.3 縮放 145
4.9 變換的齊次坐標表示 146
4.9.1 平移 146
4.9.2 縮放 147
4.9.3 旋轉 147
4.9.4 錯切 149
4.10 變換的級聯 149
4.10.1 不動點在任意位置的旋轉 150
4.10.2 一般的旋轉 151
4.10.3 實例變換 152
4.10.4 繞任意軸的旋轉 153
4.11 WebGL中的變換矩陣 155
4.11.1 當前變換矩陣 155
4.11.2 基本矩陣函數 156
4.11.3 旋轉、平移和縮放 157
4.11.4 繞任意不動點的旋轉 157
4.11.5 變換的順序 158
4.12 旋轉立方體 158
4.12.1 uniform矩陣 160
4.13 平滑的旋轉 162
4.13.1 增量式旋轉 163
4.14 四元數 164
4.14.1 復數和四元數 164
4.14.2 四元數和旋轉 165
4.14.3 四元數和萬向節死鎖 166
4.15 三維應用程序的接口 167
4.15.1 使用屏幕區域 167
4.15.2 虛擬追蹤球 168
4.15.3 用四元數實現追蹤球 169
小結和註釋 171
代碼示例 171
建議閱讀資料 171
習題 172
第5章 觀察 174
5.1 經典觀察和電腦觀察 174
5.1.1 經典觀察 175
5.1.2 正投影 176
5.1.3 軸測投影 176
5.1.4 斜投影 177
5.1.5 透視觀察 178
5.2 電腦觀察 179
5.3 定位照相機 180
5.3.1 從對象標架到照相機標架 180
5.3.2 兩個觀察API 183
5.3.3 lookAt函數 186
5.4 平行投影 188
5.4.1 正投影 188
5.4.2 WebGL中的平行投影 189
5.4.3 投影的規範化 190
5.4.4 正投影變換矩陣 190
5.4.5 斜投影 192
5.4.6 交互式觀察立方體 194
5.5 透視投影 196
5.5.1 簡單的透視投影 196
5.6 WebGL中的透視投影 198
5.6.1 透視投影函數 199
5.7 透視投影變換矩陣 200
5.7.1 透視投影的規範化 200
5.7.2 WebGL中的透視投影變換 202
5.7.3 透視投影示例程序 204
5.8 隱藏面消除 204
5.8.1 背面剔除 206
5.9 顯示網格 206
5.9.1 將網格顯示為曲面 208
5.9.2 多邊形偏移 210
5.9.3 在場景中漫游 211
5.10 投影和陰影 211
5.10.1 基於投影的陰影生成 211
5.11 陰影貼圖 215
小結和註釋 216
代碼示例 216
建議閱讀資料 217
習題 217
第6章 光照和著色 219
6.1 光線和材質 219
6.2 光源 221
6.2.1 彩色光源 222
6.2.2 環境光 222
6.2.3 點光源 222
6.2.4 聚光燈 223
6.2.5 遠距離光源 224
6.3 Phong光照模型 224
6.3.1 環境光反射 226
6.3.2 漫反射 226
6.3.3 鏡面反射 227
6.3.4 改進的Phong光照模型 229
6.4 計算向量 229
6.4.1 法向量 230
6.4.2 反射角 231
6.5 多邊形的著色 232
6.5.1 均勻著色 233
6.5.2 平滑著色和Gouraud著色 234
6.5.3 Phong著色 235
6.6 通過遞歸細分生成近似球面 236
6.7 指定光照參數 237
6.7.1 光源 238
6.7.2 材質 239
6.8 實現光照模型 239
6.8.1 在WebGL應用程序代碼中
應用光照模型 239
6.8.2 繪制效率 242
6.8.3 在頂點著色器中實現光照
計算 243
6.9 球面模型的著色 246
6.10 基於每個片元的光照計算 248
6.11 非真實感著色 249
6.12 全局光照 250
小結和註釋 251
代碼示例 252
建議閱讀資料 252
習題 253
第7章 紋理映射 255
7.1 緩存 255
7.2 數字圖像 256
7.3 映射方法 259
7.4 二維紋理映射 261
7.5 WebGL中的紋理映射 265
7.5.1 紋理對象 266
7.5.2 紋理圖像數組 266
7.5.3 紋理坐標和紋理採樣器 267
7.5.4 紋理採樣 271
7.5.5 使用紋理坐標 273
7.5.6 三維紋理映射 274
7.5.7 多紋理映射 279
7.6 環境映射 281
7.7 反射映射示例程序 285
7.8 凹凸映射 288
7.8.1 計算凹凸貼圖 289
7.8.2 凹凸映射示例程序 291
小結和註釋 295
代碼示例 295
建議閱讀資料 296
習題 296
第8章 使用幀緩存 298
8.1 混合技術 298
8.1.1 不透明度與混合 298
8.1.2 圖像混合 299
8.1.3 WebGL中的圖像混合 299
8.1.4 重溫反走樣 301
8.1.5 從後向前或從前向後繪制
多邊形 302
8.1.6 場景反走樣和多重採樣 303
8.2 圖像處理 303
8.2.1 其他多重繪制方法 304
8.3 GPGPU 305
8.4 幀緩存對象 308
8.5 多重繪制技術 313
8.5.1 環境光遮蔽 313
8.5.2 延遲光照 315
8.6 緩存交換 316
8.7 拾取 317
8.8 陰影貼圖 321
8.9 投影紋理 324
小結和註釋 326
代碼示例 326
建議閱讀資料 327
習題 327
第9章 層級建模方法 328
9.1 幾何圖形和實例 328
9.2 層級模型 330
9.3 機器人手臂 331
9.4 樹與遍歷 333
9.4.1 基於棧的遍歷方法 335
9.5 使用樹數據結構 337
9.6 動畫 340
9.7 圖形對象 341
9.7.1 方法、屬性和消息 342
9.7.2 立方體對象 343
9.7.3 WebGL中的實例化 345
9.7.4 對象與層級結構 347
9.7.5 幾何對象與非幾何對象 348
9.8 場景圖 348
9.9 實現場景圖 350
9.9.1 three.js示例 351
9.10 其他樹結構 354
9.10.1 CSG樹 354
9.10.2 BSP樹 355
9.10.3 四叉樹和八叉樹 357
小結和註釋 358
代碼示例 359
建議閱讀資料 359
習題 359
第10章 過程建模方法 361
10.1 基於算法的建模 361
10.2 基於物理的建模和粒子系統 362
10.3 牛頓粒子 363
10.3.1 獨立的粒子 364
10.3.2 彈簧力 365
10.3.3 吸引力和排斥力 366
10.4 求解粒子系統 367
10.5 約束條件 369
10.5.1 碰撞 369
10.5.2 軟約束 371
10.6 一個簡單的粒子系統 371
10.6.1 繪制粒子 372
10.6.2 更新粒子的位置 372
10.6.3 碰撞 372
10.6.4 作用力 373
10.6.5 群集行為 374
10.7 基於agent的建模 374
10.8 使用點精靈 377
10.9 基於語言的建模 380
10.10 遞歸方法和分形 383
10.10.1 標尺和長度 383
10.10.2 分形維數 384
10.10.3 中點劃分及布朗運動 385
10.10.4 分形山脈 386
10.10.5 Mandelbrot集 386
10.10.6 Mandelbrot片元著色器 389
10.11 過程噪聲 390
小結和註釋 392
代碼示例 392
建議閱讀資料 393
習題 393
第11章 曲線和曲面 395
11.1 曲線和曲面的表示 395
11.1.1 顯式表示形式 395
11.1.2 隱式表示形式 396
11.1.3 參數表示形式 397
11.1.4 參數多項式曲線 398
11.1.5 參數多項式曲面 398
11.2 設計準則 399
11.3 三次參數多項式曲線 400
11.4 插值 401
11.4.1 調和函數 402
11.4.2 三次插值曲面片 403
11.5 Hermite曲線和曲面 405
11.5.1 Hermite形式 405
11.5.2 幾何與參數連續性 406
11.6 Bézier曲線和曲面 407
11.6.1 Bézier曲線 407
11.6.2 Bézier曲面片 409
11.7 三次B樣條 410
11.7.1 三次B樣條曲線 410
11.7.2 B樣條和基函數 412
11.7.3 樣條曲面 413
11.8 通用B樣條 413
11.8.1 B樣條的遞歸定義 414
11.8.2 均勻樣條 415
11.8.3 非均勻B樣條 415
11.8.4 NURBS 415
11.8.5 Catmull-Rom樣條 416
11.9 繪制曲線和曲面 417
11.9.1 多項式求值方法 418
11.9.2 遞歸細分Bézier多項式 419
11.9.3 基於細分算法的其他多項式
曲線的繪制 420
11.9.4 細分Bézier曲面 421
11.10 Utah茶壺 422
11.11 代數曲面 424
11.11.1 二次曲面 424
11.11.2 使用光線投射繪制曲面 424
11.12 曲線和曲面細分 425
11.12.1 網格細分 426
11.13 從數據生成網格 428
11.13.1 回顧高度場 428
11.13.2 Delaunay三角剖分 428
11.13.3 點雲 430
11.14 支持曲線和曲面的圖形API 431
11.14.1 曲面細分著色 431
11.14.2 幾何著色 432
小結和註釋 432
代碼示例 432
建議閱讀資料 433
習題 433
第12章 從幾何到像素 435
12.1 基本的繪制策略 435
12.2 繪制流水線 437
12.2.1 建模 438
12.2.2 幾何處理 438
12.2.3 光柵化 439
12.2.4 片元處理 439
12.3 裁剪 440
12.3.1 裁剪簡介 440
12.3.2 包圍盒與包圍體 441
12.3.3 使用平面裁剪對象 442
12.4 光柵化 443
12.5 多邊形光柵化算法 445
12.5.1 內外測試法 445
12.5.2 WebGL與凹多邊形 446
12.6 隱藏面消除 448
12.6.1 對象空間和圖像空間消隱
算法 448
12.6.2 排序與隱藏面消除 449
12.6.3 掃描線填充算法 449
12.6.4 背面剔除 450
12.6.5 z緩存算法 451
12.6.6 深度排序和畫家算法 453
12.7 硬件實現 455
12.8 反走樣 457
12.9 顯示方面的問題 459
12.9.1 顏色系統 459
12.9.2 顏色矩陣 462
12.9.3 ? 校正 462
12.9.4 抖動與半色調 463
小結和註釋 463
建議閱讀資料 465
習題 465
第13章 高級繪制 468
13.1 超越流水線繪制結構 468
13.2 光線跟蹤 468
13.3 構建一個簡單的光線跟蹤器 471
13.3.1 光線跟蹤遞歸算法 471
13.3.2 計算交點 472
13.3.3 其他不同形式的光線跟蹤 474
13.4 繪制方程 475
13.5 全局光照和路徑跟蹤 477
13.6 RenderMan 478
13.7 並行繪制 479
13.7.1 sort-middle繪制方法 480
13.7.2 sort-last繪制方法 480
13.7.3 sort-first繪制方法 483
13.8 隱函數和等高線圖 483
13.8.1 步進方格 483
13.8.2 步進三角形 487
13.9 體繪制 487
13.9.1 體數據集 487
13.9.2 隱函數的可視化 488
13.10 等值面與步進立方體 489
13.11 步進四面體 491
13.12 網格簡化 492
13.13 直接體繪制 492
13.13.1 指定顏色和透明度 493
13.13.2 拋雪球算法 493
13.13.3 體光線跟蹤 494
13.13.4 基於紋理映射的體繪制 495
13.14 基於圖像的繪制 495
13.14.1 到立體像對的距離 496
13.14.2 基礎矩陣 497
13.15 虛擬現實、增強現實和混合
現實 498
13.16 最後一個示例 499
小結和註釋 500
建議閱讀資料 501
習題 501
附錄A 初始化著色器 503
附錄B 空間 507
附錄C 矩陣 513
附錄D 採樣與走樣 521
參考文獻 527