3D探索——Web 3D哪家強？

得益於手機廠商爆炸式的配置堆砌與移動互聯時代到來，html在手機上的效果愈加豐富，Web開發者已經不滿足於2D效果的實現，而把目標放到了更加炫酷的3D效果上。

在Web3D百花齊放的今天，和大家簡單探討一下目前主流的3D庫。

0x1 常見的3D庫

01｜Egret

官方將Egret定位為一整套遊戲開發的“遊戲解決方案”，包括遊戲開發框架、開發輔助工具，生態環境相對完善。基於TypeScript進行開發，支援Flash到Egret的高效轉換、跨平臺支援，可打包為HTML5，以及iOS 和Android平臺原生app。

02｜Three.js

Three.js的定位是一個基於JavaScript 3D庫，但無疑它非常的強大而輕量。從建立簡單的3D動畫到建立互動的3D遊戲，通過暴露簡單的API，將3D內容的開發複雜性降至最低。

03｜Pixi.js

Pixi與Three.js一樣，定義為“2D WebGL renderer with canvas fallback”。它只是一款輕量的2D Webgl庫，但同樣可以根據它的API來開發遊戲，將2D WebGL開發複雜性降到最低。

04｜Layabox

Layabox與白鷺一樣，也是成熟的整套遊戲開發的”遊戲解決方案“，同時支援2D、3D、VR的H5引擎，專為高效能遊戲而設計，支援ActionScript 3.0，TypeScript，JavaScript程式語言。開發一次，釋出flash，HTML5，mobile。

05｜Hilo

Hilo 是阿里巴巴集團開發的一款HTML5跨終端遊戲解決方案，它可以幫助開發者快速建立HTML5遊戲,多種渲染方式, 提供DOM，Canvas，Flash，WebGL等多種渲染方案。

06｜Cocos2d

Cocos2d是老牌的遊戲引擎，採用原生JavaScript語言，可釋出到包括Web平臺，iOS，Android，Windows Phone8，Mac，Windows等平臺。

07｜釐米秀引擎

釐米秀引擎是QQ輕遊戲使用的引擎bricks，為騰訊自研的遊戲引擎，指令碼層使用JavaScript。bricks引擎支援原生、WebGL，Canvas等多種渲染以及開發方式，開發者可以直接呼叫bricks引擎，也可以使用第三方遊戲引擎封裝的進行開發。

 

0x2 基本對比

我們對上述各個框架、引擎在2D Canvas、2D WebGL、3D WebGL、2D效能、3D效能等方面做一下對比，其大致資料如圖所示：

可以發現，其中白鷺、Three.js、Pixi.js、Layabox、釐米秀效能最好，但本文主要探討的是3D相關開發，所以我們選取Three.js、Layabox兩個高效能庫/引擎進行對比（Egret引擎過重暫不考慮）。所以接下來主要討論Three.js、Layabox的各方面對比。

 

0x3 Three.js Vs Layabox

01｜庫體積

首先我們對比下下這兩個庫體積，我們發現，Three.js在體積上遠遠優於Layabox，但Layabox極限精簡Gzip後也僅有300K，也算比較輕量級。在JS資源體積這一點上Three.js得一分。

02｜模型體積

我們準備了兩個模型，一個是比較簡單的狼，另一個則是面較多的巨龍。如下圖所示：

 

我們分別將其匯出為Three.js、Layabox適用的檔案，Three.js的模型採用的是json檔案，而Layabox則是自己的二進位制檔案。我們將匯出後的模型檔案體積進行一下對比,可以發現在未Gzip之前，Layabox對比Three.js還是很有優勢的，但是一旦開啟Gzip，Three.js在模型體積就遠遠小於Layxbox了，而Layxbox匯出的二進位制模型檔案無法Gzip比較吃虧，Three.js再得一分。

但在Three.js匯出到json格式這一步中，踩坑無數。可能設計師做出來是這樣子：

而你將這個模型匯出到Blender中卻成了這樣：

為啥呢？？這不科學啊！

因為Three.js匯出模型依賴於Blender，所以首先需要將模型匯入到Blender中，這一步就非常依賴於設計師在構建模型時的構建方式，經過血與淚的洗禮，大概總結了有以下幾點雷區：

• 控制模型面數

• 禁用第三方外掛

• 需提供展 UV 貼圖

當然這三點僅僅是雷區中的一點點，更多的是需要前端開發者與設計師一起對模型進行磨合，因為1000個設計師有1000中建模方法，所以還是要在實踐中不斷的磨合、踩坑，才能最終匯出完美的模型。

