Blend4Web vs Unity: WebGL 的性能比較

簡介

Unity 引擎開發者宣佈於2015年十二月「官方正式支持」WebGL。自此點看來，Unity 可被認爲是 3D Web 領域的競爭對手 。所以能夠對成熟和完備的 Blend4Web 和 Unity 進行有趣的功能比較。

我建立了三個不一樣複雜度的測試應用做爲基準。這些基準專爲兩個引擎同時建立，徹底對稱。他們的場景，對象，紋理，甚至 材質設置幾乎相同。沒有針對任一方引擎有特別的優化或不利之處。使用默認的開箱即用功能。

雖然在某些狀況下，我只能即興。尤爲是，爲了使屏幕分辨率的移動設備上相同，一行相應的 Blend4Web 文件代碼被添加到 Unity HTML 文件中（咱們要公平，對吧？）：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

全部場景和模型都在 Blender 準備，而後通過紋理和導出到引擎中。在某些狀況下，由於他們應該剛好在哪裏，因此我使用 Empty空 物件放置照相機和光源代替(由於這些 Unity 沒法從 blend 文件導入)。

比較基於幾個標準: loading time加載時間，FPS (亦稱 frames per second 幀速率)和 memory consumption內存消耗。此外，加載時間測量兩次: 首先，是一次冷 啓動與瀏覽器緩存清除，而後做爲從緩存中檢索大部分數據的熱啓動。這有助於咱們肯定哪些引擎能夠在瀏覽器啓動場景時， 有更快，更好的效率。您知道的，人們一般不喜歡等過久...

第一個測試

這項和隨後的試驗是在谷歌 Chrome 53 瀏覽器於 PC 機上進行（英特爾 i5-3570，8RAM，GTX 650，屏幕分辨率爲 1680х1050），摩托羅拉 Nexus 6，三星 Galaxy S6 Edge 和 蘋果 iPad 3（Safari 10 瀏覽器）。

這是一個很是簡單的場景，相似於一個遊戲的設計。有幾個模型，幾個光源和基本的動畫。這裏沒有使用先進的技術。

試驗 #1. 加載時間，冷啓動（以秒爲單位，越少越好）。

測試結果已經頗有趣了。咱們可看到，Blend4Web加載場景比 Unity 快得多。

這是由於創建一個 WebGL 項目時，Unity，在默認狀況下，壓縮了文件(至關大)。而後，下載完成後，應用程序在客戶端應用 程序中完成對客戶端提取。固然，這須要額外的時間。別忘了屏幕加載，這增長了更多的幾秒鐘，也與 WebGL 自己的初始化 有關。第二個表（熱啓動）顯示兩個引擎的效率差別特別驚人：

試驗 #1. 加載時間，熱啓動（以秒爲單位，越低越好）。

這是引擎需顯示並加載場景的「確切」時間。Blend4Web 幾乎一瞬間，而其競爭對手則須要六倍的時間。固然，您可經過移除啓動畫面來縮短加載時間，付費版的 Unity 會移除它，但這不太可能使得原本的初始化加快。

試驗 #1. 幀速率 (越多越好)。

你們最喜歡的 FPS 也就是一個很是重要的標準了。沒有人喜歡凍結或停頓。

在這裏，Blend4Web 與 Unity 表現幾乎不相上下，但只有在 PC 機上。在移動設備上的應用，Blend4Web 以 60 FPS「頂到天了」。不幸的是，彷佛沒辦法在移動瀏覽器上限制 FPS。而在臺式機上，谷歌 Chrome 瀏覽器則運行在「--disable-gpu-vsync」 (禁用 GPU 垂直同步) 選項上。

Unity 顯示了一個小不一樣的結果。只有 Galaxy S6 可以取得紮實的成效。蘋果 iPad 3 能只得 9 分，而摩托羅拉設備徹底沒法運 行測試場景。

試驗 #1. 內存消耗，MB（越少越好）。

內存消耗數據是由谷歌 Chrome 桌機瀏覽器裏邊的 Task Manager任務管理器 中取得。正如您所見，這兩款引擎都表現出很好的效果。

說實話，我期待着一個不一樣的圖片來解釋 Unity 應用程序形成的瀏覽器崩潰。但測試沒有顯示出內存消耗的主要差別，至少對 於這個簡單的場景來講。使人驚訝的是，這使得在 Nexus 上的瀏覽器崩潰。

第二個測試

接着，這裏是「海洋中的海島」場景。它還沒有優化，既笨重又肥大。相信我，我沒有作任何事情來使它適合運行在移動裝置上 ！

這個場景最複雜的事是讓兩個引擎看來同樣。這在 Blend4Web 很容易 – 模型和景觀都在 Blender 裏邊創造， 水的材質 和環境 也在裏邊作了，沒有什麼複雜。

但對 Unity 來講，有些問題。首先，我決定不使用 Unity 提供的地形。雕塑和植樹容易且有趣，但這種解決方案儘管很方便，卻可能得多花點時間。因此，我直接從 Blender 導出了一個場景，包含景觀模型和已放置好的對象。這讓我使兩個場景儘量 地類似。

其次，像是樹葉從背面透明方面，基本的 Unity 着色沒法使用雙面材質。我試圖用其餘現成的材質像「樹葉」，但由於某種原 因，它並無幫助。因此我決定不進一步研究，而是發現了在線的第三方 着色材質，這完美的完成個人任務。

