本書介紹如何使用HTML5相關技術，如CSS3和新興的Web圖形標準WebGL，來創建具有高性能、震撼視覺效果的3D Web應用。書中內容分為兩部分——基礎知識和應用開發技術，不但提供瞭全麵的理論介紹，還包括從簡單3D産品可視化到沉浸式遊戲及交互訓練係統的實踐，適閤轉嚮3D開發的Web開發人員閱讀。

·探索HML5 API及創建3D Web圖形的相關技術，包括WebGL、Canvas和CSS
·使用流行的JavaScript 3D渲染和動畫庫Three.js及Tween.js
·研究3D內容創作流程，創建殺手級3D內容的建模和動畫工具
·介紹構建3D應用的遊戲引擎和框架，包括作者的Vizi框架
·使用示例及支持代碼，創建有多個物體和復雜交互的3D場景
·分析移動瀏覽器中的WebGL 3D應用會遇到的問題

內容簡介

本書全麵講解瞭使用HTML5和WebGL開發3D應用的Web技術，理論與實踐相結閤，涵蓋桌麵和移動兩端。全書分兩部分：基礎知識和應用開發。在詳細介紹開發相關理論、工具、框架和庫的基礎上，作者通過3D産品瀏覽器、遊戲和交互培訓係統等案例，生動講解瞭3D應用開發的全過程。
本書適閤中高級Web及頁遊開發人員閱讀。

作者簡介

Tony Parisi

Web 3D標準的先驅、企業傢、CTO、架構師。VRML和X3D語言的聯閤作者，這兩者已經成為Web 3D圖形的ISO標準。另著有《WebGL入門指南》。

潘徵

網名此方，目前就職於百度FEX前端研發團隊，專注前端復雜應用研發。

目錄

前言　　xi
第一部分　基礎知識
第1章　緒論　2
1．1　HTML5：新型的視覺媒介　4
1．1．1　瀏覽器平颱　4
1．1．2　瀏覽器支持情況　6
1．2　3D圖形的基礎知識　6
1．2．1　什麼是3D　6
1．2．2　3D坐標係　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．1　WebGL基礎　14
2．2　WebGL API　15
2．3　WebGL應用剖析　16
2．4　一個簡單的WebGL示例　16
2．4．1　Canvas 元素和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——一款JavaScript 3D引擎　35
3．1　使用Three．js創建的代錶性項目　35
3．2　Three．js概覽　38
3．2．1　初始化Three．js　40
3．2．2　Three．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　用於優化網格渲染的BufferGeometry　55
4．1．5　從建模軟件包中導入網格數據　56
4．2　場景圖和空間變換的層級結構　57
4．2．1　利用場景圖來管理復雜場景　57
4．2．2　Three．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．1　ShaderMaterial類：編寫你自己的著色器代碼　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．2　requestAnimationFrame()和性能　84
5．1．3　基於幀的動畫和基於時間的動畫　85
5．2　使用程序更新屬性的方式來構建動畫　85
5．3　使用補間來進行動畫過渡　87
5．3．1　插值　87
5．3．2　Tween．js庫　88
5．3．3　緩動　90
5．4　使用關鍵幀來實現復雜動畫　91
5．4．1　Keyframe．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．1　CSS變換　112
6．1．1　使用3D變換　113
6．1．2　添加透視　115
6．1．3　創建變換層級　117
6．1．4　控製背麵渲染　119
6．1．5　CSS變換屬性匯總　122
6．2　CSS過渡　122
6．3　CSS動畫　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來渲染CSS 3D　135
6．5　小結　135
第7章　Canvas：通用2D繪圖　137
7．1　Canvas基礎　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　小結　153
第二部分　應用開發技術
第8　章 3D內容製作流程　156
8．1　3D內容創建過程　156
8．1．1　建模157
8．1．2　紋理映射　157
8．1．3　動畫　158
8．1．4　技術美工　159
8．2　3D建模和動畫工具　160
8．2．1　傳統3D軟件　160
8．2．2　基於瀏覽器的集成環境　164
8．2．3　3D內容倉庫和現成素材　167
8．3　3D文件格式　168
8．3．1　模型格式　168
8．3．2　動畫格式　170
8．3．3　全功能的場景格式　171
8．4　加載3D內容到WebGL應用中　178
8．4．1　Three．js JSON格式　179
8．4．2　Three．js的二進製格式　184
8．4．3　使用Three．js來加載COLLADA場景　185
8．4．4　使用Three．js來加載gITF場景　188
8．5　小結　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：一個基於組件的用於可視化Web應用的框架　198
9．3．1　背景和設計理念　199
9．3．2　Vizi架構　200
9．3．3　Vizi入門　201
9．3．4　一個Vizi應用示例　202
9．4　小結　207
第10章　開發一個簡單的3D應用　209
10．1　設計應用　211
10．2　創建3D 內容　212
10．2．1　導齣Maya場景到COLLADA　213
10．2．2　將COLLADA文件轉換glTF格式　214
10．3　預覽和測試3D內容　214
10．3．1　基於Vizi的預覽工具　214
10．3．2　Vizi查看器類　216
10．3．3　Vizi加載類　217
10．4　將3D集成到應用中　220
10．5　開發3D行為和交互　223
10．5．1　Vizi 場景圖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．1　3D skybox　247
11．3．2　Vizi 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．1　Web應用開發和測試工具　287
12．3．2　打包成Web應用來發布　288
12．4　開發原生/HTML5混閤應用　289
12．4．1　CocoonJS：一種為移動設備構建HTML遊戲及應用的技術　290
12．4．2　使用CocoonJS 組裝應用　292
12．4．3　WebGL混閤開發：問題　298
12．5　移動3D性能　298
12．6　小結　300
附錄　資源　301
作者介紹　311
封麵介紹　311