webunity3d

⑴ Unity5 WebGL試用手記，網頁3D的時代何時來臨

Unity5正式版發布已經一個多月，相信有很多人特別關注它的WebGL導出功能。其實WebGL並不是一個新東西，早在2012年，各大瀏覽器已經陸
續開始支持WebGL了，一些基於WebGL的3D引擎如Three.js也相繼出現，不過無論是完善程度還是使用門檻，都無法與傳統引擎相比，所以多數
團隊對WebGL還是保持著理性的觀望態度。
我在2004年的時候就曾把自己的3D引擎封裝到IE的ActiveX中。可惜用戶對瀏覽器插件是非
常反感的，這嚴重地阻礙著網頁3D的發展。雖然在這期間，一些3D頁游通過瀏覽器插件取得了不錯的成績，但我一直認為那跟端游沒有什麼區別，想玩游戲的人
是不會介意下載客戶端的，而網頁3D的用途也絕不僅僅是游戲。
直到最近，各大瀏覽器廠商紛紛宣布，未來不再支持瀏覽器插件的安裝，Unity方面也聲稱WebGL將取代WebPlayer和Flash成為發布到網頁的唯一途徑，這是否預示著網頁3D的時代終於來臨還言之尚早，但至少在技術上，曾經難以逾越的鴻溝已悄然消失。
去年，我的團隊接了一個項目，做一個類似91家居的模擬裝修軟體。當時就是想做有端的，用的Unity4.x。後來看到居然在線的DIY系統用WebGL實現的還不錯，就想把產品升級到Unity5並嘗試一下WebGL導出功能，畢竟這樣的軟體還是做到網頁里更適合。
目前Unity5的WebGL平台還只是一個體驗版本（Preview），功能尚未完全且存在一些問題，在這里分享一些我們在項目的移植過程中積累到的經驗，供大家參考借鑒。
一：js效率
這個是我之前最擔心的。我們的產品得益於PhysX的超強效率，實現了動態場景的快速烘焙（間接光預運算），編碼成js之後，PhysX的效率究竟如何？實驗結果如下：

兩個場景在不同平台下的烘焙時間。單位（秒）

兩個場景的烘焙結果

Firefox的運行效率還算令人滿意。我們知道Unity使用的是Mozilla提出的asm.js來提升js的運行效率，而目前其他瀏覽器還未針對asm.js進行優化，不過這是遲早的事。而且除了烘焙功能之外，其他功能在不同的瀏覽器上看不到太大的性能差距。
二：js程序包尺寸
這個我也比較擔心。如果內容無法在頁面載入之後立刻呈現，用戶會失掉耐心從而關閉頁面。把所有優化選項設置好之後，我們的產品導出的程序包尺寸如下（壓縮後）：
主程序（項目名.jsgz）：5.1M
內存初始化包（項目名.html.memgz）：2.7M
內置資源（項目名.datagz）：1M
不
得不說還是很大。內置資源中字體佔了很大的比重，將來可以把全部界面做到網頁里，這樣就可以使用瀏覽器字體，這個還好說，主程序包是把Unity的整個
Runtime加上我們自己的代碼全部編譯到一起所以才那麼大。關於這個我給Unity團隊寫了好幾封信，問他們有沒有可能不要把一些從未用到的模塊編進
去，他們表示會考慮但由於耦合度等原因難度應該不小。內存初始化包我不是很了解，可能是asm.js必備的東西，希望Unity推出WebGL正式版的時
候這個問題能得到改善吧。
輸出的項目包含Release和Compressed兩個文件夾，只需保留Compressed就可以了，生成的.htaccess文件會將地址自動轉向到這個壓縮版本的程序包，並為HTTP請求加上一個壓縮Header，瀏覽器下載完成後會自動解壓。
三：移動平台
這
是很多人關心的問題。作為HTML5的一部分，WebGL理應可以運行在所有平台不是嗎？不過事實就是目前WebGL在移動平台被支持的並不好，想進微信
就更是難上加難。對此我們的方案是為用戶創建的每一個樣板間保存一系列360度全景圖，分享到微信之後可以漫遊，但不能編輯。想想這樣的方案似乎也很合
理，手機那麼小的屏幕實在不適合做復雜的三維編輯工作。等移動平台完全支持WebGL之後，會有更適合手機的3D應用出來。
四：圖形介面適配
Unity5
終於支持了DeferredShading，之前的只能叫DeferredLighting。不過在目前的WebGL
1.0上還是不能用，還是只能用Deferred Lighting。我們知道WebGL 1.0對應的是OpenGL ES
2.0，而WebGL2.0對應的是OpenGL ES
3.0，所以項目適配到WebGL平台，與適配到移動平台基本上是一樣的。WebGL2.0的標准剛剛制定完成，支持的瀏覽器不知何時能推出，所以目前的
適配工作，是以WebGL1.0為目標平台的。除了不能用MRT之外，我們需要把3D
Texture以2D切片拼接的方式實現，還有DepthTexture要手動Encode到RGBA格式，這些工作太熟悉了，好像10年前就在做，不禁
感嘆實時3D這些年發展得真慢，除了游戲之外好像真的沒有什麼太好的應用。
五：材質與全局光照
Unity5新的材質系統，可調的參數並不
多，所以還是用我們原來自己的，也是統一材質。新加的ReflectionProbe感覺很初級，就是世界坐標的一個AABB，都不能旋轉，其實
BPCEM（Box Projected
CubemapEnvironmentMapping）是可以旋轉的，不過還是不能處理復雜戶型，矩形邊界以外的地方反射錯得都很離譜。我們的反射方案是
在BPCEM的基礎上，加了一點點光線跟蹤，雖然還存在一些問題，不過效果我已經很滿意了，最重要的是，它的幀數比SSR（ScreenSpace
Reflection）高得多。

