WebGL 3D開發(fā)實戰(zhàn)詳解（第2版）

目 錄

第 1章 HTML5開發(fā)基礎——進入
WebGL 世界的第 一道坎 1
1．1 HTML的發(fā)展簡史 1
1．1．1 HTML的由來 1
1．1．2 HTML的歷史 1
1．2 HTML5簡介 2
1．2．1 HTML5的新標準 2
1．2．2 HTML5引入的新特性 3
1．2．3 HTML5現(xiàn)狀 3
1．3 初識HTML5 4
1．3．1 HTML5標簽簡介 4
1．3．2 基礎標簽 4
1．3．3 格式標簽 6
1．3．4 表單標簽 11
1．3．5 圖像、鏈接、列表標簽 18
1．3．6 表格、元信息等標簽 21
1．3．7 HTML5中的全局屬性 26
1．3．8 HTML5中的事件 30
1．4 初識CSS 32
1．4．1 CSS簡介 32
1．4．2 CSS基礎語法 33
1．4．3 如何插入樣式表 34
1．4．4 使用CSS樣式 35
1．5 初識JavaScript 42
1．5．1 JavaScript的名字和版本 42
1．5．2 準備使用JavaScript 42
1．5．3 使用語句 43
1．5．4 使用變量和類型 43
1．5．5 JavaScript運算符 45
1．5．6 使用數(shù)組 45
1．5．7 創(chuàng)建自己的JavaScript
對象 46
1．5．8 常用的JavaScript工具 48
1．6 HTML5 Canvas簡介 49
1．6．1 文檔對象模型和Canvas 49
1．6．2 JavaScript與Canvas 49
1．6．3 HTML5 Canvas版
“Hello World” 50
1．6．4 Canvas中的基礎圖形 52
1．7 本章小結 53
第 2章 初識WebGL 2．0 54
2．1 WebGL 2．0概述 54
2．1．1 WebGL 2．0簡介 54
2．1．2 WebGL 2．0效果展示 55
2．2 初識WebGL 2．0應用 55
2．2．1 WebGL 2．0應用案例部署
運行步驟簡介 56
2．2．2 初識WebGL 2．0應用
程序 57
2．3 著色器與渲染管線 62
2．3．1 WebGL 2．0的渲染管線 62
2．3．2 WebGL 2．0中立體物體的
構建 68
2．4 本章小結 69
第3章 著色語言 70
3．1 著色語言概述 70
3．2 著色語言基礎 71
3．2．1 數(shù)據(jù)類型概述 71
3．2．2 數(shù)據(jù)類型的基本使用 75
3．2．3 運算符 77
3．2．4 構造函數(shù) 79
3．2．5 類型轉換 80
3．2． 6 限定符 81
3．2．7 插值限定符 85
3．2．8 一致塊 86
3．2．9 layout 限定符 87
3．2．10 流程控制 88
3．2．11 函數(shù)的聲明與使用 90
3．2．12 片元著色器中浮點變量
精度的指定 91
3．2．13 程序的基本結構 92
3．3 特殊的內(nèi)建變量 92
3．3．1 頂點著色器中的內(nèi)建
變量 92
3．3．2 片元著色器中的內(nèi)建
變量 93
3．3．3 內(nèi)建常量 94
3．3．4 內(nèi)建uniform變量 94
3．4 著色語言的內(nèi)置函數(shù) 95
3．4．1 角度轉換與三角函數(shù) 95
3．4．2 指數(shù)函數(shù) 96
3．4．3 常見函數(shù) 97
3．4．4 幾何函數(shù) 100
3．4．5 矩陣函數(shù) 101
3．4．6 向量關系函數(shù) 102
3．4．7 紋理采樣函數(shù) 103
3．4．8 微分函數(shù) 106
3．4．9 浮點數(shù)的打包與解包
函數(shù) 106
3．5 用invariant修飾符避免值變
問題 107
3．6 預處理器 108
3．7 本章小結 109
第4章 必知必會的3D開發(fā)知識——
投影及各種變換 110
4．1 矩陣數(shù)學計算工具腳本Matrix 110
4．2 攝像機的設置 111
4．3 兩種投影方式 112
4．3．1 正交投影 112
4．3．2 透視投影 117
4．4 各種變換 119
4．4．1 基本變換的數(shù)學知識 119
4．4．2 平移變換 120
4．4．3 旋轉變換 121
4．4．4 縮放變換 123
4．4．5 基本變換的實質 124
4．5 所有變換的完整流程 126
4．6 繪制方式 129
4．6．1 幾種繪制方式概述 129
4．6．2 點與線段繪制方式 130
4．6．3 三角形條帶與扇面繪制
方式 132
4．7 設置合理的視角 136
4．8 卷繞和背面剪裁 141
4．8．1 基本知識 141
4．8．2 簡單的案例 142
4．9 本章小結 144
第5章 光照效果 145
5．1 曲面物體的構建 145
5．1．1 球體的構建原理 145
5．1．2 案例效果概述 146
5．1．3 具體開發(fā)步驟 147
5．2 基本光照效果 149
5．2．1 光照的基本模型 149
5．2．2 環(huán)境光 149
5．2．3 散射光 151
5．2．4 鏡面光 156
5．2．5 3種光照通道的合成 159
5．3 定位光與定向光 161
5．4 點法向量和面法向量 163
5．5 光照的每頂點計算與每片元
計算 165
5．6 本章小結 168
第6章 紋理映射 169
6．1 初識紋理映射 169
6．1．1 基本原理 169
6．1．2 簡單的案例 170
6．2 紋理拉伸 175
6．2．1 兩種拉伸方式概述 175
6．2．2 不同拉伸方式的案例 177
6．3 紋理采樣 179
6．3．1 紋理采樣概述 179
6．3．2 最近點采樣 179
6．3．3 線性紋理采樣 180
6．3．4 MIN與MAG采樣 181
6．3．5 不同紋理采樣方式的
案例 182
6．4 MipMap紋理技術 184
6．4．1 基本原理 184
6．4．2 簡單的案例 186
6．5 多重紋理與過程紋理 188
6．5．1 案例概述 188
6．5．2 將2D紋理映射到球面上的
策略 189
6．5．3 案例的場景結構 191
6．5．4 開發(fā)過程 191
6．6 壓縮紋理的使用 193
6．6．1 ETC壓縮紋理 194
6．6．2 DXT5 196
6．7 本章小結 197
第7章 3D模型加載 198
7．1 obj模型文件概述 198
7．1．1 obj文件的格式 198
7．1．2 用3ds Max設計3D
模型 199
7．2 加載obj文件 200
7．2．1 加載僅有頂點坐標與面
數(shù)據(jù)的obj文件 200
7．2．2 加載后自動計算面法
向量 203
7．2．3 加載后自動計算平均法
向量 205
7．2．4 加載紋理坐標 207
7．2．5 加載頂點法向量 209
7．3 雙面光照 210
7．4 本章小結 212
第8章 混合與霧 213
8．1 混合技術 213
8．1．1 混合基本知識 213
8．1．2 源因子和目標因子 214
8．1．3 簡單混合效果的案例 215
8．2 地月系云層效果的實現(xiàn) 217
8．3 霧 219
8．3．1 霧的原理與優(yōu)勢 219
8．3．2 霧的簡單實現(xiàn) 220
8．4 本章小結 222
第9章 常用3D開發(fā)技巧 223
9．1 標志板 223
9．1．1 案例效果與基本原理 223
9．1．2 開發(fā)步驟 224
9．2 灰度圖地形 227
9．2．1 基本原理 228
9．2．2 普通灰度圖地形 228
9．2．3 過程紋理地形 231
9．2．4 MipMap地形 233
9．3 高真實感地形 234
9．3．1 基本思路 234
9．3．2 地形設計工具EarthSculptor
的使用 235
9．3．3 簡單的案例 237
9．4 天空盒與天空穹 239
9．4．1 天空盒 239
9．4．2 天空穹 241
9．4．3 天空盒與天空穹的使用
技巧 243
9．5 簡單鏡像 243
9．5．1 鏡像基本原理 243
9．5．2 基本效果案例 244
9．5．3 升級效果的案例 246
9．6 非真實感繪制 247
9．6．1 基本原理與案例效果 247
9．6．2 具體開發(fā)步驟 249
9．7 描邊效果的實現(xiàn) 250
9．7．1 沿法線擠出輪廓 251
9．7．2 在視空間中擠出 253
9．8 本章小結 254
第 10章 渲染出更加酷炫的3D場景——
幾種剪裁與測試 255
10．1 剪裁測試 255
10．1．1 基本原理與核心代碼 255
10．1．2 主次視角的簡單案例 255
10．2 模板測試 257
10．2．1 基本原理 257
10．2．2 簡單的案例 259
10．3 任意剪裁平面 260
10．3．1 基本原理 260
10．3．2 茶壺被任意平面剪裁的
案例 260
10．4 本章小結 262
第 11章 Three．js引擎基礎 263
11．1 Three．js概述 263
11．1．1 Three．js簡介 263
11．1．2 Three．js效果展示 264
11．2 初識Three．js應用 264
11．3 Three．js基本組件 266
11．3．1 場景 266
11．3．2 幾何對象 268
11．3．3 攝像機 270
11．3．4 攝像機數(shù)組 274
11．3．5 光源 275
11．3．6 材質 283
11．4 模型加載 291
11．4．1 Three．js中支持的模型
文件格式 291
11．4．2 導入三維格式文件 296
11．4．3 骨骼動畫的加載 300
11．5 貼圖的使用 306
11．6 本章小結 316
第 12章 Three．js引擎進階 317
12．1 粒子系統(tǒng) 317
12．1．1 Sprite粒子系統(tǒng) 317
12．1．2 PointCloud粒子系統(tǒng) 319
12．1．3 火焰粒子特效 321
12．2 混合與霧 325
12．2．1 混合 325
12．2．2 霧 328
12．3 渲染到紋理 329
12．3．1 效果組合器 329
12．3．2 FilmPass通道 330
12．3．3 BloomPass通道 331
12．3．4 DotScreenPass通道 332
12．3．5 SSAOPass通道 333
12．3．6 ShaderPass通道 334
12．4 音頻的處理與展示 336
12．4．1 聲音可視化 336
12．4．2 聲音與距離 338
12．5 雜項 340
12．5．1 任意剪裁平面 340
12．5．2 單個物體的多個實例 341
12．5．3 高真實感的水面 343
12．6 本章小結 346
第 13章 Babylon．js引擎 347
13．1 Babylon．js概述 347
13．1．1 Babylon．js簡介 347
13．1．2 Babylon．js效果展示 348
13．2 初識Babylon．js應用 348
13．3 Babylon．js基本組件 350
13．3．1 場景 350
13．3．2 網(wǎng)格對象 352
13．3．3 攝像機與控制 354
13．3．4 光照與陰影 359
13．3．5 材質 363
13．4 模型加載 368
13．4．1 Babylon．js中支持的模型
文件格式 368
13．4．2 資源管理器的使用 373
13．4．3 導入三維格式文件 374
13．5 紋理貼圖 377
13．5．1 使用紋理貼圖 377
13．5．2 使用法向貼圖 379
13．5．3 使用光照貼圖制作靜態(tài)
陰影 380
13．5．4 使用高光貼圖 381
13．6 粒子系統(tǒng) 382
13．6．1 精靈與精靈動畫 383
13．6．2 粒子與粒子系統(tǒng) 385
13．6．3 粒子發(fā)射器 387
13．6．4 粒子動畫 389
13．6．5 GPU粒子 389
13．6．6 固體顆粒系統(tǒng) 390
13．7 物理引擎 391
13．7．1 Babylon．js中支持的物理
引擎插件 392
13．7．2 剛體的簡單介紹 392
13．7．3 簡單的物理場景 393
13．7．4 爆炸效果實現(xiàn) 394
13．7．5 碰撞回調(diào)函數(shù) 396
13．7．6 為導入模型添加碰撞
效果 396
13．7．7 關節(jié)的簡介 398
13．7．8 單擺運動的小球 399
13．7．9 布料模擬 399
13．8 渲染到紋理 401
13．8．1 SSAO渲染效果的
實現(xiàn) 401
13．8．2 Bloom渲染效果的
實現(xiàn) 404
13．8．3 顆粒渲染效果的實現(xiàn) 405
13．8．4 色差渲染效果的實現(xiàn) 405
13．8．5 景深渲染效果的實現(xiàn) 406
13．9 本章小結 407
第 14章 Ammo物理引擎 408
14．1 Ammo物理引擎簡介 408
14．2 Ammo中的常用類 408
14．2．1 btVector3類——三維
向量類 409
14．2．2 btTransform類——
變換類 409
14．2．3 btRigidBody類——
剛體類 410
14．2．4 btDynamicsWorld類——
物理世界類 410
14．2．5 btDiscreteDynamicsWorld類
——離散物理世界類 411
14．2．6 btSoftRigidDynamicsWorld
類——支持模擬軟體的物理
世界類 411
14．2．7 btCollisionShape類——
碰撞形狀類 412
14．2．8 btStaticPlaneShape類——
靜態(tài)平面形狀 412
14．2．9 btSphereShape類——
球體形狀類 412
14．2．10 btBoxShape類——長方體
盒碰撞形狀類 412
14．2．11 btCylinderShape類——
圓柱形狀類 413
14．2．12 btCapsuleShape類——
膠囊形狀類 413
14．2．13 btConeShape類——
圓錐形狀類 413
14．2．14 btCompoundShape類——
復合碰撞形狀類 413
14．3 簡單的物理場景 414
14．3．1 案例運行效果 414
14．3．2 案例的基本結構 414
14．3．3 介紹主要方法 415
14．4 多種形狀剛體的碰撞 417
14．4．1 案例運行效果 417
14．4．2 案例開發(fā)過程 418
14．5 旋轉的陀螺 419
14．5．1 案例運行效果 419
14．5．2 案例開發(fā)過程 419
14．6 觸發(fā)器——消失的木塊 420
14．6．1 案例運行效果 421
14．6．2 案例開發(fā)過程 421
14．7 碰撞過濾——物體碰撞下落 422
14．7．1 案例運行效果 422
14．7．2 案例開發(fā)過程 423
14．8 關節(jié) 424
14．8．1 關節(jié)的父類——
btTypedConstraint類 424
14．8．2 鉸鏈關節(jié)——
btHingeConstraint類 424
14．8．3 鉸鏈關節(jié)的案例——球落
門開 425
14．8．4 齒輪關節(jié)——
btGearConstraint類 427
14．8．5 齒輪關節(jié)的案例——
轉動的齒輪 427
14．8．6 點對點關節(jié)——
btPoint2PointConstraint
類 429
14．8．7 點對點關節(jié)的案例——
懸掛的物體 430
14．8．8 滑動關節(jié)——
btSliderConstraint類 432
14．8．9 滑動關節(jié)的案例——6個方
向的物體滑動 432
14．8．10 六自由度關節(jié)——
btGeneric6DofConstraint
類 434
14．8．11 六自由度關節(jié)的案例——
掉落的蜘蛛 435
14．9 交通工具類的介紹 438
14．9．1 交通工具類——
btRaycastVehicle類 438
14．9．2 交通工具的案例——
移動的小車 439
14．10 軟體 443
14．10．1 軟體幫助類——
btSoftBodyHelps類 443
14．10．2 軟布案例 444
14．10．3 三角形網(wǎng)格軟體案例 446
14．10．4 繩索軟體案例 448
14．11 本章小結 450
第 15章 在線3D模型交互式編輯
系統(tǒng) 451
15．1 背景以及功能概述 451
15．1．1 開發(fā)背景概述 451
15．1．2 系統(tǒng)功能簡介 452
15．2 系統(tǒng)的策劃及準備工作 455
15．2．1 系統(tǒng)策劃 455
15．2．2 數(shù)據(jù)庫設計 456
15．3 系統(tǒng)架構 457
15．3．1 各個類的簡介 457
15．3．2 系統(tǒng)架構簡介 459
15．4 服務器端相關類 460
15．5 模型編輯頁面文件 464
15．6 管理腳本 470
15．6．1 矩陣管理腳本 470
15．6．2 材質管理腳本 474
15．7 工具腳本 478
15．7．1 顏色拾取腳本 478
15．7．2 攝像機旋轉腳本 480
15．7．3 添加監(jiān)聽腳本 482
15．8 模型導出腳本 486
15．8．1 obj文件導出腳本 486
15．8．2 stl文件導出腳本 489
15．9 輔助工具腳本 491
15．9．1 初始化相關腳本 491
15．9．2 監(jiān)聽相關腳本 496
15．10 系統(tǒng)的優(yōu)化與改進 501
15．11 本章小結 502