我在2004年將我的3D引擎打包到IE的ActiveX中。遺憾的是，用戶對瀏覽器插件非常反感，這嚴重阻礙了網頁在3D方面的發展。
展覽。雖然在這期間，壹些3D頁遊通過瀏覽器插件取得了不錯的成績，但我壹直認為和端遊沒什麽區別。想玩遊戲的人不會介意下載客戶端，但是網頁是3D的。
用途不僅僅是遊戲。
直到最近，各大瀏覽器廠商都宣布不再支持安裝瀏覽器插件。Unity還聲稱，WebGL將取代WebPlayer和Flash，成為發布到網頁的唯壹方式。現在說這是否預示著3D網頁時代終於到來還為時過早，但至少在技術上，曾經不可逾越的鴻溝已經悄然消失。
去年我的團隊接到壹個項目，做壹個類似91家的模擬裝修軟件。當時只是想做壹個端到端的，有用的Unity4.x後來看到網上DIY系統用WebGL實現的不錯，就想把產品升級到Unity5，試試WebGL導出功能。畢竟這樣的軟件更適合網頁。
目前Unity5的WebGL平臺只是體驗版(預覽版)，功能不全，存在壹些問題。這裏分享壹些我們在項目移植過程中積累的經驗，供大家參考。
壹:js效率
這是我之前最擔心的。我們的產品得益於PhysX的超強效率，實現了動態場景的快速烘焙(間接光線預計算)。PhysX編碼成js後效率如何？實驗結果如下:
不同平臺下兩個場景的烘焙時間。單位(秒)
兩個場景的烘焙結果
Firefox的運行效率是令人滿意的。我們知道Unity使用Mozilla提出的asm.js來提高js的運行效率，但是目前其他瀏覽器還沒有對asm.js進行優化，只是時間問題。除了烘焙功能，其他功能在不同瀏覽器中看不出太大的性能差距。
二:js包裝尺寸
我也擔心這壹點，如果頁面加載後不能立即呈現內容，用戶會失去耐心並關閉頁面。設置所有優化選項後，我們產品導出的包大小如下(壓縮後):
主程序(項目名稱。jsgz): 5.1m
內存初始化包(project name.html.memgz): 2.7m。
內置資源(項目名稱。Datagz): 1m
不得不說還是很大的。字體在內置資源中占很大比例。以後所有界面都可以做成網頁，這樣就可以用瀏覽器字體了。這就是說，主要的壹攬子計劃是
Unity的整個運行時和我們自己的代碼都是編譯在壹起的，這也是它這麽大的原因。我給Unity團隊寫了幾封信，問他們是否可以不放壹些
沒用的模塊編譯，他們說會考慮，但是因為耦合度等原因，應該很難。我不太了解內存初始化包。asm.js可能有必要，希望Unity推出。
這個問題在WebGL正式發布時可以得到改善。
輸出項目包含兩個文件夾，Release和Compressed，只是保持壓縮狀態。生成的。htaccess文件會自動將地址轉移到這個壓縮版本的包中，並在HTTP請求中添加壹個壓縮頭，瀏覽器下載後會自動解壓縮。
三:移動平臺
這是很多人關心的問題。WebGL作為HTML5的壹部分，應該可以在所有平臺上運行吧？但事實是，目前移動平臺對WebGL的支持還不太好，我想進入。
微信就更難了。在這方面，我們的方案是為用戶創建的每個樣板間保存壹系列360度全景圖。分享到微信上後，可以漫遊，但不能編輯。思考這樣壹個方案似乎很重要。
合理，手機屏幕小確實不適合復雜的3D編輯。移動平臺全面支持WebGL後，會有更多適合手機的3D應用出現。
四:圖形界面適配
Unity5終於支持延期了。
底紋，前面那個只能叫延期照明。然而，在當前的WebGL中
在1.0上還是不行，只能用延期照明。我們知道WebGL
1.0對應OpenGL ES 2.0，WebGL 2.0對應OpenGL ES。
3.0，所以把項目適配到WebGL平臺和適配到移動平臺基本是壹樣的。WebGL
2.0的標準剛剛制定，不知道什麽時候會推出支持的瀏覽器，所以目前的適配工作都是基於WebGL。
1.0是目標平臺。除了不使用MRT，我們還需要通過拼接2D切片來實現3D紋理，以及深度。
紋理必須手動編碼為RGBA格式，這太熟悉了。好像是10年前做的。我不禁感嘆這些年實時3D發展這麽慢，好像除了遊戲真的沒有什麽好的應用了。
五:材質和全局照明
Unity5的新材質系統沒有太多可調參數，所以還是用我們原來的材質，也是統壹材質。新添加的倒影
Probe感覺很初級，就是壹個世界坐標的AABB，不能旋轉。事實上，BPCEM(方塊投影立方體貼圖)
環境
Mapping)可以旋轉，但還是處理不了復雜的戶型，矩形邊界外的倒影很不對。我們的反射方案是基於BPCEM的，增加了壹點光線追蹤。雖然還存在壹些問題，但我對效果還是滿意的。最重要的是它的幀數比SSR(屏幕
空間反射)要高得多。
改進的反射方案
由於樣板間都是用戶自己創建的，我們無法使用Unity自帶的烘焙系統(Enlighten)，傳統烘焙方式生成的光照圖容量太大，根本不適合網絡應用。我們自己的烘焙系統把3D空間分成128x16x128的方塊，然後用壹個3D。
Texture保存每個網格的光照信息，然後通過自定義的渲染路徑將3D光照貼圖添加到其中。
六:編輯綜合管理後臺
管理後臺要實現模型的管理和上傳功能，所以是單純的統壹。
在編輯器中。在這裏我們可以對模型進行CruncherPlugin，對模型對應的商品進行材質調整、命名、分類、定價，最後導出Assetbundle並上傳。Unity強大的編輯器API讓這壹切變得非常容易。
模擬裝修平臺只是網頁3D的壹個應用實例。隨著WebGL的不斷規範和成熟，會有越來越多的非遊戲和實際應用出現。