WebGL、ThreeJS、BabylonJS和SceneJS等框架对比和简介

一、OpenGL,WebGL

OpenGL大概许多人都有所耳闻，它是最常用的跨平台图形库。

WebGL是基于OpenGL设计的面向web的图形标准，提供了一系列JavaScript API，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。

而Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。

简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮我们封装得更好用一些。

logo-compassion.jpg

WebGL与Three.js对比

既然有了WebGL，我们为什么还需要Three.js？

这是因为WebGL门槛相对较高，需要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发完全是两个不同的方向，知识的重叠很少。相关性只是他们都在web平台上，都是用javascript而已。一个前端程序员或许还熟悉解析几何，但是还熟悉线性代数的应该寥寥无几了（比如求个逆转置矩阵试试？），更何况使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。

因此，前端工程师想要短时间上手WebGL还是挺有难度的。

于是，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失WebGL的灵活性。 因此，从Three.js入手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。以下是 Three.js 制作 3D 的五要素：

1. 渲染器（render）
我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。

2. 场景（scene）
相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。

3. 照相机（camera）
相当于眼睛，我们想要看到物体，就需要眼睛去看。

4. 光源（light）
物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。

5. 物体（object）
我们想要表现的内容，会有形状和材质属性。

二、babylon.js

babylon.js是由微软员工出品的WebGL框架，能够通过HTML5 canvas在网页构建一个3D的场景。使用的是左手坐标系，文档中还有部分使用TypeScript来编写当然他们都有对应的JS版本。相对于ThreeJs更适合用来做游戏，因为它的碰撞检测十分易用

3droom.jpg

三、SceneJS

SceneJS一个开源的 JavaScript 3D WebGL引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。

以下是几种封装引擎简单的对比：

1. Babylon.js：一个强大的 3D 游戏引擎，由 Microsoft 的员工 David Cathue 主导开发。和 Three.js 相比，three.js 更倾向于动画，而 Babylon.js 则更适合游戏开发。

2. PhiloGL：增加了额外的功能帮助你可以使用本地的 WebGL ，这个 WebGL 的接口不是百分之百的被封装好了的，这使得 PhiloGL 上手难度较高。

3. SceneJS：一个开源的 JavaScript 3D 引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。

4. CopperLicht：一个“商业级别的 WebGL 3D 引擎和编辑器”，你可以免费使用，但是要想获得未压缩的完整版带支持文档的源码和其他服务，则需要购买授权。

Three.js and Babylon.js 等这些框架引擎都提供了易于使用的接口来处理错综复杂的WebGL动画。不需要安装插件、在移动端支持好。

除此之外还有 PlayCanvas等引擎。

推荐本站另一篇来自网络的网友整理的文章《WebGL图形库调研整理》。