跨出第一步

最初接触到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入门——初探：我的世界

WebGL探索——抉择：实践方向（twgl.js、Filament、Claygl、BabylonJS、ThreeJS、LayaboxJS、SceneJS、ThinkJS、ThingJS）相关推荐

【语音之家】AI产业沙龙—火山语音在AI视频译制方向的技术探索与实践
由CCF语音对话与听觉专委会 .中国人工智能产业发展联盟(AIIA)评估组.火山语音.语音之家.希尔贝壳共同主办的[语音之家]AI产业沙龙-火山语音在AI视频译制方向的技术探索与实践,将于2022年1 ...
字节跳动在 Rust 微服务方向的探索和实践
近日, Qcon 全球软件开发大会 2022(上海站)圆满落幕,大会是由 InfoQ 中国主办的综合性技术盛会,近百位国内外技术大咖现场分享前沿技术案例与创新实践.本文整理自字节跳动火山引擎基础架构服 ...
【语音之家】AI产业沙龙—京东在AI语音方向的技术探索与实践
由CCF语音对话与听觉专委会 .中国人工智能产业发展联盟(AIIA)评估组.京东科技.语音之家.希尔贝壳共同主办的[语音之家]AI产业沙龙-京东在AI语音方向的技术探索与实践,将于2022年11月29 ...
FlutterWeb性能优化探索与实践
点击"开发者技术前线",选择"星标" 让一部分开发者看到未来来自:美团技术团队美团外卖商家端基于 FlutterWeb 的技术探索已久,目前在多个业务中落地 ...
前端团队研发效能提升的探索与实践
读者受益研发效能定义:知道研发效能是什么?(对「研发效能」的定义有一个经得起推敲的参考) 研发效能提升:知道如何提升技术团队的研发效能?(对提升自己所在团队研发效能有一些想法/灵感) 技术的价值:当 ...
探索AI实践最优解，AISummit全球人工智能技术大会完美落幕
探索AI实践最优解,AISummit全球人工智能技术大会完美落幕北京时间2022年8月7日下午17:30,由51CTO精心策划以"驱动•创新•数智"为主题的AISummit全球人 ...
Flutter Web 在《一起漫部》的性能优化探索与实践
一起漫部是基于区块链技术创造的新型数字生活. 目录前言开发环境渲染模式首屏白屏优化方案启屏页优化包体积优化去除无用的icon 裁剪字体文件 deferred延迟加载启用gzip压缩 ...
美团外卖小程序的探索和实践（演讲内容整理）丨掘金开发者大会
2017年1月9日,微信官方在2017微信公开课Pro上发布的小程序正式上线,开创了小程序开发的时代.我们的美团外卖的业务也逐步加入到小程序开发的队伍中.小程序有着无需安装.触手可及.用完即走.无须卸 ...
技术揭秘！百度搜索中台低代码的探索与实践
导读:据Gartner调研,应用开发需求的市场增长至少超过IT交付能力的5倍,预计到2025年,70%的新应用开发将使用低代码技术.我们需要在需求迭代越来越高频.创新能力要求越来越高的背景下,探索如何 ...

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

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