WebGL

技術(shù)經(jīng)驗分享OAK3DWebGL技術(shù)經(jīng)驗分享1什么是WEBGLWebGL是用于在網(wǎng)頁中實現(xiàn)高效圖形繪制的前端標(biāo)準(zhǔn)實時的3D更快的2DWebGL是HTML5的一部分什么是WEBGLWebGL是用于在網(wǎng)頁中實現(xiàn)高效圖形繪制的2什么是WEBGLWebGL是一份標(biāo)準(zhǔn)化組織、瀏覽器廠商與開發(fā)者訂立的三方合同WebGL是一套基于JavaScript的API接口什么是WEBGLWebGL是一份標(biāo)準(zhǔn)化組織、瀏覽器廠商與開3WEBGL能做什么無客戶端/無插件的網(wǎng)頁3D平臺高質(zhì)量的網(wǎng)頁3D內(nèi)容可與用戶三維交互的應(yīng)用WEBGL能做什么無客戶端/無插件的網(wǎng)頁3D平臺4WEBGL能做什么網(wǎng)頁游戲三維產(chǎn)品在線展示商用/科學(xué)數(shù)據(jù)可視化三維結(jié)構(gòu)的網(wǎng)頁在線廣告/電影宣傳等藝術(shù)設(shè)計領(lǐng)域WEBGL能做什么網(wǎng)頁游戲5為什么是WEBGLFlash?Unity3D?CustomPlugin?WebGL!NativeClientinFuture!為什么是WEBGLFlash?6WEBGL運(yùn)行結(jié)構(gòu)BrowserWeb3D

AppWebGLAPIWebGLImplementationOpenGLOpenGLESDirectXOtherDriverWEBGL運(yùn)行結(jié)構(gòu)BrowserWeb3DAppWebGL7開發(fā)環(huán)境你喜歡的任何一款文本編輯器開發(fā)環(huán)境你喜歡的任何一款文本編輯器8調(diào)試環(huán)境FireBugforFirefoxChromeDeveloperToolsWebGLInspectorOperaDragonfly（forMobilePlatform）gl.getError調(diào)試環(huán)境FireBugforFirefox93D程序結(jié)構(gòu)CreateCanvasInitWebGLLoadResourceDrawCompileShaderUpdateLogic3D程序結(jié)構(gòu)CreateCanvasInitWebGLL10加載模型/紋理資源WebGL不具備編輯功能WebGL無默認(rèn)加載格式加載模型/紋理資源WebGL不具備編輯功能11加載模型/紋理資源創(chuàng)建資源：3dsMaxMayaBlender其它模型編輯工具逆向工程工具

加載模型/紋理資源創(chuàng)建資源：12加載模型/紋理資源開放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary3D領(lǐng)域無放之四海皆合適的資源格式選擇適合你的應(yīng)用的加載模型/紋理資源開放模型格式：Collada,FBX,13加載模型/紋理資源開放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary加載模型/紋理資源開放模型格式：Collada,FBX,14加載模型/紋理資源紋理格式：jpg,png,bmp,gif紋理尺寸：Powerof2紋理限制：最好不超過2048紋理加載方式：Image,Canvas,Video,Array加載模型/紋理資源紋理格式：jpg,png,bmp,g15一點(diǎn)心得體會注意Js和GPU端負(fù)載平衡傳統(tǒng)3D開發(fā)經(jīng)驗未必適用常見誤區(qū)：3D開發(fā)，瓶頸自然在GPU端一點(diǎn)心得體會注意Js和GPU端負(fù)載平衡16一點(diǎn)心得體會小心設(shè)計你的系統(tǒng)提防GarbageCollection一點(diǎn)心得體會小心設(shè)計你的系統(tǒng)17一點(diǎn)心得體會確保你的程序使用的資源和能力沒有超出一般范圍Attribute<=8Uniform<=256Varying<=8TextureSize<=2048一點(diǎn)心得體會確保你的程序使用的資源和能力沒有超出一般范圍18一點(diǎn)心得體會在Mobile平臺測試你的程序OperaMobileFirefoxMobileUC(部分支持)一點(diǎn)心得體會在Mobile平臺測試你的程序19怎樣學(xué)習(xí)一些基本數(shù)學(xué)知識高等數(shù)學(xué)中的立體幾何部分線性代數(shù)中的矩陣部分怎樣學(xué)習(xí)一些基本數(shù)學(xué)知識20怎樣學(xué)習(xí)加一點(diǎn)點(diǎn)計算機(jī)圖形學(xué)基礎(chǔ)三維空間的矩陣變換透視/正交投影原理Phong光照模型怎樣學(xué)習(xí)加一點(diǎn)點(diǎn)計算機(jī)圖形學(xué)基礎(chǔ)21怎樣學(xué)習(xí)跟WebGL實例教程學(xué)習(xí)熟悉WebGL接口上手實踐怎樣學(xué)習(xí)跟WebGL實例教程學(xué)習(xí)22參考資料3D基礎(chǔ)部分3D游戲大師編程技巧–AndreLaMotheRealtimeRendering–TomasAkenine-MollerGPUGemsShaderX參考資料3D基礎(chǔ)部分23參考資料WebGL相關(guān)參考資料WebGL相關(guān)24參考資料Demo參考資料Demo25參考資料第三方框架和工具Oak3DThree.jsGLGEC3DLAmmo.js：

一個JS物理引擎jDataView：ParseBinaryDataRenderMonkey:Shader編輯工具Emscripten：一個JS轉(zhuǎn)換工具參考資料第三方框架和工具26謝謝Q&A謝謝Q&A27為更好滿足學(xué)習(xí)和使用需求，課件在下載后自由編輯，請根據(jù)實際情況進(jìn)行調(diào)整Thankyouforwatchingandlistening.Ihopeyoucanmakegreatprogress為更好滿足學(xué)習(xí)和使用需求，課件在下載后自由編輯，請根據(jù)實際情28WebGL