改進後的反射方案

由
於樣板間都是用戶自行創建，我們沒辦法使用Unity自帶的烘焙系統（Enlighten），而且傳統的烘焙方法生成的Lightmap容量太大，根本不
適合網路應用。我們自己的烘焙系統，是將3D空間劃分成128x16x128的方格，然後用一個3DTexture保存每個方格的光照信息，再通過自定義
渲染路徑將3D Lightmap加進去。
六：編輯器集成管理後台
管理後台要實現模型的管理和上傳功能，於是索性將它做到
UnityEditor中。在這里，我們可以對模型進行減面（CruncherPlugin），材質調整，對模型對應的商品進行命名，分類，定價，最後導
出Assetbundle並上傳。Unity強大的編輯器API使這一切變得非常容易。

模擬裝修平台只是網頁3D的一個應用舉例，隨著WebGL不斷的規范和成熟，會有越來越多非游戲類的，有實用價值的應用涌現出來。最後放上我們的演示地址：
http://lib3d.com/Demo/
由於只是WebGL的實驗，所以只放出一個場景漫遊，沒有編輯功能，操作是滑鼠左右鍵拖動加上滾輪縮放。載入和烘焙很慢，請盡量不要用IE或移動端訪問，如果有彈出錯誤，請忽略。

⑵ webgl和unity區別

應用范圍不同：WebGL是一種3D圖形標准，野物它使用JavaScript語言編寫3D圖形應用程序，並且可以橋慎跨平台運行。它具有良好的兼容性，可以在所有主流瀏覽器中運行頌消液，並且性能較好。Unity3D是一個跨平台的游戲開發工具，它使用C#和JavaScript編寫游戲邏輯，支持Windows、Mac、iOS、Android、WebGL等多種平台。

⑶ 如何在Unity3d中實現和網頁數據的交互

Unity3D和網衡早棚頁數據交互的基本原理簡介：

1、Unity3D的游戲引擎是和編輯器集成在一起的，所有它也是一個製作/開發平台。

2、Unity3D是使用JavaScript、C#作為核心腳本語言來驅動事個游戲引擎。

3、平台可以

數據交互：

1、在Unity3D中調用網頁js函數

如果我們在html中有腳本函數;則在u3d中我們可用使用Application.ExternalCall調用js函數，該方法只適合在Web3D環境下使用。該方法支持基本類型的傳遞和數組傳遞，任何類型都會轉換成字元串類型使用。

例子代碼：

Application.ExternalCall("SayHello","Thegamesayshello!);//調用SayHello，傳遞一個字元串

2、在Unity3D中直接執行一段腳本代碼如：

Application.ExternalEval("if(document.location.host!='unity3d.com'){document.location='http://unity3d.com';}");

3、在js中調用Unity3D函數(傳遞消息等)

如果有Unity3D中有一段用JS寫的功能函數：

functionMyFunction(param:String)

{

Debug.Log(param);

}

需要在JS中呼叫這個函數則可以這樣寫：

這里要注意的是MyObject代表Unity3D中的一個場景名稱為MyObject，MyFunction是調用的函數，最後一個字元為傳遞的參數。

與php，jsp等的表單數據交互

與php，jsp等的表單數據交睜租互很可能會是今後用到的主要方式，原理是利用form表彰傳遞數據，下面以php為例來進行說明。

Unity3D可以實現向某個指定頁面發送表單數據然後在php中使用_POST獲取傳遞回來的表彰數據。

比如：$action=$_POST["myform_action"];//定義一個變數$action用來獲取頁面傳遞過來的表單數據

if($action!=""){

echo$action;//如果接收到了數據則列印出數據內容

}

?>

在Unity3D中我們發送數據的代碼如下咐則：

varform=newWWWForm();//定義一個網頁表單

form.AddField("myform_action","Action1");//添加一個表彰欄位名稱為myform_action內容是action1

vardownload=newWWW("www.xxx.com/index.php",form);//發送表單數據到指定網址頁面

假如index.php執行的是資料庫/統計操作，我們就可以對傳遞的數據進行保存讀取或者其他操作了。