本書介紹如何使用HTML5相關(guān)技術(shù)，如CSS3和新興的Web圖形標(biāo)準(zhǔn)WebGL，來創(chuàng)建具有高性能、震撼視覺效果的3D Web應(yīng)用。書中內(nèi)容分為兩部分——基礎(chǔ)知識(shí)和應(yīng)用開發(fā)技術(shù)，不但提供了全面的理論介紹，還包括從簡(jiǎn)單3D產(chǎn)品可視化到沉浸式游戲及交互訓(xùn)練系統(tǒng)的實(shí)踐，適合轉(zhuǎn)向3D開發(fā)的Web開發(fā)人員閱讀。

目錄
 

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