3D探索——Web3D哪家強？ | 程式前沿

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

... Cocos2d是老牌的遊戲引擎，採用原生JavaScript語言，可發佈到包括Web ... 程式語言前端開發IOS開發Android開發雲端運算人工智慧伺服器搜尋資料庫軟體開發工具3D探索——Web3D哪家強？2020.08.07程式語言HOME程式語言3D探索——Web3D哪家強？Advertisement騰訊DeepOcean原創文章：dopro.io/web-3d-powe…得益於手機廠商爆炸式的配置堆砌與移動互聯時代到來，html在手機上的效果愈加豐富，Web開發者已經不滿足於2D效果的實現，而把目標放到了更加炫酷的3D效果上。

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

0x1常見的3D庫01｜Egret官方將Egret定位為一整套遊戲開發的“遊戲解決方案”，包括遊戲開發框架、開發輔助工具，生態環境相對完善。

基於TypeScript進行開發，支持Flash到Egret的高效轉換、跨平臺支持，可打包為HTML5，以及iOS和Android平臺原生app。

02｜Three.jsThree.js的定位是一個基於JavaScript3D庫，但無疑它非常的強大而輕量。

從創建簡單的3D動畫到創建交互的3D遊戲，通過暴露簡單的API，將3D內容的開發複雜性降至最低。

03｜Pixi.jsPixi與Three.js一樣，定義為“2DWebGLrendererwithcanvasfallback”。

它只是一款輕量的2DWebgl庫，但同樣可以根據它的API來開發遊戲，將2DWebGL開發複雜性降到最低。

04｜LayaboxLayabox與白鷺一樣，也是成熟的整套遊戲開發的”遊戲解決方案“，同時支持2D、3D、VR的H5引擎，專為高性能遊戲而設計，支持ActionScript3.0，TypeScript，JavaScript編程語言。

開發一次，發佈flash，HTML5，mobile。

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

06｜Cocos2dCocos2d是老牌的遊戲引擎，採用原生JavaScript語言，可發佈到包括Web平臺，iOS，Android，WindowsPhone8，Mac，Windows等平臺。

07｜釐米秀引擎釐米秀引擎是QQ輕遊戲使用的引擎bricks，為騰訊自研的遊戲引擎，腳本層使用JavaScript。

bricks引擎支持原生、WebGL，Canvas等多種渲染以及開發方式，開發者可以直接調用bricks引擎，也可以使用第三方遊戲引擎封裝的進行開發。

 0x2基本對比我們對上述各個框架、引擎在2DCanvas、2DWebGL、3DWebGL、2D性能、3D性能等方面做一下對比，其大致數據如圖所示：可以發現，其中白鷺、Three.js、Pixi.js、Layabox、釐米秀性能最好，但本文主要探討的是3D相關開發，所以我們選取Three.js、Layabox兩個高性能庫/引擎進行對比（Egret引擎過重暫不考慮）。

所以接下來主要討論Three.js、Layabox的各方面對比。

 0x3Three.jsVsLayabox01｜庫體積首先我們對比下下這兩個庫體積，我們發現，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在3DWebGL中的得分都為滿分10分，那麼都為10分的他們是否也存在細微的差異？現在我們仔細對比下兩款框架/引擎在Web中的性能表現吧。

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

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

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

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

然後我們在進入Androidstudio開啟一個全新的Android模擬器，使用原生的Webview打開上述兩個頁面，數據如下，我們可以發現他們內存僅有3M差距。

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

所以Three.js與Layabox各得1分。

 0x4總結經過上面一系列的分析，Three.js與Layabox其最後比分為3:3持平，各有優劣。

對於輕量的3D開發，它們開發門檻都不算高，其中Three.js整體的資源體積小於Layabox，而Layabox在模型導出側優於Three.js。

條條大路通羅馬，大家可以根據各自需求來具體選擇。

目錄0.1.歡迎關注”騰訊DeepOcean”微信公眾號,每週為你推送前端、人工智能、SEO/ASO等領域相關的原創優質技術文章：0.2.看小編搬運這麼辛苦，關注一個唄：)1.相關文章歡迎關注”騰訊DeepOcean”微信公眾號,每週為你推送前端、人工智能、SEO/ASO等領域相關的原創優質技術文章：看小編搬運這麼辛苦，關注一個唄：)相關文章webAR探索和總結http緩存與cdn緩存配置指南淺探Vue組件化思路從零開始造一個“智障”聊天機器人AdvertisementAdvertisement近期文章Swift中的集合（Set）2020.08.11BundlesandPackages2020.08.11iOSWKWebView取消自動選中灰色背景2020.08.11數據結構與算法二叉查找樹平衡(DSW)2020.08.07數據結構與算法二叉查找樹平衡(AVL)2020.08.07數據結構與算法自適應二叉樹2020.08.07數據結構與算法堆2020.08.07數據結構與算法kd二叉樹(基礎)2020.08.07數據結構與算法kd二叉樹(kNN)2020.08.07數據結構與算法表達式二叉樹2020.08.07AdvertisementAdvertisement