WebGL探索——抉择：实践方向，twgl.js、Filament、Claygl、BabylonJS、ThreeJS、LayaboxJS、SceneJS、ThinkJS、ThingJS

  • 跨出第一步
  • 新的改变
  • 常见应用
    • twgl.js
    • Filament
    • Claygl
    • BabylonJS
    • ThreeJS
    • LayaboxJS
    • SceneJS
    • ThinkJS
    • ThingJS
  • 犹豫的方向
  • 更多

跨出第一步

最初接触到WebGL是在2016年，有客户来咨询，“能不能做一个APP让我在手机上看到设计的3D模型”，拿到这个需求的时候立马就想到了经典“大茶壶”，当时用three.js做了一个网页，对照官网上的demo，调调改改，实现了模型文件的管理与浏览，并使用WeX5打包成APP，对于创业者来说，这是最省人力的选择了。
接下来几年，VR应用的风靡，转战Unity3D做了商场的互动游戏，为“某钢”做了全厂的能源管道。
当我再次遇到WebGL的时候，是我在新单位遇到的“数字孪生发展目标”，面对智慧城市、大数据BI的轰炸，传统的窗体应用在视觉上确实是——“丑”。在看了“图扑”，“木棉树”，“ThingJS”等案例之后，WebGL再次进入了视野。

新的改变

再次面对WebGL，第一下想到的就是three.js，但是不要忘了最终的目的是“数字孪生”，而数字孪生的三个方向设计仿真、流程仿真、模拟预测牢牢的卡住了我们，如何在3D空间中实现物理特性的模拟成了一大技术难关，three.js社区提供了很多插件，但是应用得靠自己摸索，出了bug会增加很大工作量，再看看业界大佬西门子、达索都是自己做的平台，而且还很好完成了设计模型轻量化、数据通信、物理仿真（刚体），但是我们的项目更偏重的是生产过程的描述，与大佬的流程设计又不相同，而且还有一个限制条件就是成本，仿真模块要买、数据模块要买、想要更好的集成——买，研发一套“买来的”产品，意味着随后的项目都要买（版权），高价没有竞争力，高成本没有利润，而且在页面美观上还没有那么友好。
那么寻求一个好的WebGL引擎成了首要目标，那么什么叫好呢？
1、推动力，需要持续的更新维护，不会成为死水；
2、明朗化，需要有对应的文档说明、解释，指导学习、应用；
3、效益率，在满足需求的基础上如何压缩成本。

常见应用

WebGL 框架和引擎按照定位可以分成这三种类型：
WebGL 封装，定位是简化 WebGL 开发，最大的特点是必须自己写 GLSL 才能用。
渲染引擎，定位是三维物体及场景展示，一般会抽象出场景、相机、灯光等概念，上手门槛低，不需要自己写 GLSL。
游戏引擎，定位是游戏开发，在前面的渲染引擎基础上，还提供了骨骼动画、物理引擎、AI、GUI 等功能，以及可视化编辑器来设计关卡，支撑大型游戏的开发。

twgl.js

twgl.js
twgl.js 就是最典型的WebGL 封装做法，主要解决的问题是 WebGL 的 API 过于繁琐，比如创建一个最常见物体在 WebGL 中需要这样写，其中反复调用 bindBuffer 和 bufferData，很容易写错，而使用 twgl.js 就能大量的简化，但是twgl 的定位是减少重复代码，并没有进一步抽象，所以使用它和直接用 WebGL 在学习成本上没太大区别，因此非常适合初学者，但也意味着它没什么独特的功能。

Filament

GitHub—filament
Filament 是 Google 基于 C++ 开发的跨平台物理渲染引擎，支持 Android、iOS、Windows、Mac 等系统，还提供了基于 WebAssembly 的 Web 版本，它用在了 Google 地图和搜索这两个核心 APP 中，因此大概率会长期维护，不用担心弃坑。值得一提的是 Filament 的文档写得极好，相当于一本如何实现 PBR 的教材，可以学到很多图形学的知识。
缺点 核心是 C++ 写的，如果功能不满足只能去改 C++，而这几乎是必须的，因为暴露给 JavaScript 的 API 很少，最简单的点击交互都不支持，各个组件的设置也很少，比如相机要实现无交互时自动旋转就得改 C++ 代码，不熟悉 C++ 将寸步难行。只支持 WebGL 2.0，这点比较致命，导致无法在 iOS 的浏览器上使用，看了一下它有调用 glDrawBuffers，但不清楚用于做什么。

Claygl

使用 ECharts GL 实现基础的三维可视化
Claygl 是 ECharts 核心开发者 pissang 大神的开发的 WebGL 游戏引擎，它还用在了 ECharts-gl 项目中，可以在ECharts官网示例中新出现了很多GL图形。
它最大的亮点是支持延迟着色，目前除了前面提到的 Filament 和后面的 LayaAir，其它 WebGL 引擎都是传统的前向着色，这种管线在渲染时，会对每个物体计算所有光照的贡献，如果想实现接近现实世界的效果就必须支持多光源，尤其是室内和夜晚，面夹角越多，计算的阴影面越多，使用前向渲染性能太差，无法做到实时渲染。

BabylonJS

https://doc.babylonjs.com/
Babylon.js是一款WebGL开发框架。 适合做中大型项目，尤其是多种媒体混杂的或者是游戏项目VR体验项目。

