webgl圖庫選型

3D圖庫框架範圍與示例

1、 BabylonJS（適用於小場景,開源;JavaScript、TypeScript）

（一）特色
強大，美觀，簡單和開放的3D渲染體驗。
（二）適用範圍
Babylon.js是一款WebGL開發框架。 適合作中大型項目，尤爲是多種媒體混雜的或者是遊戲項目VR體驗項目
（三）支持格式
glTF，OBJ，STL，.babylon  (經常使用格式)。
（四）優缺點
一、 優勢
功能較爲全面,功能比較豐富、靈活、模型顯示不失真。有微軟背景，有很多的demo，有較詳細的api文檔，有供測試的平臺，有提供3dsmax轉換模型的插件，比three.js成熟；幾經更新
與完善以後，Babylon.js已更新至1.12版本，相比以前的版本，除了不斷的Bug修復以外，Babylon.js還新增了.許多很是牛叉的新特性，並對已有功能進行了完善。更方便快捷地完成光線、輪船紋理、海浪等的3D建模，從而帶來最佳的呈現效果。
2) 缺點
學習難度大、週期長，須要進行大量深刻的學習與研究。另外，在模型文件較大或較多時，瀏覽器打開時會等待較長時間;
中文資料不多，沒有系統的中文教程，如從入門到精通均可以給你講一遍系統的教程，論壇也會被牆，相關的qq羣較少，羣裏的人也很少，因此能真正指導咱們的大牛也比較少。國內資料基本沒有。同Three.js相似，Firefox瀏覽器在本地同時打開多個較大模型時，會提示瀏覽器性能不足問題。另外，模型在100M以上時可能存在沒法加載的現象。.babylon模型預覽，能夠經過官方提供的沙盒地址，經過拖放.babylon文件進行查看。通過測試，發現個別.babylon模型仍難以打開。
⦁ 瀏覽器支持
對目前主流的IE11以上、Chrome和FireFox都支持，本人已在Chrome v 57.0.2970.0和Microsoft EdgeHTML 14.14393測試經過。
⦁ 速度
同Three.js相似，加載大模型時速度較慢。需提供正在載入信息提示，儘量提升用戶體驗。不過Babylon爲了儘量的提升加載速度，提供了工具能夠將.babylon文件轉換成幾個文件，緩式加載以提升顯示速度。
⦁ 運行環境
運行Web端應用，需先在本地搭建應用服務器環境。例如：Apache、Tomcat、JBoss等。
相關網址：
主站：http://www.babyon.js.com/
文檔：http://doc.babylonjs.com/
論壇：http://www.html5gamedevs.com/forum/16-babylonjs/
PlayGround:http://babylonjs-playground.azurewebsites.net/
在線開發工具：http://wow.techbrood.com/fiddle/new
工具：http://doc.babylonjs.com/tutorials/using_the_incremental_loading_system
下載地址：https://github.com/BabylonJS/Babylon.js/tree/master/Exporters
模型預覽：http://sandbox.babylonjs.com/
格式解析： https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md
http://doc.babylonjs.com/generals/file_format_map_(.babylon)
編輯工具：http://materialeditor.raananweber.com/
Shader在線查看(GLSL語言編寫：Vertex Shader和Pixel Shader)：
重點示例
http://www.babylonjs.com/demos/sponza/
http://www.babylonjs.com/demos/mansion/
http://www.babylonjs.com/demos/distraction/
http://www.babylonjs.com/demos/actions/
http://www.babylonjs.com/demos/train/
http://cyos.babylonjs.com/

2、ThreeJS（適用於小場景，開源，JavaScript）

