目 錄 第 1章 HTML5開發(fā)基礎(chǔ)——進入 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 基礎(chǔ)標簽 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基礎(chǔ)語法 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中的基礎(chǔ)圖形 52 1.7 本章小結(jié) 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應(yīng)用 55 2.2.1 WebGL 2.0應(yīng)用案例部署 運行步驟簡介 56 2.2.2 初識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 運算符 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 片元著色器中浮點變量 精度的指定 91 3.2.13 程序的基本結(jié)構(gòu) 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 角度轉(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 浮點數(shù)的打包與解包 函數(shù) 106 3.5 用invariant修飾符避免值變 問題 107 3.6 預處理器 108 3.7 本章小結(jié) 109 第4章 必知必會的3D開發(fā)知識—— 投影及各種變換 110 4.1 矩陣數(shù)學計算工具腳本Matrix 110 4.2 攝像機的設(shè)置 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 旋轉(zhuǎn)變換 121 4.4.4 縮放變換 123 4.4.5 基本變換的實質(zhì) 124 4.5 所有變換的完整流程 126 4.6 繪制方式 129 4.6.1 幾種繪制方式概述 129 4.6.2 點與線段繪制方式 130 4.6.3 三角形條帶與扇面繪制 方式 132 4.7 設(shè)置合理的視角 136 4.8 卷繞和背面剪裁 141 4.8.1 基本知識 141 4.8.2 簡單的案例 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 點法向量和面法向量 163 5.5 光照的每頂點計算與每片元 計算 165 5.6 本章小結(jié) 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紋理技術(shù) 184 6.4.1 基本原理 184 6.4.2 簡單的案例 186 6.5 多重紋理與過程紋理 188 6.5.1 案例概述 188 6.5.2 將2D紋理映射到球面上的 策略 189 6.5.3 案例的場景結(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è)計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 本章小結(jié) 212 第8章 混合與霧 213 8.1 混合技術(shù) 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 本章小結(jié) 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 地形設(shè)計工具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 本章小結(jié) 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 本章小結(jié) 262 第 11章 Three.js引擎基礎(chǔ) 263 11.1 Three.js概述 263 11.1.1 Three.js簡介 263 11.1.2 Three.js效果展示 264 11.2 初識Three.js應(yīng)用 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 材質(zhì) 283 11.4 模型加載 291 11.4.1 Three.js中支持的模型 文件格式 291 11.4.2 導入三維格式文件 296 11.4.3 骨骼動畫的加載 300 11.5 貼圖的使用 306 11.6 本章小結(jié) 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 本章小結(jié) 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應(yīng)用 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 材質(zhì) 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 關(guān)節(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 本章小結(jié) 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 案例的基本結(jié)構(gòu) 414 14.3.3 介紹主要方法 415 14.4 多種形狀剛體的碰撞 417 14.4.1 案例運行效果 417 14.4.2 案例開發(fā)過程 418 14.5 旋轉(zhuǎn)的陀螺 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 關(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)動的齒輪 427 14.8.6 點對點關(guān)節(jié)—— btPoint2PointConstraint 類 429 14.8.7 點對點關(guān)節(jié)的案例—— 懸掛的物體 430 14.8.8 滑動關(guān)節(jié)—— btSliderConstraint類 432 14.8.9 滑動關(guān)節(jié)的案例——6個方 向的物體滑動 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 交通工具的案例—— 移動的小車 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)功能簡介 452 15.2 系統(tǒng)的策劃及準備工作 455 15.2.1 系統(tǒng)策劃 455 15.2.2 數(shù)據(jù)庫設(shè)計 456 15.3 系統(tǒng)架構(gòu) 457 15.3.1 各個類的簡介 457 15.3.2 系統(tǒng)架構(gòu)簡介 459 15.4 服務(wù)器端相關(guān)類 460 15.5 模型編輯頁面文件 464 15.6 管理腳本 470 15.6.1 矩陣管理腳本 470 15.6.2 材質(zhì)管理腳本 474 15.7 工具腳本 478 15.7.1 顏色拾取腳本 478 15.7.2 攝像機旋轉(zhuǎn)腳本 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 初始化相關(guān)腳本 491 15.9.2 監(jiān)聽相關(guān)腳本 496 15.10 系統(tǒng)的優(yōu)化與改進 501 15.11 本章小結(jié) 502