WebGL探索——抉择:实践方向,twgl.js、FilamentClaygl、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入门——初探:我的世界