技術(shù)經(jīng)驗分享OAK3DWebGL技術(shù)經(jīng)驗分享29什么是WEBGLWebGL是用于在網(wǎng)頁中實現(xiàn)高效圖形繪制的前端標(biāo)準(zhǔn)實時的3D更快的2DWebGL是HTML5的一部分什么是WEBGLWebGL是用于在網(wǎng)頁中實現(xiàn)高效圖形繪制的30什么是WEBGLWebGL是一份標(biāo)準(zhǔn)化組織、瀏覽器廠商與開發(fā)者訂立的三方合同WebGL是一套基于JavaScript的API接口什么是WEBGLWebGL是一份標(biāo)準(zhǔn)化組織、瀏覽器廠商與開31WEBGL能做什么無客戶端/無插件的網(wǎng)頁3D平臺高質(zhì)量的網(wǎng)頁3D內(nèi)容可與用戶三維交互的應(yīng)用WEBGL能做什么無客戶端/無插件的網(wǎng)頁3D平臺32WEBGL能做什么網(wǎng)頁游戲三維產(chǎn)品在線展示商用/科學(xué)數(shù)據(jù)可視化三維結(jié)構(gòu)的網(wǎng)頁在線廣告/電影宣傳等藝術(shù)設(shè)計領(lǐng)域WEBGL能做什么網(wǎng)頁游戲33為什么是WEBGLFlash?Unity3D?CustomPlugin?WebGL!NativeClientinFuture!為什么是WEBGLFlash?34WEBGL運(yùn)行結(jié)構(gòu)BrowserWeb3D

AppWebGLAPIWebGLImplementationOpenGLOpenGLESDirectXOtherDriverWEBGL運(yùn)行結(jié)構(gòu)BrowserWeb3DAppWebGL35開發(fā)環(huán)境你喜歡的任何一款文本編輯器開發(fā)環(huán)境你喜歡的任何一款文本編輯器36調(diào)試環(huán)境FireBugforFirefoxChromeDeveloperToolsWebGLInspectorOperaDragonfly（forMobilePlatform）gl.getError調(diào)試環(huán)境FireBugforFirefox373D程序結(jié)構(gòu)CreateCanvasInitWebGLLoadResourceDrawCompileShaderUpdateLogic3D程序結(jié)構(gòu)CreateCanvasInitWebGLL38加載模型/紋理資源WebGL不具備編輯功能WebGL無默認(rèn)加載格式加載模型/紋理資源WebGL不具備編輯功能39加載模型/紋理資源創(chuàng)建資源：3dsMaxMayaBlender其它模型編輯工具逆向工程工具

加載模型/紋理資源創(chuàng)建資源：40加載模型/紋理資源開放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary3D領(lǐng)域無放之四海皆合適的資源格式選擇適合你的應(yīng)用的加載模型/紋理資源開放模型格式：Collada,FBX,41加載模型/紋理資源開放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary加載模型/紋理資源開放模型格式：Collada,FBX,42加載模型/紋理資源紋理格式：jpg,png,bmp,gif紋理尺寸：Powerof2紋理限制：最好不超過2048紋理加載方式：Image,Canvas,Video,Array加載模型/紋理資源紋理格式：jpg,png,bmp,g43一點(diǎn)心得體會注意Js和GPU端負(fù)載平衡傳統(tǒng)3D開發(fā)經(jīng)驗未必適用常見誤區(qū)：3D開發(fā)，瓶頸自然在GPU端一點(diǎn)心得體會注意Js和GPU端負(fù)載平衡44一點(diǎn)心得體會小心設(shè)計你的系統(tǒng)提防GarbageCollection一點(diǎn)心得體會小心設(shè)計你的系統(tǒng)45一點(diǎn)心得體會確保你的程序使用的資源和能力沒有超出一般范圍Attribute<=8Uniform<=256Varying<=8TextureSize<=2048一點(diǎn)心得體會確保你的程序使用的資源和能力沒有超出一般范圍46一點(diǎn)心得體會在Mobile平臺測試你的程序OperaMobileFirefoxMobileUC(部分支持)一點(diǎn)心得體會在Mobile平臺測試你的程序47怎樣學(xué)習(xí)一些基本數(shù)學(xué)知識高等數(shù)學(xué)中的立體幾何部分線性代數(shù)中的矩陣部分怎樣學(xué)習(xí)一些基本數(shù)學(xué)知識48怎樣學(xué)習(xí)加一點(diǎn)點(diǎn)計算機(jī)圖形學(xué)基礎(chǔ)三維空間的矩陣變換透視/正交投影原理Phong光照模型怎樣學(xué)習(xí)加一點(diǎn)點(diǎn)計算機(jī)圖形學(xué)基礎(chǔ)49怎樣學(xué)習(xí)跟WebGL實例教程學(xué)習(xí)熟悉WebGL接口上手實踐怎樣學(xué)習(xí)跟WebGL實例教程學(xué)習(xí)50參考資料3D基礎(chǔ)部分3D游戲大師編程技巧–AndreLaMotheRealtimeRendering–TomasAkenine-MollerGPUGemsShaderX參考資料3D基礎(chǔ)部分51參考資料WebGL相關(guān)參考資料WebGL相關(guān)52參考資料Demo參考資料Demo53參考資料第三方框架和工具Oak3DThree.jsGLGEC3DLAmmo.js：

一個JS物理引擎jDataView：