Choosing the Right 3D Engine for Metaverse Projects: From WebGL to BabylonJS

Metaverse and 3D Fundamentals

The metaverse is a persistent, decentralized 3D virtual world that can be accessed through VR/AR headsets, smartphones, PCs, or consoles. A "3D virtual world" consists of three‑dimensional space, virtual objects, and a collection of such objects that together form an interactive environment.

3D Technology Selection

WebGL – Low‑Level API

WebGL is a JavaScript API that renders high‑performance 3D graphics directly in browsers without plugins. It requires detailed knowledge of shaders, matrix mathematics, and geometry, making even a simple "Hello World" example exceed 40 lines of code.

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
const vertex = `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 1.0, 1.0);
  }
`;
const fragment = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const points = new Float32Array([
  -1, -1,
   0,  1,
   1, -1,
]);
const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
const vPosition = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

Evaluation of 3D Engines

Unity 3D – Feature‑rich and widely used but requires a paid license (≈ $1800 / year for individuals); omitted during the research phase.

LayaAir (Layabox) – Supports JavaScript/TypeScript and can import Unity assets, but the free tier lacks IDE features and forces a "Powered by LayaAir" notice, which conflicted with commercial requirements.

Egret – Originally a 2D HTML5 engine; 3D support is immature, documentation is sparse, and onboarding is difficult.

Godot – Completely free and cross‑platform, yet generated models are large, rendering quality is lower, and WebGL output does not work on iOS browsers.

Choosing BabylonJS

Between Three.js (a library that wraps WebGL) and BabylonJS (a more modular framework), BabylonJS was selected for its clearer module structure, extensive learning resources, and overall suitability for the project.

Development Workflow

Project Concept

The team built a virtual shopping mall where a 3D avatar can walk among products, preview items, and switch between different venue scenes.

Asset Format Decision

The .gltf format was chosen because it stores geometry, materials, textures, and animations in a compact JSON/GLB container, eliminates redundant data, reduces file size for mobile loading, and supports extensions such as multiple textures and skeletal animation.

Key Technical Challenges and Solutions

Model Bounds

Problem: No validation of model scale caused assets to appear excessively large or small.

Solution: Define a unified world unit (e.g., 1 unit = 1 meter) and enforce it in the asset pipeline; reject or rescale models that fall outside the 0.1 – 10 meter range.

Collision Detection

Problem: Avatar could pass through scene geometry.

Solution: Export an additional low‑poly invisible mesh for each visual model and use it as a physics collider. In BabylonJS, create a PhysicsImpostor with MeshImpostor and enable a simple navigation mesh to steer the avatar around obstacles.

Before optimization:

After optimization:

Scene Switching

Problem: Camera orientation reset or rotated when switching scenes.

Solution: Keep a single active ArcRotateCamera instance. Disable input controls for inactive scenes during initialization and enable them only after the target scene becomes active, ensuring a single source of control.

Memory Consumption

Problem: Accumulated textures and meshes caused high RAM usage, leading to device heating and frame drops.

Solution: Call scene.dispose() for scenes that are no longer visible, release textures with texture.dispose(), and use BabylonJS’s Engine.enableOfflineSupport to cache only required assets.

Before optimization:

After optimization:

Demo Showcase

Scene switching and product material changes are demonstrated in the animated GIFs above. A live preview is available at the following URL:

https://storage.360buyimg.com/pubfree-bucket/babylon_test/6da49f0/index.html

Conclusion

The early experiments confirm that a Web‑based metaverse experience is feasible with BabylonJS, but many aspects—such as asset pipeline automation, advanced physics, and cross‑platform performance—remain immature and require further research.