（一）特色
Three.js 是一款 webGL 開源框架，易用、簡單、直觀的方式封裝了 3D 圖形編程中經常使用的對象。在開發中使用了不少圖形引擎的高級技巧，提升了性能。內置了不少經常使用對象和極易上手的工具，功能強大。
（二）適用範圍
能夠作中小型的重表現的Web項目。Three.js以簡單、直觀的方式封裝了3D圖形編程中經常使用的對象。更方便快捷地完成光線、輪船紋理、海浪等的3D建模，從而帶來最佳的呈現效果。
（三）支持格式
stl,obj+mtl+png,FBX，gltf格式（主要格式）
（四） 優缺點
1) 優勢
國內用的比較多，因此中文的資料也會比較多，有比較系統的中文教程如從入門到精通。用的人比較多，因此相關的qq羣較多，羣裏的人也較多，接觸到的大牛應該也會比較多。在WebGL的引入以前已經建立了three.js獨特方便的模塊化渲染接口，並在不用WebGL的狀況下容許它使用SVG和HTML5畫布元素。近些年，瀏覽器的功能愈來愈強大，漸漸得成爲了複雜應用和圖形的平臺。同時，現有大多數瀏覽器實現了對 WebGL 的支持，但要直接使用 WebGL 相關接口進行開發，則須要學習複雜的着色器語言，且開發週期長，不利於項目的快速開發。
面對這種狀況，Three.js 應運而生，它不但對 WebGL 進行了封裝，將複雜的接口簡單化，並且基於面向對象思惟，將數據結構對象化，很是方便咱們開發。Three.js 的發展十分迅速，然而配套的學習材料卻比較匱乏，因而便有了當前的這個課程。
1) 缺點
沒有提供一些基礎建模軟件的插件，好比3dsmax的模型導出插件，雖說提供一些讀3ds格式，fbx格式的場景。要配合更多擴展庫完成，由於你可能會須要聯網通訊功能的封裝、聲音普通控制甚至高級頻譜控制、輸入設備信息的處理等諸多渲染之外的功能。國內學習資料多，但加載速度慢、缺乏碰撞檢測等功能
（五）相關網址
https://threejs.org/
https://threejs.org/examples/
https://www.wjceo.com/blog/threejs/
http://www.yanhuangxueyuan.com/

3、LayaboxJS(layaair底層開發Ar，JS,TS)

 

（一）特色
LayaAir引擎的產品性能已達到原生APP的水準，甚至能夠直接用於開發APP、HTML五、Flash的多端版本產品。裸跑性能堪比APP,支持2D，3D，VR開發。
（二）適用範圍
大型遊戲開發項目與遊戲上市企業，廣告，營銷，教育，應用開發等領域。
（三）格式支持
Spline。
（四）優缺點
1) 優勢
裸跑性能堪比APP 多版本發佈、知名CP首選引擎
極致性能：LayaAir優先使用webgl渲染，若是webgl不可用，自動無縫轉爲canvas渲染，引擎設計過程當中到處以性能爲優先原則，LayaAir是爲裸跑而設計的HTML5引擎。
輕量易用：LayaAir API設計上追求精簡，簡單易用，上手容易，引擎自己很是注意自身大小，是目前同等功能最小的HTML5引擎。
支持多語言開發：LayaAir同時支持ActionScript三、TypeScript、JavaScript三種語言開發HTML使用任意一種本身喜歡的語言開發便可。
功能齊全：同時支持2D，3D，VR、時間軸動畫，緩動、UI系統、粒子動畫、骨骼動畫、物理系統等。提供可視化輔助開發及工具流。LayaAirIDE提供代碼開發工具及可視化編輯器，清晰的工做流，讓美術，策劃，程序緊密配合，提升開發效率。
開源免費：引擎所有開源並託管到github，而且所有無償使用，包括商用。
1) 缺點
有些功能與問題，官方文檔沒提到，網上搜到一樣問題的帖子，卻沒人回答。做爲一個開源免費的引擎，不是每一個問題，官方都能準時解答的，甚至你發個帖子，很長一段時間都沒有一個答案，這時只能本身慢慢摸索一下了。這裏我就把本身遇到的一些小問題及解決思路記錄下來，但願對那些遇到一樣問題的人有幫助。這些問題並不大，卻有點煩人，你明知道實現某個功能可能就是一行代碼的事，卻沒有關於如何使用的說明，這讓人很苦惱。
⦁ 底層技術
關於as/js/ts語言的選擇，演講者表示，LayaAir如今對as的支持最好；不過as畢竟是中止更新的語言，LayaAir之後對它的支持也會慢慢淡化，直至脫鉤。在js和ts之間，演講者建議選擇ts，由於ts的類型健壯，並且ts編譯成js的過程效率很高。
（五）相關網址
https://ldc2.layabox.com/
https://blog.csdn.net/explor8/article/details/51487097
https://blog.csdn.net/wxq_wuxingquan/article/details/53926432
https://www.layabox.com/

4、SceneJS（開源;Lindsay Kay底層開發）

 

