前言
第一部分基礎知識
第1章緒論2
1.1HTML5：新型的視覺媒介4
1.1.1瀏覽器平台4
1.1.2瀏覽器支持情況6
1.23D圖形的基礎知識6
1.2.1什麼是3D6
1.2.23D坐標系7
1.2.3網格、多邊形與頂點8
1.2.4材質、紋理與光源9
1.2.5變換與矩陣9
1.2.6相機、透視、視口與投影10
1.2.7着色器11
第2章WebGL：實時3D渲染13
2.1WebGL基礎14
2.2WebGL API15
2.3WebGL應用剖析16
2.4一個簡單的WebGL示例16
2.4.1Canvas元素和WebGL繪圖上下文17
2.4.2視口18
2.4.3緩沖、緩沖數組和類型化數組18
2.4.4矩陣19
2.4.5着色器20
2.4.6繪制圖元22
2.5創建3D幾何體23
2.6添加動畫27
2.7使用紋理映射28
2.8小結34
第3章Three.js——一款JavaScript3D引擎35
3.1使用Three.js創建的代表性項目35
3.2Three.js概覽38
3.2.1初始化Three.js40
3.2.2Three.js工程結構40
3.3一個簡單的Three.js程序41
3.3.1創建渲染器43
3.3.2創建場景43
3.3.3運行循環的實現45
3.3.4為場景添加光照46
3.4小結48
第4章Three.js中的圖形和渲染49
4.1幾何圖形和網格49
4.1.1預置的幾何形狀類型49
4.1.2路徑、形狀和擠出50
4.1.3幾何形狀基礎類52
4.1.4用於優化網格渲染的BufferGeometry55
4.1.5從建模軟件包中導入網格數據56
4.2場景圖和空間變換的層級結構57
4.2.1利用場景圖來管理復雜場景57
4.2.2Three.js中的場景圖57
4.2.3平移、旋轉和縮放的表示61
4.3材質61
4.3.1標准網格材質61
4.3.2使用多重紋理增添逼真效果63
4.4光源67
4.5陰影69
4.6着色器73
4.6.1ShaderMaterial類：編寫你自己的着色器代碼74
4.6.2在Three.js中使用GLSL着色器代碼75
4.7渲染78
4.7.1后處理和多道渲染79
4.7.2延遲渲染80
4.8小結80
第5章3D動畫81
5.1使用requestAnimationFrame（）來驅動動畫82
5.1.1在你的應用中使用requestAnimationFrame（）83
5.1.2requestAnimationFrame（）和性能84
5.1.3基於幀的動畫和基於時間的動畫85
5.2使用程序更新屬性的方式來構建動畫85
5.3使用補間來進行動畫過渡87
5.3.1插值87
5.3.2Tween.js庫88
5.3.3緩動90
5.4使用關鍵幀來實現復雜動畫91
5.4.1Keyframe.js——一個簡單的幀動畫通用庫92
5.4.2使用關鍵幀創建關節動畫94
5.5使用曲線和路徑創建平滑自然的運動96
5.6使用變形目標來創建人物和面部動畫99
5.7使用蒙皮來構建角色動畫100
5.8使用着色器來進行動畫104
5.9小結109
第6章CSS3：高級頁面效果110
6.1CSS變換112
6.1.1使用3D變換113
6.1.2添加透視115
6.1.3創建變換層級117
6.1.4控制背面渲染119
6.1.5CSS變換屬性匯總122
6.2CSS過渡122
6.3CSS動畫127
6.4挑戰CSS的極限130
6.4.1渲染3D物體130
6.4.2渲染3D環境132
6.4.3使用CSS自定義濾鏡來實現高級着色器效果134
6.4.4用Three.js來渲染CSS3D135
6.5小結135
第7章Canvas：通用2D繪圖137
7.1Canvas基礎137
7.1.1Canvas元素和2D繪圖上下文138
7.1.2Canvas API的功能139
7.2使用Canvas API來渲染3D144
7.3基於Canvas渲染的3D庫147
7.3.1K3D147
7.3.2Three.js的Canvas渲染148
7.4小結153
第二部分應用開發技術
第8章3D內容制作流程156
8.13D內容創建過程156
8.1.1建模157
8.1.2紋理映射157
8.1.3動畫158
8.1.4技術美工159
8.23D建模和動畫工具160
8.2.1傳統3D軟件160
8.2.2基於瀏覽器的集成環境164
8.2.33D內容倉庫和現成素材167
8.33D文件格式168
8.3.1模型格式168
8.3.2動畫格式170
8.3.3全功能的場景格式171
8.4加載3D內容到WebGL應用中178
8.4.1Three.js JSON格式179
8.4.2Three.js的二進制格式184
8.4.3使用Three.js來加載COLLADA場景185
8.4.4使用Three.js來加載gITF場景188
8.5小結189
第9章3D引擎和框架190
9.13D框架概念191
9.1.1什麼是框架191
9.1.2WebGL框架需求192
9.2WebGL框架概況194
9.2.1游戲引擎194
9.2.2展示框架196
9.3Vizi：一個基於組件的用於可視化Web應用的框架198
9.3.1背景和設計理念199
9.3.2Vizi架構200
9.3.3Vizi入門201
9.3.4一個Vizi應用示例202
9.4小結207
第10章開發一個簡單的3D應用209
10.1設計應用211
10.2創建3D內容212
10.2.1導出Maya場景到COLLADA213
10.2.2將COLLADA文件轉換glTF格式214
10.3預覽和測試3D內容214
10.3.1基於Vizi的預覽工具214
10.3.2Vizi查看器類216
10.3.3Vizi加載類217
10.4將3D集成到應用中220
10.5開發3D行為和交互223
10.5.1Vizi場景圖API方法：findNode（）和map（）223
10.5.2使用Vizi.FadeBehavior來動畫透明度225
10.5.3使用Vizi.RotateBehavior來自動旋轉內容227
10.5.4使用Vizi.Picker來實現鼠標懸停時顯示信息227
10.5.5使用用戶界面來控制動畫229
10.5.6使用顏色選擇器來改變顏色230
10.6小結232
第11章開發一個3D環境233
11.1創建環境素材235
11.2預覽和測試環境236
11.2.1以第一人稱模式預覽場景237
11.2.2檢查場景圖237
11.2.3檢查對象屬性240
11.2.4顯示邊界框242
11.2.5預覽多個對象244
11.2.6使用預覽工具來查找場景中的其他問題246
11.3使用skybox創建一個3D背景247
11.3.13D skybox247
11.3.2Vizi skybox對象248
11.4集成3D內容到應用中250
11.4.1加載和初始化場景250
11.4.2加載和初始化車模型253
11.5實現第一人稱導航255
11.5.1相機控制器256
11.5.2第一人稱控制器中的數學257
11.5.3鼠標視角258
11.5.4簡單碰撞檢測259
11.6使用多個相機260
11.7創建定時的動畫過渡262
11.8對象行為腳本263
11.8.1基於Vizi.Script實現自定義組件264
11.8.2駕駛車的控制器腳本264
11.9給環境添加聲音270
11.10渲染動態紋理272
11.11小結276
第12章開發移動3D應用278
12.1移動3D平台278
12.2為移動瀏覽器開發280
12.2.1增加觸摸支持281
12.2.2在桌面版Chrome上調試移動功能285
12.3創建Web應用287
12.3.1Web應用開發和測試工具287
12.3.2打包成Web應用來發布288
12.4開發原生／HTML5混合應用289
12.4.1CocoonJS：一種為移動設備構建HTML游戲及應用的技術290
12.4.2使用CocoonJS組裝應用292
12.4.3WebGL混合開發：問題298
12.5移動3D性能298
12.6小結300
附錄資源301
作者介紹311
封面介紹311
