关于Babylon.js的一些了解

前言

谈到babylon.js就不得不提到three.js。在3D Web开发领域，Babylon.js和Three.js被视为两种最流行的JavaScript库，用于创建引人入胜的3D体验。它们都提供了强大的功能和活跃的社区，但它们具有不同的优点和缺点。在这篇综合比较中，我们将深入探讨Babylon.js和Three.js之间的核心差异。

介绍

Babylon.js和Three.js都是JavaScript库，可以让开发者在浏览器中创建3D图形和交互式Web体验。它们在各种行业中被广泛使用，包括游戏、教育、建筑和虚拟现实。然而，它们具有不同的设计理念和功能集，适用于不同的需求。

Babylon.js

Babylon.js由微软开发，以其易用性和简单性而闻名。它旨在为开发者提供一个简单的路径，让他们可以轻松开始3D Web开发，这使其成为初学者的绝佳选择。Babylon.js是开源的，并且非常强调社区支持和文档。

Three.js

另一方面，Three.js是一个更成熟和多功能的库。它提供了广泛的功能和高度的自定义性，适用于初学者和经验丰富的开发者。Three.js已经存在很长时间，拥有庞大而活跃的社区，这导致了大量的第三方扩展和插件的产生。

核心类对比

以创建一个场景简单的场景为例，首先渲染场景的三大要素，场景，相机，渲染器.

渲染器
Three中的渲染器是WebGLRenderer，Babylon的渲染器类是Engine，它们都是封装了webgl的api. 使用方式

//Three.js
const renderer = new THREE.WebGLRenderer();
    
//Babylon.js
const engine=new BABYLON.Engine(canvas)

传入的属性差不多，就是画布，是否抗锯齿等.

场景

2个库都有Scene类.

Three.js的Scene跟场景中的对象一样，都是继承了Three.js的基类，Object3D,这个类中有children属性，用于存这个对象所拥有的子对象。对于场景来说，他的子对象就是场景中所拥有的实体.

Babylon.js的Scene作用比Three.js丰富，其中保存了这个场景中所有的对象，包括顶点（VertexData），顶点对应的Geometry,节点（Node）,材质对象，动画等。

在这里插入代码片//Three.js
const scene=new THREE.Scene()

//Babylon.js 必须传入场景对应的渲染引擎
const scene=new BABYLON.Scene(engine)

相机

Three.js常用的相机主要是2个，一个是透视相机(PerspectiveCamera)，一个是正交相机(OrthographicCamera).它们也是继承了基类（Object3D），只不过它们封装了透视矩阵和正交矩阵.
Babylon.js的相机功能比较丰富，包括

万能相机(Universal Camera),主要用于FPS游戏的相机
弧形旋转相机（Arc Rotate Camera），主要用在3D编辑器里面的相机
跟随相机（FollowCamera），可以跟随某个物体的相机
这些相机可以切换为透视模式或者正交模式.

//Three.js
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//Babylon.js 旋转相机为例，可以想象为是围绕地球的卫星

// Parameters: name, alpha(横向旋转), beta（纵向旋转）, radius(观察半径), target position（目标点）, scene
const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
// 绑定交互
camera.attachControl(canvas, true);

绘制Box

Three.js要绘制一个网格，

创建geometryconst geo=new BoxGeometry(1,1,1)
创建material const material=new MeshBasicMaterial()
创建网格 const box=new Mesh(geo,material)
添加到场景 scene.add(box)

Babylon.js绘制一个网格

创建网格const box=new MeshBuilder.CreateBox(“name”,{size:1})
创建材质const material=new StandardMaterial()
应用材质 box.material=material

渲染和图形质量

Babylon.js

Babylon.js非常注重易用性和视觉吸引力。它提供了各种材料、着色器和后期处理效果，可以帮助开发者在最小的努力下实现令人印象深刻的视觉效果。该库还包括一个强大的粒子系统，用于创建逼真的效果，如火、烟和雨。

此外，Babylon.js支持基于物理的渲染（PBR），模拟材料与光线的相互作用，从而实现更加逼真和视觉上令人愉悦的场景。

Three.js

Three.js在渲染和图形质量方面提供了无与伦比的灵活性。开发者可以对着色器、光照和渲染技术进行精细的控制，使其能够创建高度自定义和视觉上令人印象深刻的场景。

使用Three.js，你可以创建复杂的渲染效果、实现自定义着色器，并使用射线追踪等高级渲染技术。这种控制水平非常适合需要顶尖图形和逼真性的项目。

Three.js在渲染能力方面表现出色，适用于需要最高图形质量的项目。Babylon.js在质量和易用性之间取得了平衡。

结论

Babylon.js的学习和制作成本要低于three.js，相对而言它的一些封装做得更便于开发者的使用，同时更贴近于开发需求。另外一方面，社区的支持上，babylon.js的官方维护得更加出色，这是官方层面的技术支持，但是three.js毕竟由来已久，除开官方层面的一些资料和插件支持则会更加丰富，更利于灵活开拓我们的项目。