Babylon.js is an open-source, Apache-2.0 licensed 3D game and rendering engine written in TypeScript, built for JavaScript and TypeScript developers who want to create browser-based 3D games, visualizations and WebXR experiences inside a friendly JavaScript framework.

What it is

Babylon.js is a real-time 3D engine and rendering framework that runs in the browser. It is written in TypeScript, published under the Apache-2.0 licence, and lives in the JavaScript and npm ecosystem as the package babylonjs alongside a set of follow-on modules published under the same npm user. The engine targets WebGL, WebGL2 and WebGPU as its rendering backends, and it also covers WebAudio for sound, plus WebVR and WebXR for virtual and augmented reality headsets. A scene is assembled from a small number of familiar objects: an Engine bound to a canvas, a Scene, a camera such as FreeCamera, lights such as HemisphericLight, and geometry produced by builders such as MeshBuilder.CreateSphere and MeshBuilder.CreateGround. The render loop is driven by engine.runRenderLoop.

The concrete problem it solves is the amount of low-level graphics work that would otherwise stand between a developer and a finished interactive 3D application. Rather than writing shader programs, camera math, mesh generation and input handling from scratch against a raw WebGL context, a developer constructs a scene declaratively and lets the engine manage the rendering pipeline. It effectively replaces hand-rolled WebGL rendering code and the bespoke scene graphs that teams typically end up maintaining themselves, packaging the whole rendering stack into a framework that TypeScript projects can import directly and type-check against.

Key capabilities

• Renders through multiple backends, with topics covering webgl, webgl2 and webgpu, so the same scene code can target different graphics APIs.
• Provides virtual and augmented reality support through webvr and webxr.
• Ships an audio layer through webaudio topics for sound in browser scenes.
• Publishes to npm as babylonjs with full typing support, installed with npm install babylonjs --save.
• Offers ES6 packages that enable tree shaking and other bundling benefits over the umbrella package.
• Exposes a hosted playground at playground.babylonjs.com containing many samples for learning the API.
• Integrates with TypeScript projects by adding "babylonjs" to the types array in tsconfig.json.

Who uses it and how

• Game developers building browser-based 3D titles, as reflected in the game-development, game-engine and game-engine-3d topics.
• Teams producing immersive experiences for headsets, using the webvr and webxr topics.
• TypeScript application developers who import individual classes, for example import { Scene, Engine } from 'babylonjs';, to keep bundles lean.
• Developers prototyping in the hosted playground before committing to a project structure, then moving code into their own build.
• Projects serving engine packages from their own content delivery network once applications leave the experimental stage.

Getting started

Install the package from npm with npm install babylonjs --save, or rely on the ES6 packages for tree shaking. The README points to the hosted playground at playground.babylonjs.com for immediate experimentation, and to the Getting Started documentation for the canvas, Engine, Scene and runRenderLoop workflow.

How it compares

No list of paid products that this project replaces is provided in the facts, and no comparable tools are named either, so Babylon.js stands alone in this registry. Readers looking for alternatives should evaluate candidates against the Apache-2.0 licence and the WebGL, WebGL2 and WebGPU backends documented here.

When to use it — and when not to

Babylon.js suits developers who are comfortable in JavaScript or TypeScript and who want a browser-native 3D engine with an explicit, typed API. The README carries a clear warning that the project's own CDN must not be used in production, so anyone shipping a real application must operate their own package hosting or CDN for engine assets. Teams without web development skills, or projects that need a native desktop or console renderer rather than a browser target, should look elsewhere; the facts here describe a web-first engine and nothing else.

npm install babylonjs --save

import * as BABYLON from 'babylonjs';

import { Scene, Engine } from 'babylonjs';

    ...
    "types": [
        "babylonjs",
        "anotherAwesomeDependency"
    ],
    ...

// Get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// CreateScene function that creates and return the scene
var createScene = function(){
    // Create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);
    // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // Target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attach the camera to the canvas
    camera.attachControl(canvas, false);
    // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // Create a built-in "sphere" shape using the SphereBuilder
    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2, sideOrientation: BABYLON.Mesh.FRONTSIDE}, scene);
    // Move the sphere upward 1/2 of its height
    sphere.position.y = 1;
    // Create a built-in "ground" shape;
    var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 6, height: 6, subdivisions: 2, updatable: false }, scene);
    // Return the created scene
    return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
    scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
    engine.resize();
});