《WebGL 3D開發實戰詳解（第2版）》是2020年2月人民郵電出版社出版的圖書，作者是吳亞峰、於復興、索依娜。
基本介紹
- 中文名：WebGL 3D開發實戰詳解（第2版）
- 作者：吳亞峰、於復興、索依娜
- 出版時間：2020年2月
- 出版社：人民郵電出版社
- 頁數：502 頁
- ISBN：9787115519368
- 定價：108 元
- 開本：16 開
- 裝幀：平裝
內容簡介,圖書目錄,
內容簡介
本書系統地介紹了HTML5的基本知識和新特性、WebGL的基本知識，並引導讀者完成了WebGL的基礎案例。同時，本書也對在WebGL中，實現可程式渲染管線著色器的語言進行了系統介紹，幫助讀者進行著色器的高級開發打下堅實的基礎。另外，本書介紹了3D開發的多種投影、變換原理及實現，以及點、線段、三角形三大類的繪製方式。
本書適合程式開發人員、遊戲開發人員和虛擬現實開發者閱讀，也可作為大專院校相關專業師生的學習用書，以及培訓學校的教材。
圖書目錄
第 1章 HTML5開發基礎——進入
WebGL 世界的第 一道坎 1
1.1 HTML的發展簡史 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現狀 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 使用數組 45
1.5.7 創建自己的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 數據類型概述 71
3.2.2 數據類型的基本使用 75
3.2.3 運算符 77
3.2.4 構造函式 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 函式的聲明與使用 90
3.2.12 片元著色器中浮點變數
精度的指定 91
3.2.13 程式的基本結構 92
3.3 特殊的內建變數 92
3.3.1 頂點著色器中的內建
變數 92
3.3.2 片元著色器中的內建
變數 93
3.3.3 內建常量 94
3.3.4 內建uniform變數 94
3.4 著色語言的內置函式 95
3.4.1 角度轉換與三角函式 95
3.4.2 指數函式 96
3.4.3 常見函式 97
3.4.4 幾何函式 100
3.4.5 矩陣函式 101
3.4.6 向量關係函式 102
3.4.7 紋理採樣函式 103
3.4.8 微分函式 106
3.4.9 浮點數的打包與解包
函式 106
3.5 用invariant修飾符避免值變
問題 107
3.6 預處理器 108
3.7 本章小結 109
第4章 必知必會的3D開發知識——
投影及各種變換 110
4.1 矩陣數學計算工具腳本Matrix 110
4.2 攝像機的設定 111
4.3 兩種投影方式 112
4.3.1 正交投影 112
4.3.2 透視投影 117
4.4 各種變換 119
4.4.1 基本變換的數學知識 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 具體開發步驟 147
5.2 基本光照效果 149
5.2.1 光照的基本模型 149
5.2.2 環境光 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 開發過程 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 載入僅有頂點坐標與面
數據的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 地月系雲層效果的實現 217
8.3 霧 219
8.3.1 霧的原理與優勢 219
8.3.2 霧的簡單實現 220
8.4 本章小結 222
第9章 常用3D開發技巧 223
9.1 標誌板 223
9.1.1 案例效果與基本原理 223
9.1.2 開發步驟 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 具體開發步驟 249
9.7 描邊效果的實現 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 攝像機數組 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 粒子系統 317
12.1.1 Sprite粒子系統 317
12.1.2 PointCloud粒子系統 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 格線對象 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 使用光照貼圖製作靜態
陰影 380
13.5.4 使用高光貼圖 381
13.6 粒子系統 382
13.6.1 精靈與精靈動畫 383
13.6.2 粒子與粒子系統 385
13.6.3 粒子發射器 387
13.6.4 粒子動畫 389
13.6.5 GPU粒子 389
13.6.6 固體顆粒系統 390
13.7 物理引擎 391
13.7.1 Babylon.js中支持的物理
引擎外掛程式 392
13.7.2 剛體的簡單介紹 392
13.7.3 簡單的物理場景 393
13.7.4 爆炸效果實現 394
13.7.5 碰撞回調函式 396
13.7.6 為導入模型添加碰撞
效果 396
13.7.7 關節的簡介 398
13.7.8 單擺運動的小球 399
13.7.9 布料模擬 399
13.8 渲染到紋理 401
13.8.1 SSAO渲染效果的
實現 401
13.8.2 Bloom渲染效果的
實現 404
13.8.3 顆粒渲染效果的實現 405
13.8.4 色差渲染效果的實現 405
13.8.5 景深渲染效果的實現 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類——
靜態平面形狀 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 案例開發過程 418
14.5 旋轉的陀螺 419
14.5.1 案例運行效果 419
14.5.2 案例開發過程 419
14.6 觸發器——消失的木塊 420
14.6.1 案例運行效果 421
14.6.2 案例開發過程 421
14.7 碰撞過濾——物體碰撞下落 422
14.7.1 案例運行效果 422
14.7.2 案例開發過程 423
14.8 關節 424
14.8.1 關節的父類——
btTypedConstraint類 424
14.8.2 鉸鏈關節——
btHingeConstraint類 424
14.8.3 鉸鏈關節的案例——球落
門開 425
14.8.4 齒輪關節——
btGearConstraint類 427
14.8.5 齒輪關節的案例——
轉動的齒輪 427
14.8.6 點對點關節——
btPoint2PointConstraint
類 429
14.8.7 點對點關節的案例——
懸掛的物體 430
14.8.8 滑動關節——
btSliderConstraint類 432
14.8.9 滑動關節的案例——6個方
向的物體滑動 432
14.8.10 六自由度關節——
btGeneric6DofConstraint
類 434
14.8.11 六自由度關節的案例——
掉落的蜘蛛 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 三角形格線軟體案例 446
14.10.4 繩索軟體案例 448
14.11 本章小結 450
第 15章 線上3D模型互動式編輯
系統 451
15.1 背景以及功能概述 451
15.1.1 開發背景概述 451
15.1.2 系統功能簡介 452
15.2 系統的策劃及準備工作 455
15.2.1 系統策劃 455
15.2.2 資料庫設計 456
15.3 系統架構 457
15.3.1 各個類的簡介 457
15.3.2 系統架構簡介 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 添加監聽腳本 482
15.8 模型導出腳本 486
15.8.1 obj檔案導出腳本 486
15.8.2 stl檔案導出腳本 489
15.9 輔助工具腳本 491
15.9.1 初始化相關腳本 491
15.9.2 監聽相關腳本 496
15.10 系統的最佳化與改進 501
15.11 本章小結 502