但，就讓咱們瞧瞧測試結果吧，由於真是使人震驚！

試驗 #2. 加載時間，冷啓動（以秒爲單位，越少越好）。

試驗 #2. 加載時間，熱啓動（以秒爲單位，越少越好）。

第一件事是，在運行 Unity 應用程序時，Nexus 的瀏覽器再次崩潰。Unity 也表現出很長，幾乎太長，的加載時間。有趣的是 ，這引擎，「冷」和「熱」的啓動時間幾乎沒有區別。Unity 彷佛花費了難以想象的時間準備展現的場景。

試驗 #2. 幀速率 (越多越好)。

這項測試在性能方面也表現出有趣的結果。兩個引擎在 Galaxy 設備上顯示幾乎相同的 FPS 幀數，但在 PC上的差別很是顯着。 有趣的是，在不一樣的引擎中改變場景的大小也會對 FPS 帶來不一樣的影響。當從相機看着島上縮小退後時，Unity 到達最高值。 而 Blend4Web 是儘量靠近島時，會表現出最好的結果。看來，這兩個引擎使用的是不一樣的優化方法。該表格顯示最大可能 的 FPS 值時，而這對於特定引擎是最有利的。

如今，關於蘋果 iPad 3 的意外崩潰…是的，您可看到，這已經加入了Nexus 設備。不像摩托羅拉，雖然，它奮勇戰鬥到了極 限，接着在啓動場景以後崩潰了。因此咱們可以測量加載時間，但，在這種狀況下 Unity 應用程序的工做容量原來是零。

也許緣由隱藏在下表中。

試驗 #2. 內存消耗，MB（越少越好）。

第三個測試

我固然也不能錯過物理這塊，因此最後的測試是專爲此而來。場景中有個立方體，是封閉的內部空間，裏邊有幾十個小球。立 方體緩慢旋轉，使球體滾動。

沒有複雜的着色和效果。現場只使用剛體和簡單的碰撞。

像往常同樣，在這個場景裏它花了一些努力使物理現象出現。我想您已經猜出了問題是什麼。

這些球體頑強地試圖離開籠子，並簡單地滾出本身的極限。這現象在兩個引擎都發生。最終，在PC平臺上，我找到一個可接受 的解決方案，全部對象都如預期的那樣，但在移動設備上，這場景看來很好笑。所以，引進了一個新的測試標準:物理穩定，或 「外圍球體」，我是這麼叫它的。現場景跑了一分鐘，而後檢查籠子裏留下了多少球。留下的球越多，越好。

如今...

試驗 #3. 加載時間，冷啓動（以秒爲單位，越少越好）。

試驗 #3. 加載時間，熱啓動（以秒爲單位，越少越好）。

試驗 #3. 幀速率 (越多越好)。

注意在移動設備上 Blend4Web 場景同等的 FPS 數值。這是安全的假設，若是不受垂直同步的限制，該引擎能夠提供多於60 幀以上的數值。這是由於 Blend4Web 能夠在一個單獨分開的線程（處理器）中處理物理過程。據我所知，這是 Unity 沒法作 到的事情。這是得到如此高 FPS 數值的緣由，同時，如您所見，穩定至關性高。

試驗 #3. 物理穩定性（球失去的百分比，越少越好）。

如同我所說，Unity 和 Blend4Web 在 PC 平臺上的表現都很好。全部的球體都待在它們該待的地方。

Galaxy S6 （Blend4Web）是在移動設備的領導者，而 iPad 3（Blend4Web）無疑是個局外人。Unity 應用程序於此標準測試下失敗， 但在 PC 平臺除外。

一切的一切，Unity 在 WebGL 的物理表現上，整個留了個很差的印象。加載場景後，屏幕凍結，幾秒鐘 後，它才終於達到了期待已久的 FPS 數值。這固然只在 PC 。在移動設備上，一切都更加地使人沮喪。少少幾秒鐘內大部分的 球體就掉出來了。而後，場景幾乎空了，因此該應用程序可以實現紮實的每秒 60 幀速率。

這麼不靠譜的可能緣由，或許是 Unity 的物理行爲在如下的記憶內存測試結果撒了謊。

試驗 #3. 內存消耗，MB（越少越好）。

與前兩個場景相比，第三個證實了更多的內存消耗，兩個引擎都相同。

Unity 應用程序以一種很是奇怪的方式表現。就在場景啓動後，它消耗了大於 700 Mb 的內存，幾秒鐘後，這個數值降到400 。甭說，這時候，不給力的移動設備已失去了它們全部的球。所以它們的 FPS 數值不許確，由於它們在渲染一個空的立方體， 裏面沒有物件。

如何解釋這種行爲，這我還真不知道，但事實是事實: Unity 在 WebGL 的物理表現沒法給人留下好印象。

結語

測試結果證實有點使人驚訝。我但願這篇文章不只對用戶有幫助，且對開發者也有幫助。

這裏是連接的文件。請注意，Unity 連接實際上有做用，他們只是沒顯示裝載。並請銘記在心，Unity 載入相對慢得多。

測試 #1: Blend4Web | Unity

測試 #2: Blend4Web | Unity

測試 #3: Blend4Web | Unity