（一）特色
它是針對計算機輔助設計的要求。 開源的JavaScript3D引擎，特別適合須要高精度細節的模型需求，好比工程學和醫學上經常使用的高精度模型。
（二）適用範圍
它是針對計算機輔助設計的要求。 開源的JavaScript3D引擎，特別適合須要高精度細節的模型需求，好比工程學和醫學上經常使用的高精度模型。
（三） 支持格式
模型預覽：
http://sandbox.babylonjs.com/
格式解析： https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md
http://doc.babylonjs.com/generals/file_format_map_(.babylon)
編輯工具：
http://materialeditor.raananweber.com/
Shader在線查看(GLSL語言編寫：Vertex Shader和Pixel Shader)：
http://cyos.babylonjs.com/
（四）優缺點
1) 優勢
專門用於快速繪製大量單獨鏈接的對象，而沒有像陰影、反射等遊戲引擎效果。SceneJS的API和JSON類似,它學習起來很簡單。
1) 缺點
相關社羣幾乎沒有，中國不多人用。缺乏碰撞檢測等功能。加載大模型時速度較慢。需提供正在載入信息提示，儘量提升用戶體驗。（可用工具能夠將.babylon文件轉換成幾個文件，緩式加載以提升顯示速度。）Firefox瀏覽器在本地同時打開多個較大模型時，會提示瀏覽器性能不足問題。另外，模型在100M以上時可能存在沒法加載的現象。
（五） 相關網址
http://scenejs.org/
http://slides.com/xeolabs/deck/
https://developer.tizen.org/community/tip-tech/scenejs-%E2%80%93-creating-javascript-controlled-animated-3d-character-part-1
http://steffe.se/?p=475
http://scenejs.org/examples/index.html#scenegraph_firstExample
http://scenejs.org/examples/index.html#scenegraph_firstExample

5、ThinkJS(node.js的框架，底層開發JavaScript)

（一）特性
是一個快速、簡單的基於MVC和麪向對象的輕量級Node.js開發框架，遵循MIT協議發佈。秉承簡潔易用的設計原則，在保持出色的性能和至簡的代碼同時，注重開發體驗和易用性，爲WEB應用開發提供強有力的支持。
Thinkjs裏面不少特性來源於ThinkPHP，同時根據Node.js的特色，使用了Promise, WebSocket等特性，讓代碼更簡潔、優雅。
（二）優勢
開發更簡單更快速，團隊合做更便捷。快速搭建項目，可讓你把注意力放在業務自己，尤爲是 Thinkjs 2.0 以上支持 ES2015/ES2016 的各類特性，用起來很是方便.這是我用 Thinkjs 作的一個項目，兩天就搞定，方便快捷 github resume。Thinkjs 是一個快速、簡單的基於MVC和麪向對象的輕量級Node.js開發框架，遵循MIT協議發佈。秉承簡潔易用的設計原則，在保持出色的性能和至簡的代碼同時，注重開發體驗和易用性，爲WEB應用開發提供強有力的支持。
Thinkjs裏面不少特性來源於ThinkPHP，同時根據Node.js的特色，使用了Promise, WebSocket等特性，讓代碼更簡潔、優雅。
Thinkjs最大的特點是對目前比較潮的語法特性支持的特別好，好比es六、es七、typescript等，有了這些，對aysnc/await等特性支持，讓代碼更加fashion。
相關網址
https://thinkjs.org/
https://thinkjs.org/zh-cn/doc/2.2/index.html
https://www.w3ctech.com/topic/637
http://www.thinkjs.org/doc/

6、ThingJS(底層開發JavaScript)

 

（一）特性

