得益於手機廠商爆炸式的配置堆砌與移動互聯時代到來，html在手機上的效果越發豐富，Web開發者已經不知足於2D效果的實現，而把目標放到了更加炫酷的3D效果上。前端
在Web3D百花齊放的今天，和你們簡單探討一下目前主流的3D庫。web
0x1 常見的3D庫編程
01｜Egretjson
官方將Egret定位爲一整套遊戲開發的「遊戲解決方案」，包括遊戲開發框架、開發輔助工具，生態環境相對完善。基於TypeScript進行開發，支持Flash到Egret的高效轉換、跨平臺支持，可打包爲HTML5，以及iOS 和Android平臺原生app。canvas
02｜Three.js瀏覽器
Three.js的定位是一個基於JavaScript 3D庫，但無疑它很是的強大而輕量。從建立簡單的3D動畫到建立交互的3D遊戲，經過暴露簡單的API，將3D內容的開發複雜性降至最低。微信
03｜Pixi.jsapp
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等領域相關的原創優質技術文章：
看小編搬運這麼辛苦，關注一個唄：)