而Layaxbox藉助於Untiy可以輕鬆的將模型匯出來，所以Layabox在模型匯出這裡得1分。

03｜實現難度

這一步就是要將3D模型展示在網頁中了，Three.js與、Layabox都提供了相對應的介面與方法，能夠讓我們快速的將匯出的資料展示在頁面上。

ThreeJS中提供了許多種類的Loader，分別針對不同的使用需求。比如，JSONLoader針對的是.json格式的模型，OBJLoader針對的是.obj格式的模型等等。翻閱網上資料的時候還可以看到SceneLoader的蹤影，這就是用來載入整個場景的.json格式檔案的。可是在ThreeJS的新版本中，SceneLoader已經被廢棄，取而代之的是更為智慧的ObjectLoader。ObjectLoader可以判斷匯出的模型到底是什麼種類，從而將它們轉化為ThreeJS中的對應物件便於開發者使用。

當然Json格式無疑是最為輕量最為簡潔的匯出格式，並且可以很好的支援骨骼動畫，下圖為我們為狼模型編寫的Three.js  js程式碼：

而Layzbox則簡便很多，按照官方給出的Api，直接傳入對應的ls檔案，就可以載入之前匯出的場景。ls檔案包含了整個3D場景：模型、材質、貼圖、動畫、光照貼圖等等，可以理解與上述Three.js檔案匯出的Json相同，僅僅是檔案的結構不同。

綜合這兩段程式碼可以看出，Three.js需要手動的建立3D場景中的光源、場景、攝像機等等，但通過Layxbox通過Unity匯出的模型僅僅通過匯出的配置檔案即可建立光源、場景、攝像機。但如果你想對3D場景做更多的定製化、提高場景可控性的話，Layabox也需要手動的新增場景、光源，但與Three.js不同的是，Layabox提供完整的中文Api參考與例項參考，而Three.js 的最新Api則是英文，並且個別Api文件會存在不適用的情況（因為Three.js更新的太快了，某些調整導致Api變更卻又沒有更新Api文件），所以單純就易上手一點來看，Layabox再得一分，對新手快速開發會更友好一點。

 

04｜效能對比

效能恐怕是開發者們最為看重的一點了，通過上面的簡單對比我們可以知道，Three.js與Layabox在3D WebGL中的得分都為滿分10分，那麼都為10分的他們是否也存在細微的差異？現在我們仔細對比下兩款框架/引擎在Web中的效能表現吧。

1. 幀率

首先對比下這它們在Web的幀率，Three.js我們藉助stats.js來檢測幀率，而Layabox自帶幀率監控工具。

因為是效能測試，所以我們測試模型最複雜的龍模型，通過工具可以看到它們的幀率都可以穩定在60FPS，而60FPS無疑是一個非常棒的幀率。

2. 記憶體佔用

記憶體佔用同樣也是一個非常重要的指標，因為手機不比PC電腦，記憶體資源比較有限，如果記憶體佔用的越少則意味著它在更多的手機上能流暢的展示，我們通過Chrome工具與Android studio模擬器檢測頁面的記憶體佔用。

首先是Chrome工作管理員（開啟方式：瀏覽器右上角選項卡→更多工具→工作管理員），通過這個工具我們可以觀察兩個頁面佔用的記憶體情況，從圖中我們可以發現，Three.js與Layabox的記憶體佔用都在84M左右，差距可以忽略。

然後我們在進入Android studio開啟一個全新的Android模擬器，使用原生的Web view開啟上述兩個頁面，資料如下，我們可以發現他們記憶體僅有3M差距。

綜合上面兩次測試，我們可以發現Three.js與Layabox在Web中幀率、記憶體佔用差距都不大，並且效能都不錯，足以滿足日常的輕量3D開發。所以Three.js與Layabox各得1分。

 

0x4 總結

經過上面一系列的分析，Three.js與Layabox其最後比分為3:3持平，各有優劣。對於輕量的3D開發，它們開發門檻都不算高，其中Three.js整體的資源體積小於Layabox，而Layabox在模型匯出側優於Three.js。條條大路通羅馬，大家可以根據各自需求來具體選擇。

歡迎關注"騰訊DeepOcean"微信公眾號,每週為你推送前端、人工智慧、SEO/ASO等領域相關的原創優質技術文章：

看小編搬運這麼辛苦，關注一個唄：)