优点 功能较为全面,功能比较丰富、灵活、模型显示不失真。有微软背景，有不少的demo，有较详细的api文档，有供测试的平台，有提供3dsmax转换模型的插件，许多非常牛叉的新特性，并对已有功能进行了完善。更方便快捷地完成光线、轮船纹理、海浪等的3D建模，从而带来最佳的呈现效果。
缺点 学习难度大、周期长，需要进行大量深入的学习与研究。另外，在模型文件较大或较多时，浏览器打开时会等待较长时间，中文资料很少，没有系统的中文教程，论坛也会被墙。

ThreeJS

https://threejs.org/
是一款 webGL 开源框架，易用、简单、直观的方式封装了 3D 图形编程中常用的对象。在开发中使用了很多图形引擎的高级技巧，提高了性能。内置了很多常用对象和极易上手的工具，功能强大。

优点 国内用的比较多，所以中文的资料也会比较多，有比较系统的中文教程如从入门到精通。用的人比较多，所以相关的qq群较多，群里的人也较多，接触到的大牛应该也会比较多。
缺点 没有提供一些基础建模软件的插件，比如3dsmax的模型导出插件，虽然说提供一些读3ds格式，fbx格式的场景。要配合更多扩展库完成，因为你可能会需要联网通信功能的封装、声音普通控制甚至高级频谱控制、输入设备信息的处理等诸多渲染以外的功能。国内学习资料多，但加载速度慢、缺少碰撞检测等功能。

LayaboxJS

http://www.layabox.com/
LayaAir引擎支持精灵、矢量图、文本、富文本、位图字体、动画、骨骼、音频与视频、滤镜、事件、加载、缓动、时间、网络、UI系统、物理系统、TiledMap、prtocol等API；支持开发2D、3D、VR的产品研发，支持Canvas与WebGL模式，支持同时发布为HTML5、Flash、APP（IOS、安卓）多种版本。

优点 极致性能：LayaAir优先使用webgl渲染，如果webgl不可用，自动无缝转为canvas渲染，引擎设计过程中处处以性能为优先原则，LayaAir是为裸跑而设计的HTML5引擎。
轻量易用：LayaAir API设计上追求精简，简单易用，上手容易，引擎本身非常注意自身大小，是目前同等功能最小的HTML5引擎。
支持多语言开发：LayaAir同时支持ActionScript3、TypeScript、JavaScript三种语言开发HTML使用任意一种自己喜欢的语言开发即可。
缺点 有些功能与问题，官方文档没提到，网上搜到同样问题的帖子，却没人回答。作为一个开源免费的引擎，不是每个问题，官方都能准时解答的，甚至你发个帖子，很长一段时间都没有一个答案，这时只能自己慢慢摸索一下了。

SceneJS

http://scenejs.org/
它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。
优点 专门用于快速绘制大量单独连接的对象，而没有像阴影、反射等游戏引擎效果。SceneJS的API和JSON相似,它学习起来很简单。
缺点 相关社群几乎没有，中国很少人用。缺少碰撞检测等功能。加载大模型时速度较慢。需提供正在载入信息提示，尽可能提高用户体验。

ThinkJS

https://thinkjs.org/
是一个快速、简单的基于MVC和面向对象的轻量级Node.js开发框架，遵循MIT协议发布。秉承简洁易用的设计原则，在保持出色的性能和至简的代码同时，注重开发体验和易用性，为WEB应用开发提供强有力的支持。

优点 开发更简单更快速，团队合作更便捷。对目前比较潮的语法特性支持的特别好，比如es6、es7、typescript等。

ThingJS

https://www.thingjs.com
强大的3d引擎，简化模型制作，提高开发效率，在线开发部署，支持离线部署。ThingJS面向物联网的3D可视化PaaS开发平台.基于WebGL兼容各种浏览器及移动设备.零门槛、高效率、低成本开发各类3D应用。

优点 ThingJS和其他开发工具相比，站在了更高的封装层面， 用尽可能简洁的接口，直接提供了场景的加载与展示、物联网设备的创建与特效；还提供了信息点、线路、管线、区域、热图、粒子、动画等丰富功能；提供了摄影机控制、第一人称行走、寻路
导航和视点线路工具；可扩展的界面、头顶信息牌、内嵌视频监控等丰富的信息展示方式。这些接口大部分已经在在线例子中可以找到，可以边改参数边看到效果；帮助用户以最快的速度 学习、开发与部署。
缺点 不是开源的。ThingJS所定位的物联网可视化应用，侧重宏观场景表现，并不针对局部细节的效果，而且由于WebGL技术的性能局限，在性能上不能和Unity等原生程序相比

犹豫的方向

通过网上一系列的说法，比较有吸引力的WebGL引擎我比较看好三个，babylonJS、threeJS、LayaboxJS，但是这三个都有不同程度的问题，babylonJS缺乏学习资料，threeJS速度慢缺核心（需要各种拓展库的支持），LayaboxJS文档不全。总体来说，都有一定量的学习负担，入门简单，深入难，相比较而言，更倾向于babylonJS与LayaboxJS。

犹豫来犹豫去，不如上手搞一下，接下来就先研究babylonJS试一下，主旨就是上手简单有成效，免费开源不愁钱。

更多

下一篇：BabylonJS入门——初探：我的世界