H5 和 WebGL 3D 開發實戰詳解 H5和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引入的新特性2 
1.2.3 HTML5現狀3 
1.3初識HTML54 
1.3.1 HTML5標籤簡介4 
1.3.2基礎標籤4 
1.3.3格式標籤5 
1.3.4表單標籤10 
1.3.5圖像、鏈接、列表標籤17 
1.3.6表格、元信息等標籤20 
1.3.7 HTML5中的全局屬性26 
1.3.8 HTML5中的事件29 
1.4初識CSS 31 
1.4.1 CSS簡介31 
1.4.2 CSS基礎語法32 
1.4. 3如何插入樣式表33 
1.4.4使用CSS樣式33 
1.5初識JavaScript 40 
1.5.1 JavaScript的名字和版本41 
1.5.2準備使用JavaScript 41 
1.5.3使用語句41 
1.5.4使用變量和類型42 
1.5. 5 JavaScript運算符43 
1.5.6使用數組44 
1.5.7創建自己的JavaScript對象45 
1.5.8常用的JavaScript工具47 
1.6 HTML5Canvas概述47 
1.6.1文檔對像模型（DOM）和Canvas 48 
1.6.2 JavaScript與Canvas 48 
1.6.3 HTML5Canvas版“HelloWorld” 48 
1.6.4 Canvas上的基礎 形50 
1.7本章小結51 
1.8習題52 

第2章初識WebGL 53 
2.1 WebGL概述53 
2.1.1 WebGL簡介53 
2.1.2 WebGL效果展示54 
2.2初識WebGL應用54 
2.2.1 WebGL應用案例部署運行步驟簡介55 
2.2.2初識WebGL應用程序56 
2.3著色器與渲染管線61 
2.3.1 WebGL的渲染管線61 
2.3.2 WebGL中立體物體的構建66 
2.4本章小結68 
2.5習題68 

第3章著色語言69 
3.1著色語言概述69 
3.2著色語言基礎70 
3.2.1數據類型簡介70 
3.2.2數據類型的基本使用73 
3.2.3運算符74 
3.2.4類型轉換76 
3.2.5限定符77 
3.2.6流程控制79 
3.2.7函數的聲明與使用81 
3.2.8片元著色器中浮點變量精度的指定82 
3.2.9程序的基本結構82 
3.3特殊的內建變量83 
3.3.1頂點著色器中的內建變量83 
3.3. 2片元著色器中的內建變量83 
3.4著色語言的內置函數84 
3.4.1角度轉換與三角函數85 
3.4.2指數函數86 
3.4.3常見函數86 
3.4.4紋理採樣函數88 
3.5本章小結89 
3.6習題89 

第4章必知必會的3D開 知識—投影及各種變換91 
4.1矩陣數學計算工具腳本Matrix 91 
4.2攝像機的設置92 
4.3兩種投影方式93 
4.3.1正交投影93 
4.3.2透視投影97 
4.4各種變換100 
4.4.1基本變換的相關數學知識100 
4.4.2平移變換100 
4.4.3旋轉變換102 
4.4.4縮放變換103 
4.4.5基本變換的實質105 
4.5所有變換的完整流程106 
4.6繪製方式109 
4.6.1各種繪製方式概覽109 
4.6.2點與線段繪製方式110 
4.6.3三角形條帶與扇面繪製方式112 
4.7設置合理的視角116 
4.8捲繞和背面剪裁120 
4.8.1基本知識121 
4.8.2一個簡單的案例121 
4.9本章小結123 
4.10習題123 

第5章光照效果125 
5.1曲面物體的構建125 
5.1.1球體的構建原理125 
5.1.2案例效果概覽126 
5.1.3具體開發步驟126 
5.2基本光照效果129 
5.2.1構建球體的原理129 
5.2.2環境光129 
5.2.3散射光131 
5.2.4鏡面光135 
5.2.5三種光照通道的合成138 
5.3定位光與定向光140 
5.4點法向量和麵法向量142 
5 .5光照的每頂點計算與每片元計算144 
5.6本章小結146 
5.7習題146 

