WebGL框架比较之Three.js和Babylon.js的比较

清疚 2022-12-21 03:22 147阅读 0赞

今天的web浏览器已经走了很长的路。由于出色的JavaScript WebGL API,现代浏览器完全有能力在没有第三方插件帮助的情况下呈现先进的2 d和3 d图形。利用专用的图形处理器的性能,WebGL使我们访问的网页实现动态阴影和现实的物理。

正如你可能已经猜到的,如此强大的api通常有一个缺点。WebGL当然也不例外,其缺点是形式的复杂性。不要害怕,然而,当我们探索两个完全有能力框架的目标是,让你的生活更容易,甚至可能使用WebGL时更有效率。

## 三维框架的出身 ##

曾经流行的 Three.js([http://threejs.org/][http_threejs.org])随着新的 Babylon.js([http://www.babylonjs.com/][http_www.babylonjs.com]) 为web开发人员提供了一个抽象的，基础制作功能丰富的WebGL创作框架。

Three.js 早在2009年4月开始出生,在换成JavaScript语言之前最初是用ActionScript。在WebGL的引入之前已经创建了three.js独特方便的模块化渲染接口，并在不用WebGL的情况下允许它使用SVG和HTML5画布元素。

Babylon.js, 是相对陌生的来者, 它出生在2013年的夏天。由微软心中发布了Babylon.js和首次正式支持WebGL API的Internet Explorer 11。

## 设计的细微差异 ##

Three.js and Babylon.js 两者都提供了易于使用的接口来处理错综复杂的WebGL动画。

利用在HTML一样简单的一行脚本语句引入相应的JavaScript文件。注意:Babylon.js的依赖性,需要引入开源的hand.js。

Three.js:

Babylon.js:

1.  `<script src="babylon.js"></script>`
2.  `<script src="hand.js"></script>`

两者之间的主要区别在于他们的预期用途。虽然两者都可以产生相同的效果，但是了解他们两个的过程是很重要的。

Three.js的一个创作目标是:利用基于web的渲染器创建GPU增强的3d图形和动画。这样,这个框架使用非常广泛的方法web图形,而不需要不关注动画的任何一个细节。这种灵活的设计使得Three.js成为一个好工具(可以在[http://threejs.org/examples/][http_threejs.org_examples]找到很多的例子)。

尽管Three.js试图给WebGL带来许多的动画方式,而Babylon.js采用更有针对性的方法。最初设计作为一个Silverlight游戏引擎,Babylon.js的维护倾向于基于web的游戏开发与碰撞检测和抗锯齿等特性。在其官网[http://www.babylonjs.com/][http_www.babylonjs.com]上可以看到许多的例子。

## 并排比较 ##

为进一步体现这两个框架的相似点和不同点,让我们快速构建一个3d动画。我们的项目的选择将会是一个超级简单的立方体缓慢旋转的应用。在创建这两个示例项目,你应该开始了解这两种技术和逐渐发现他们独特的优势。让我们开始吧。

第一个任务是初始化一个空白的画布，以便中包含我们的3 d动画。

Three.js:

1.  `<div style="height:250px; width: 250px;" id="three"></div>`
2.  `var div = document.getElementById('three');`

Babylon.js:

var canvas = document.getElementById(‘babylonCanvas’);  
With Three.js we simply create an empty div as our container for the animation. Babylon.js on the other hand makes use of an explicitly defined HTML5 canvas to hold its 3D graphics.在使用Three.js时我们简单地创建一个空的div容器。而Babylon.js利用显式定义的HTML5 canvas来开始3D图像。

接下来,我们加载渲染器然后准备场景并绘制到画布上。

Three.js:

1.  `var renderer = new THREE.WebGLRenderer();`
2.  `renderer.setSize(width, height);`
3.  `div.appendChild(renderer.domElement);`

Babylon.js:

var engine = new BABYLON.Engine(canvas, true);

这一步没有太多东西,我们只是初始化渲染器并把它们贴到我们的画布上。

下一步我们设置一个场景来装下我们的相机和立方体cube。

Three.js:

1.  `var sceneT = new THREE.Scene();`
2.  `var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);`
3.  `camera.position.z = 400;`

Babylon.js:

1.  `var sceneB = new BABYLON.Scene(engine);`
2.  `var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);`
3.  `sceneB.activeCamera.attachControl(canvas);`
4.  `var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), sceneB);`
5.  `light.diffuse = new BABYLON.Color3(1, 0, 0);`
6.  `light.specular = new BABYLON.Color3(1, 1, 1);`

这里我们创建了我们几乎相同的场景,然后实现相机(两个框架支持不同类型),从我们创建的场景中获得视图。参数传递给相机决定各种细节包括相机的角度、视野、纵横比和深度。

我们还得为Babylon.js加入方向性光源，同时将它附加到我们场景中，避免待会我们只能盯着漆黑一片的动画。

我们的画布,场景和相机都已经准备好了，在渲染和动画起来之前我们只需要加入方块。

Three.js:

1.  `var cube = new THREE.CubeGeometry(100, 100, 100);`
2.   
3.  `var texture = THREE.ImageUtils.loadTexture('texture.gif');`
4.  `texture.anisotropy = renderer.getMaxAnisotropy();`
5.  `var material = new THREE.MeshBasicMaterial({ map: texture });`
6.   
7.  `var mesh = new THREE.Mesh(cube, material);`
8.  `sceneT.add(mesh);`

Babylon.js:

1.  `var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);`
2.  `var material = new BABYLON.StandardMaterial("texture", sceneB);`
3.  `box.material = material;`
4.  `material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);`

First, we create our cube objects of the specified size and then create our material/mesh (think texture) that will be painted onto the cubes. Any image file will work for the texture and both frameworks support mesh exports from 3D modeling tools like Blender ([http://www.blender.org/][http_www.blender.org]).

首先,我们创建指定大小的立方体对象,然后创建我们的材质/网格，把材质涂在立方体的各个面。任何图像文件都可以导入纹理texture,而且两个框架都支持从3D模型工具软件(如 Blender)中导出模型。

在最后一步,我们添加一个缓慢的旋转动画,然后渲染场景。

Three.js:

1.  `function animate() {`
2.  `requestAnimationFrame(animate);`
3.  `mesh.rotation.x += 0.005;`
4.  `mesh.rotation.y += 0.01;`
5.  `renderer.render(sceneT, camera);`
6.  `}`

Babylon.js:Three.jsjs和Babylon.js两者使用动画或渲染循环去更新一个新的旋转角度内容到画布上。您还将注意到Three.js与Babylon.js稍有不同。我们的最终产品是两个立方体在半空中轻轻旋转。

后言  
两个WebGL框架基于相同的Web图形接口,但专注于增强的不同方面,。

最后,这两个相对年轻的框架使web开发人员产生了能够更容易地利用强大的3 d WebGL的机会。这样,任何有兴趣进行3d web开发的同学，当然应该仔细看看这前沿技术。

转自：[http://www.xiwnn.com/article/UTVRJ.html][http_www.xiwnn.com_article_UTVRJ.html]

[http_threejs.org]: http://threejs.org/
[http_www.babylonjs.com]: http://www.babylonjs.com/
[http_threejs.org_examples]: http://threejs.org/examples/
[http_www.blender.org]: http://www.blender.org/
[http_www.xiwnn.com_article_UTVRJ.html]: http://www.xiwnn.com/article/UTVRJ.html