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

目 錄

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