第6章紋理映射147 
6.1初識紋理映射147 
6.1.1基本原理147 
6.1.2一個簡單的案例148 
6.2紋理拉伸153 
6.2.1兩種拉伸方式概覽153 
6.2.2不同拉伸方式的案例154 
6.3紋理採樣156 
6.3.1紋理採樣簡介157 
6.3.2最近點採樣157 
6.3.3線性紋理採樣158 
6.3.4 MIN與MAG採樣159 
6.3.5不同紋理採樣方式的案例159 
6.4 mipmap紋理技術161 
6.5多重紋理與過程紋理162 
6.5.1案例概覽162 
6.5.2將2D紋理映射到球面上的策略163 
6.5.3案例的場景結構164 
6.5.4開發過程165 
6.6壓縮紋理的使用167 
6.6.1 ETC壓縮紋理167 
6.6.2 DXT5169 
6.6.3 PVRTC 171 
6.7本章小結172 
6.8習題172 

第7章3D模型加載173 
7.1 obj模型文件概述173 
7.1.1 obj文件的格式173 
7.1.2用3dsMax設計3D模型174 
7.2加載obj文件175 
7.2.1加載僅有頂點坐標與面數據的obj文件175 
7.2.2加載後自動計算面法向量178 
7.2 .3加載後 動計算平均法向量180 
7.2.4加載紋理坐標182 
7.2.5加載頂點法向量184 
7.3本章小結185 
7.4習題185 

第8章混合與霧187 
8.1混合技術187 
8.1.1混合的基本知識187 
8.1.2源因子和目標因子188 
8.1.3簡單混合效果案例189 
8.2地月系雲層效果的實現191 
8.3霧193 
8.3.1霧的原理與優勢193 
8.3.2霧的簡單實現194 
8.4本章小結196 
8.5習題196 

第9章常用3D開發技巧197 
9.1標誌板197 
9.1.1案例效果與基本原理197 
9.1.2開發步驟198 
9.2灰度圖地形201 
9.2.1基本原理201 
9.2.2普通灰度圖地形202 
9.2. 3過程紋理地形205 
9.2.4 mipmap地形206 
9.3天空盒與天空穹207 
9.3.1天空盒207 
9.3.2天空穹209 
9.3.3天空盒與天空穹的使用技巧210 
9.4本章小結211 
9.5習題211 

第10章渲染出更加酷炫的3D場景—幾種剪裁與測試213 
10.1剪裁測試213 
10.1.1基本原理與核心代碼213 
10.1.2一個主次視角的簡單案例213 
10.2模板測試215 
10.2.1基本原理215 
1 0.2.2一個簡單的案例217 
10.3任意剪裁平面218 
10.3.1基本原理218 
10.3.2茶壺被任意平面剪裁的案例218 
10.4本章小結220 
10.5習題220 

第11章Three.js引擎221 
11.1 Three.js概述221 
11.1.1 Three.js簡介221 
11.1.2 Three.js效果展示222 
11.2初識Three.js應用222 
11.3 Three.js基本組件224 
11.3.1場景224 
11.3.2幾何對象226 
11.3.3攝像機228 
11.3 .4光源232 
11.3.5材質239 
11.4模型加載245 
11.4.1 Three.js中支持的模型文件格式246 
11.4.2導入三維格式文件251 
11.4.3骨骼動畫的加載254 
11.5貼圖的使用258 
11.5.1使用紋理貼圖259 
11.5.2使用法向貼圖260 
11.5.3使用凹凸貼圖261 
11.5.4使用光照貼圖製作靜態陰影262 
11.5.5使用高光貼圖264 
11.6粒子系統265 
11.7二次繪製269 
11.7.1認識效果組合器269 
11.7.2 FilmPass通道270 
11.7.3 BloomPass通道271 
11.7.4 DotScreenPass通道272 
11.7.5 ShaderPass通道273 
11.8本章小結276 
11.9習題276 

