This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

introduce

Both Three.js and Babiel. js are the encapsulation of Webgl. Three.js is relatively early, and the number of users and the community activity are higher than Babylon. Fortunately, the official community responds quickly. In terms of functions of the two frameworks, there is basically no case that one can implement the other, but babyl.js can use webGPU. Source code: Babylon is based on Typescript, and most of the three.js code is es5, so it may be more readable to read.

Core class comparison

To create a scene simple scene for example, first render the scene of the three elements, scene, camera, renderer.

The renderer

The renderer in Three is the WebGLRenderer, and the renderer class in Babylon is the Engine, both of which are apis that encapsulate WebGL. use

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

The attributes passed in are the same: canvas, anti-aliasing, etc.

scenario

Both libraries have Scene classes. The Scene of three. js, like the object in the Scene, inherits the base class of Three.js, Object3D. This class has the children attribute, which is used to store the child objects owned by this object. For a scene, its child objects are the entities that are owned in the scene.

Babylon. Js has a richer role in the Scene than three. js, which stores all the objects in the Scene, including VertexData, corresponding Geometry of vertices, nodes, material objects, animations, etc.

// ibible.js const scene=new three.scene () // Ibible.js must be passed to the rendering engine corresponding to the scene const scene=new ible.scene (engine)Copy the code

The camera

Two PerspectiveCamera and OrthographicCamera are commonly used in three.js. They also inherit from the base class (Object3D), except that they encapsulate perspective matrices and orthogonal matrices.

Babylon. Js camera features a variety of features, including

  • Universal Camera, a Camera used primarily for FPS games
  • Arc Rotate Camera is a Camera used mainly in 3D editor
  • FollowCamera, a camera that can follow an object

These cameras can be switched to perspective mode or orthogonal mode.

// three.js const camera = new three.perspectivecamera (75, window.innerwidth/window.innerheight, 0.1, 1000); // Babible.js rotates the camera as an example, which can be imagined as a satellite around the earth. 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);Copy the code

Draw the Box

To draw a grid,

  1. Create geometryConst geo = new BoxGeometry,1,1 (1)
  2. Create the materialconst material=new MeshBasicMaterial()
  3. Create a gridconst box=new Mesh(geo,material)
  4. Add to scenescene.add(box)

Babibs.js draws a grid

  1. Create a gridconst box=new MeshBuilder.CreateBox("name",{size:1})
  2. Create the materialconst material=new StandardMaterial()
  3. Application materialbox.material=material

In Babylon, a new Mesh automatically adds the Mesh to the scene.

Other differences

The Color of the Ambientcolor.three.js material corresponds to the diffuseColor of the Babylon material, which does not have the AmbientLight of three.js, but has a default global light color in the scene.

Experience with

The boilerplate features of Babibs.js, such as camera controls out of the box, make it easy to expand. However, the math library of Babylon. Js is not very comfortable to use, while the math library of Three. js is more intuitive to use, such as matrix transformation. As long as applyMatrix4,Babylon is relatively troublesome, providing Playground for online development and debugging