為實現企業80%以上的生產數據進行智能轉化，在煙草、造紙、能源、電力、機床、化肥等行業，贏得領袖企業青睞，助力企業構建AI賦能中心，實現智能化轉型升級。“遠舢文龍數據處理平台”以AI驅動，構建5G時代下企業數智基礎，從根本上改變了數據采集、存儲和使用的方式，是當下企業構建數字化與智能化能力的首選產品。“遠舢知識圖譜平台”，作為國內第一批落地應用的“知識圖譜”，平均縮短智能化應用開發周期70%，延長企業分析決策應用生命周期150%。“遠舢Hybrid Twin”構建面向未來智能工廠全場景的全息交互模式，實現物理空間與數字空間的混合孿生。為國產工業AI新銳，以遠舢工業雲平台為核心，以AI驅動的方式，打造一個用戶可以自研APP的智能雲平台，變革未來企業IT消費模式，輸送企業轉型升級動能，為企業創造可量化價值。我們在這領域展示出來的強大產品競爭力，以及公司團隊深耕制造、腳踏實地、堅持打造極致產品的理念，持續提供增值服務，我們期待和堅信遠舢公司能成為未來企業級人工智能領域的獨角獸！
本文為選擇合適的webGl框架，為后續項目奠定基礎；避免盲目選擇框架，導致后續項目重構帶來不必要的成本浪費。本文清楚的講述了各個框架的特點，適用范圍，優缺點以及相關網址范例；以便於后續更快速的開發，提高生產效率，最后進行總結。
關鍵詞：WebGl框架
一、 BabylonJS（適用於小場景,開源;JavaScript、TypeScript）
（一）特點
強大，美觀，簡單和開放的3D渲染體驗。
（二）適用范圍
Babylon.js是一款WebGL開發框架。 適合做中大型項目，尤其是多種媒體混雜的或者是游戲項目VR體驗項目
（三）支持格式
glTF，OBJ，STL，.babylon (常用格式)。
（四）優缺點
1、 優點
功能較為全面,功能比較豐富、靈活、模型顯示不失真。有微軟背景，有不少的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/
二、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/
三、LayaboxJS(layaair底層開發Ar，JS,TS)
（一）特點
LayaAir引擎的產品性能已達到原生APP的水准，甚至可以直接用於開發APP、HTML5、Flash的多端版本產品。裸跑性能堪比APP,支持2D，3D，VR開發。
（二）適用范圍
大型游戲開發項目與游戲上市企業，廣告，營銷，教育，應用開發等領域。
（三）格式支持
Spline。
（四）優缺點
1) 優點
裸跑性能堪比APP 多版本發布、知名CP首選引擎
極致性能：LayaAir優先使用webgl渲染，如果webgl不可用，自動無縫轉為canvas渲染，引擎設計過程中處處以性能為優先原則，LayaAir是為裸跑而設計的HTML5引擎。
輕量易用：LayaAir API設計上追求精簡，簡單易用，上手容易，引擎本身非常注意自身大小，是目前同等功能最小的HTML5引擎。
支持多語言開發：LayaAir同時支持ActionScript3、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/
四、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
五、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最大的特色是對目前比較潮的語法特性支持的特別好，比如es6、es7、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/
六、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
（四）優缺點
1、優點
ThingJS 基於 HTML5 和 WebGL 技術，可方便地在主流瀏覽器上進行瀏覽和調試，支持 PC 和移動設備。ThingJS 為可視化應用提供了簡單、豐富的功能，只需要具有基本的 Javascript 開發經驗即可上手; ThingJS 提供了對場景的加載、分層級的瀏覽，對象的訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度雲圖、界面數據展示、粒子效果等等各種可視化功能；面對這種情況，Three.js 應運而生，它不但對 WebGL 進行了封裝，將復雜的接口簡單化，而且基於面向對象思維，將數據結構對象化，非常方便我們開發。Three.js 的發展十分迅速，然而配套的學習材料卻比較匱乏，於是便有了當前的這個課程。
在功能接口提供的粒度上，ThingJS和其他開發工具相比，站在了更高的封裝層面， 用盡可能簡潔的接口，直接提供了場景的加載與展示、物聯網設備的創建與特效；還提供了信息點、線路、管線、區域、熱圖、粒子、動畫等豐富功能；提供了攝影機控制、第一人稱行走、尋路
導航和視點線路工具；可擴展的界面、頭頂信息牌、內嵌視頻監控等豐富的信息展示方式。這些接口大部分已經在在線例子中可以找到，可以邊改參數邊看到效果；幫助用戶以最快的速度 學習、開發與部署。
2、缺點
沒有不是開源的。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
七、總結
利用3d圖形庫技術范圍和示例等研究成果，有利於根據公司的需求去選擇合適的webGL框架去開發，節約了時間、人力成本，提高了開發效率。
附件：
一、三維圖形庫
市面上的三維圖形庫很多，基本分為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/）
二、技術選型
（一） 非Web端三維圖形庫 數量多、性能好、API豐富。
因為屬於Native APP范疇，所以缺點是不能一次編碼，跨平台運行，需針對不同平台單獨集成編碼。
（二）Web端三維圖形庫
伴隨HTML 5誕生，故目前可用庫較少、在瀏覽器內運行也導致性能略差、功能與移動設備支持的三維標准OpenGL ES類似，都是從OpenGL剪裁而來。最大的優點是跨平台性，即一次編碼，可四處運行（只要瀏覽器支持WebGL標准）。
（三）分析
根據業務需求，優先考慮Web端三維開發。可選的范圍在Potree、Hightopo、Three.js和BabylonJS之間。
Potree
研究了Potree中最接近於三維漫游與熱點切換的例子。加載速度很快，但清晰度太差，達不到業務需求。
三、大場景基於earth的開源三維js引擎
cesiumjs(http://cesiumjs.org/)
優點：有較多的demo，詳細的api文檔，有測試平台，比較豐富的展示特性和擴展。
webglearth（http://www.webglearth.com/）
demo較少，但一些基本的gis功能都有，簡單實用，好像沒什么更新過。
openwebglobe（http://world.openwebglobe.org/）
效果不是很好，加載不流暢，展示的功能也比較少，后面就沒有進步了解了。