WebGL技术研究：Threejs、SceneJS、ThingJS等框架优缺点对比分析

        为实现企业80%以上的生产数据进行智能转化，在烟草、造纸、能源、电力、机床、化肥等行业，赢得领袖企业青睐，助力企业构建AI赋能中心，实现智能化转型升级。以AI驱动，构建5G时代下企业数智基础，从根本上改变了数据采集、存储和使用的方式，是当下企业构建数字化与智能化能力的首选产品。构建面向未来智能工厂全场景的全息交互模式，实现物理空间与数字空间的混合孪生。为国产工打造一个用户可以自研的智能云平台，变革未来企业IT消费模式，输送企业转型升级动能，为企业创造可量化价值。
　　
　　本文为选择合适的WebGL框架，为后续项目奠定基础；避免盲目选择框架，导致后续项目重构带来不必要的成本浪费。本文清楚的讲述了各个框架的特点，适用范围，优缺点以及相关网址范例；以便于后续更快速的开发，提高生产效率，最后进行总结。

　　WebGL研究（包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址），

　　
一、 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建模，从而带来最佳的呈现效果。
　　
　　缺点
　　
　　学习难度大、周期长，需要进行大量深入的学习与研究。另外，在模型文件较大或较多时，浏览器打开时会等待较长时间;
　　
　　中文资料很少，没有系统的中文教程，如从入门到精通都可以给你讲一遍系统的教程，论坛也会被墙，相关的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格式（主要格式）
　　
　　（四） 优缺点
　　
　　优点
　　
　　国内用的比较多，所以中文的资料也会比较多，有比较系统的中文教程如从入门到精通。用的人比较多，所以相关的qq群较多，群里的人也较多，接触到的大牛应该也会比较多。在WebGL的引入之前已经创建了three.js独特方便的模块化渲染接口，并在不用WebGL的情况下允许它使用SVG和HTML5画布元素。近些年，浏览器的功能越来越强大，渐渐得成为了复杂应用和图形的平台。同时，现有大多数浏览器实现了对 WebGL 的支持，但要直接使用 WebGL 相关接口进行开发，则需要学习复杂的着色器语言，且开发周期长，不利于项目的快速开发。
　　
　　面对这种情况，Three.js 应运而生，它不但对 WebGL 进行了封装，将复杂的接口简单化，而且基于面向对象思维，将数据结构对象化，非常方便我们开发。Three.js 的发展十分迅速，然而配套的学习材料却比较匮乏，于是便有了当前的这个课程。
　　
　　缺点
　　
　　没有提供一些基础建模软件的插件，比如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。
　　
　　（四）优缺点
　　
　　优点
　　
　　裸跑性能堪比APP 多版本发布、知名CP首选引擎
　　
　　极致性能：LayaAir优先使用webgl渲染，如果webgl不可用，自动无缝转为canvas渲染，引擎设计过程中处处以性能为优先原则，LayaAir是为裸跑而设计的HTML5引擎。
　　
　　轻量易用：LayaAir API设计上追求精简，简单易用，上手容易，引擎本身非常注意自身大小，是目前同等功能最小的HTML5引擎。
　　
　　支持多语言开发：LayaAir同时支持ActionScript3、TypeScript、JavaScript三种语言开发HTML使用任意一种自己喜欢的语言开发即可。
　　
　　功能齐全：同时支持2D，3D，VR、时间轴动画，缓动、UI系统、粒子动画、骨骼动画、物理系统等。提供可视化辅助开发及工具流。LayaAirIDE提供代码开发工具及可视化编辑器，清晰的工作流，让美术，策划，程序紧密配合，提高开发效率。
　　
　　开源免费：引擎全部开源并托管到github，并且全部免费使用，包括商用。
　　
　　缺点
　　
　　有些功能与问题，官方文档没提到，网上搜到同样问题的帖子，却没人回答。作为一个开源免费的引擎，不是每个问题，官方都能准时解答的，甚至你发个帖子，很长一段时间都没有一个答案，这时只能自己慢慢摸索一下了。这里我就把自己遇到的一些小问题及解决思路记录下来，希望对那些遇到同样问题的人有帮助。这些问题并不大，却有点烦人，你明知道实现某个功能可能就是一行代码的事，却没有关于如何使用的说明，这让人很苦恼。
　　
　　⦁ 底层技术
　　
　　关于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/
　　
　　（四）优缺点
　　
　　优点
　　
　　专门用于快速绘制大量单独连接的对象，而没有像阴影、反射等游戏引擎效果。SceneJS的API和JSON相似,它学习起来很简单。
　　
　　缺点
　　
　　相关社群几乎没有，中国很少人用。缺少碰撞检测等功能。加载大模型时速度较慢。需提供正在载入信息提示，尽可能提高用户体验。（可用工具可以将.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最大的特色是对目前比较潮的语法特性支持的特别好，比如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/）
　　效果不是很好，加载不流畅，展示的功能也比较少，后面就没有进步了解了。