強大的3d引擎，簡化模型製做，提升開發效率，在線開發部署，支持離線部署。
ThingJS面向物聯網的3D可視化PaaS開發平臺.基於WebGL兼容各類瀏覽器及移動設備.零門檻、高效率、低成本開發各種3D應用。
基於 Koa 2.x，兼容 middleware；
內核小巧，支持 Extend、Adapter 等插件方式；
性能優異，單元測試覆蓋程度高；
內置自動編譯、自動更新機制，方便快速開發；
使用更優雅的 async/await 處理異步問題，再也不支持 */yield；
從 3.2 開始支持 TypeScript。
（二）適用範圍
ThingJS 名稱源於 物聯網 Internet of things（IoT） 中的 Thing (物)，意爲面向物聯網可視化開發的 Javascript 庫。 主要針對以一棟或多棟建築所組成的園區級別的場景，能夠應用於數據中心、倉儲、學校、醫院、安防、預案，城市、園區、建築、樓層、房間、設備等多種領域。
並且這些層次的對象在ThingJS的場景加載完成後，是以JS對象的方式直接暴露給用戶使用，簡單方便。
（三）支持格式
.tjs
（四）優缺點
一、優勢
ThingJS 基於 HTML5 和 WebGL 技術，可方便地在主流瀏覽器上進行瀏覽和調試，支持 PC 和移動設備。ThingJS 爲可視化應用提供了簡單、豐富的功能，只須要具備基本的 Javascript 開發經驗便可上手; ThingJS 提供了對場景的加載、分層級的瀏覽，對象的訪問、搜索、以及對象的多種控制方式和豐富的效果展現，能夠經過綁定事件進行各類交互操做，還提供了攝像機視角控制、點線面效果、溫溼度雲圖、界面數據展現、粒子效果等等各類可視化功能；面對這種狀況，Three.js 應運而生，它不但對 WebGL 進行了封裝，將複雜的接口簡單化，並且基於面向對象思惟，將數據結構對象化，很是方便咱們開發。Three.js 的發展十分迅速，然而配套的學習材料卻比較匱乏，因而便有了當前的這個課程。
在功能接口提供的粒度上，ThingJS和其餘開發工具相比，站在了更高的封裝層面， 用盡量簡潔的接口，直接提供了場景的加載與展現、物聯網設備的建立與特效；還提供了信息點、線路、管線、區域、熱圖、粒子、動畫等豐富功能；提供了攝影機控制、第一人稱行走、尋路
導航和視點線路工具；可擴展的界面、頭頂信息牌、內嵌視頻監控等豐富的信息展現方式。這些接口大部分已經在在線例子中能夠找到，能夠邊改參數邊看到效果；幫助用戶以最快的速度 學習、開發與部署。
二、缺點
沒有不是開源的。ThingJS所定位的物聯網可視化應用，側重宏觀場景表現，並不針對局部細節的效果，並且因爲WebGL技術的性能侷限，在性能上不能和Unity等原生程序相比，性能和效果的側重也更偏向前者，就像電紙書和手機有着不一樣的定位；因此，ThingJS不適合作場景細節要求高的應用。
（五）相關網址
http://www.thingjs.com/guide/
http://www.3dmomoda.com/
http://forum.thingjs.com/
http://www.thingjs.com
https://baijiahao.baidu.com/s?id=1611474740563954882&wfr=spider&for=pc

7、總結

利用3d圖形庫技術範圍和示例等研究成果，有利於根據公司的需求去選擇合適的webGL框架去開發，節約了時間、人力成本，提升了開發效率。

 

附件：

1、三維圖形庫
市面上的三維圖形庫不少，基本分爲Web端(WebGL)與非Web端(OpenGL/OpenGLES)、商用收費與免費開源兩類。目前，主流的三維圖形庫大體以下所示。
ArcGIS Engine（收費）
U3D （收費）
OverDrive（收費）
Hightopo（收費）（http://www.hightopo.com/）
Ossimplanet（開源）（http://trac.osgeo.org/ossim/wiki/OssimPlanet）
Wings 3D（開源）（http://www.wings3d.com/）
OGRE（開源）（https://github.com/OGRECave/ogre）?
Cesium（開源）（http://cesiumjs.org）
OSG（開源）（https://github.com/openscenegraph/OpenSceneGraph）
OPEN CASCADE（開源）（https://www.opencascade.com）
Potree（開源）（http://potree.org/）
SceneJS（開源）（http://scenejs.org）
Three.js（開源）（https://threejs.org/）
BabylonJS（開源）（http://www.babylonjs.com/）

2、技術選型

（一） 非Web端三維圖形庫 數量多、性能好、API豐富。

由於屬於Native APP範疇，因此缺點是不能一次編碼，跨平臺運行，需針對不一樣平臺單獨集成編碼。

（二）Web端三維圖形庫

伴隨HTML 5誕生，故目前可用庫較少、在瀏覽器內運行也致使性能略差、功能與移動設備支持的三維標準OpenGL ES相似，都是從OpenGL剪裁而來。最大的優勢是跨平臺性，即一次編碼，可四處運行（只要瀏覽器支持WebGL標準）。

（三）分析

根據業務需求，優先考慮Web端三維開發。可選的範圍在Potree、Hightopo、Three.js和BabylonJS之間。
Potree
研究了Potree中最接近於三維漫遊與熱點切換的例子。加載速度很快，但清晰度太差，達不到業務需求。
3、大場景基於earth的開源三維js引擎

cesiumjs(http://cesiumjs.org/)
優勢：有較多的demo，詳細的api文檔，有測試平臺，比較豐富的展現特性和擴展。
webglearth（http://www.webglearth.com/）
demo較少，但一些基本的gis功能都有，簡單實用，好像沒什麼更新過。
openwebglobe（http://world.openwebglobe.org/）
效果不是很好，加載不流暢，展現的功能也比較少，後面就沒有進步瞭解了。