babylonjs

Babylon.js

• We recommend using the Core ES6-supported version;

Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it.

Any questions? Here is our official forum.

CDN

• https://cdn.babylonjs.com/babylon.js
• https://cdn.babylonjs.com/babylon.max.js

For the preview release, use the following URLs:

• https://preview.babylonjs.com/babylon.js
• https://preview.babylonjs.com/babylon.max.js

npm

BabylonJS and its modules are published on npm with full typing support. To install, use:

npm install babylonjs --save

This will allow you to import BabylonJS entirely using:

import * as BABYLON from 'babylonjs';

or individual classes using:

import { Scene, Engine } from 'babylonjs';

If using TypeScript, don't forget to add 'babylonjs' to 'types' in tsconfig.json:

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

To add a module, install the respective package. A list of extra packages and their installation instructions can be found on the babylonjs user on npm.

Usage

See Getting Started:

// 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; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
    // Move the sphere upward 1/2 of its height
    sphere.position.y = 1;
    // Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
    // 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();
});

Documentation

• Documentation
• Examples

Contributing

Please see the Contributing Guidelines.

Useful links

• Official web site: www.babylonjs.com
• Online playground to learn by experimentating
• Online sandbox where you can test your .babylon and glTF scenes with a simple drag'n'drop
• Online shader creation tool where you can learn how to create GLSL shaders
• 3DS Max exporter can be used to generate a .babylon file from 3DS Max
• Maya exporter can be used to generate a .babylon file from Maya
• Blender exporter can be used to generate a .babylon file from Blender 3d
• Unity 5 (deprecated) exporter can be used to export your geometries from Unity 5 scene editor(animations are supported)
• glTF Tools by KhronosGroup

Features

To get a complete list of supported features, please visit Babylon.js website.

Changelog

7.43.0

Core

• Shader material improvements - by kircher1 (#16048)
• Mesh: Make cloning thin instances optional - by Popov72 (#16046)
• WebGPU: fix crashes in Firefox and Safari - [Bug Fix] by Popov72 (#16045)
• Fix lineMesh cloned alpha values - [Bug Fix] by sebavan (#16043)
• Mesh: fix LOD management - [Bug Fix] by Popov72 (#16038)
• Morph target manager: Don't recreate texture if not needed when updates are re-enabled - by Popov72 (#16036)
• If HTTP connection closed prematurely, consider retry - by djn24 (#16025)
• FrameGraph: Add support for node materials to the frame graph geometry renderer - by Popov72 (#16034)
• GreasedLine OIT support - by RolandCsibrei (#16033)
• Fix Animation loop in CreateAndStartAnimation - by sebavan (#16032)
• Add getter for tagged entities in asset container - by HoferMarkus (#16029)
• SubMesh: pre-allocate buffers for _getLinesIndexBuffer - by kzhsw (#16030)
• Make position morph binding as optional in renderers + enable other attrib type morph - by noname0310 (#16024)
• FrameGraph: add glow layer block and task - by Popov72 (#16026)
• WebGPU: Fix conflicting variable type in GreasedLine shader - by Propolisa (#16027)

GUI

• Minor allocation optimization - by kircher1 (#16031)

Inspector

• Take new viewer out of preview/alpha - by ryantrem (#16049)

Loaders

• Fix asset container mesh for GS - [Bug Fix] by CedricGuillemet (#16035)

Materials

• Fix NormalMaterial with ThinInstances - by sebavan (#16028)

Node Editor

• Take new viewer out of preview/alpha - by ryantrem (#16049)