第12章Egret3D遊戲引擎應用開發 277 
12.1 Egret入門277 
12.1.1 Egret簡介277 
12.1.2 EgretEngine的安裝、部署與使用插件278 
12.1.3使用EgretWing插件調試與開發程序279 
12.1.4 EgretEngine3D簡介281 
12.2 Egret3D入門282 
12.2.1創建3D場景282 
12.2.2使用鼠標事件285 
12.3天空盒與模型加載287 
12.3.1 Egret3D中添加天空盒287 
12.3.2 Egret3D中加載模型288 
12.4 Egret3D中的紋理與燈光291 
12.4.1 Egret3D中的紋理應用291 
12.4 .2 Egret3D中的燈光應用292 
12.5 Egret3D中的骨骼動畫294 
12.5.1導出Egret引擎的骨骼動畫294 
12.5.2使用Egret引擎加載骨骼動畫294 
12.6本章小結296 
12.7習題296 

第13章Ammo物理引擎297 
13.1 Ammo物理引擎概述297 
13.2 Ammo中常用類概述297 
13.2.1 btVector3類—三維向量類298 
13.2.2 btTransform類—變換類298 
13.2.3 btRigidBody類—剛體類299 
13.2.4 btDynamicsWorld類—物理世界類299 
13.2.5 btDiscreteDynamicsWorld類—離散物理世界類300 
13.2.6 btSoftRigidDynamicsWorld類—支持模擬軟體的 物理世界類300 
13.2.7 btCollisionShape類—碰撞形狀類301 
13.2.8 btStaticPlaneShape類—靜態平面形狀301 
13.2.9 btSphereShape類—球體形狀類301 
13.2.10 btBoxShape類—長方體盒碰撞形狀類301 
13.2.11 btCylinderShape類—圓柱形狀類302 
13.2.12 btCapsuleShape類—膠囊形狀類302 
13.2.13 btConeShape類—圓錐形狀類302 
13.2.14 btCompoundShape類—複合碰撞形狀類302 
13.3簡單的物理場景303 
13.3.1案例運行效果303 
13.3.2案例的基本結構303 
13.3.3主要方法的介紹304 
13.4多種形狀剛體的碰撞306 
13.4.1案例運行效果306 
13.4.2案例開發過程307 
13.5旋轉的陀螺308 
13.5.1案例運行效果308 
13.5.2案例開發過程308 
13.6觸發器—消失的箱子309 
13.6.1案例運行效果310 
13.6.2案例開發過程310 
13.7碰撞過濾—物體碰撞下落311 
13.7.1案例運行效果311 
13.7.2案例開發過程312 
13.8關節的介紹313 
13.8.1關節的父類—btTypedConstraint類313 
13.8.2鉸鏈關節 btHingeConstraint類313 
13.8.3鉸鏈關節的案例—球落門開314 
13.8.4齒輪關節—btGearConstraint類316 
13.8.5齒輪關節的案例—轉動的齒輪316 
13.8.6點對點關節—btPoint2PointConstraint類318 
13.8.7點對點關節的案例—懸掛的物體318 
13.8.8滑動關節—btSliderConstraint類320 
13.8.9滑動關節的案例—6個方向的物體滑動321 
13.8.10六自由度關節—btGeneric6DofConstraint類323 
13.8.11六自由度關節的案例—掉落的蜘蛛323 
13.9交通工具類的介紹326 
13.9.1交通工具類—btRaycastVehicle類326 
13.9.2交通工具的案例—移動的小車327 
13.10軟體331 
13.10.1軟體幫助類—btSoftBodyHelps類331 
13.10.2軟布案例332 
13.10.3三角形網格軟體案例334 
13.10.4繩索軟體案例337 
13.11本章小結339 
13.12習題339 

第14章休閒類游戲—極地大作戰341 
14.1背景以及功能概述341 
14.1.1遊戲背景概述341 
14.1.2遊戲功能簡介342 
14.2遊戲的策劃及準備工作343 
14 .2.1遊戲的策劃343 
14.2.2遊戲的準備工作343 
14.3遊戲的架構344 
14.3.1各個腳本簡介344 
14.3.2遊戲架構簡介345 
14.4網頁文件example.html 346 
14.5遊戲相關腳本350 
14.5.1初始化資源腳本350 
14.5.2鍵盤事件監聽腳本354 
14.5.3添加模型腳本356 
14.5.4碰撞檢測腳本360 
14.6遊戲中相關工具類腳本概述363 
14.7遊戲中著色器的開發363 
14.7.1帶有光照的著色器363 
14.7.2不帶有光照的簡單著色器365 
14.8遊戲的優化與改進365 
參考文獻367