目 錄 第 1章 HTML5開發(fā)基礎(chǔ)——進(jìn)入 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的新標(biāo)準(zhǔn) 2 1.2.2 HTML5引入的新特性 3 1.2.3 HTML5現(xiàn)狀 3 1.3 初識HTML5 4 1.3.1 HTML5標(biāo)簽簡介 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 初識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 準(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 對象 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)用案例部署 運(yùn)行步驟簡介 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 運(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章 必知必會的3D開發(fā)知識—— 投影及各種變換 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é)知識 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 基本知識 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 點(diǎn)法向量和面法向量 163 5.5 光照的每頂點(diǎn)計(jì)算與每片元 計(jì)算 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 最近點(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 簡單的案例 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è)計(jì)3D 模型 199 7.2 加載obj文件 200 7.2.1 加載僅有頂點(diǎn)坐標(biāo)與面 數(shù)據(jù)的obj文件 200 7.2.2 加載后自動計(jì)算面法 向量 203 7.2.3 加載后自動計(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 混合基本知識 213 8.1.2 源因子和目標(biāo)因子 214 8.1.3 簡單混合效果的案例 215 8.2 地月系云層效果的實(shí)現(xiàn) 217 8.3 霧 219 8.3.1 霧的原理與優(yōu)勢 219 8.3.2 霧的簡單實(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 簡單的案例 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 非真實(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場景—— 幾種剪裁與測試 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 攝像機(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 骨骼動畫的加載 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 單個物體的多個實(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簡介 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 攝像機(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 精靈與精靈動畫 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 爆炸效果實(shí)現(xiàn) 394 13.7.5 碰撞回調(diào)函數(shù) 396 13.7.6 為導(dǎo)入模型添加碰撞 效果 396 13.7.7 關(guān)節(jié)的簡介 398 13.7.8 單擺運(yùn)動的小球 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物理引擎簡介 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類—— 復(fù)合碰撞形狀類 413 14.3 簡單的物理場景 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)動的齒輪 427 14.8.6 點(diǎn)對點(diǎn)關(guān)節(jié)—— btPoint2PointConstraint 類 429 14.8.7 點(diǎn)對點(diǎn)關(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)的策劃及準(zhǔn)備工作 455 15.2.1 系統(tǒng)策劃 455 15.2.2 數(shù)據(jù)庫設(shè)計(jì) 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 攝像機(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