Getting Started With Babylon.js

Babylon.js is a JavaScript framework for building 3D games with HTML5, WebGL, and Web Audio. The framework embeds all the necessary tools to handle specific 3D applications. Some of the key features of the Babylon.js framework include scene graphs with lights, cameras, materials and meshes, a collisions engine, physics engine, audio engine, and optimization engine at the core.

In this article, let’s create a simple demo using this framework. To understand this framework, you don't require any prior experience in game development.

Prerequisites

Download the library from GitHub or link it through cdnjs. If you are using npm, you can do as follows:

npm install babylonjs

HTML Structure

Add a canvas element to the HTML body.

<canvas id="renderCanvas"></canvas>

Creating a Babylon 3D Engine

Let’s initialize an engine using the above canvas element.

let canvas = document.getElementById("renderCanvas");

let engine = new BABYLON.Engine(canvas);

Note that the BABYLON global object contains all the Babylon.js functions.

Creating Scene, Camera, and Light

First, let's create a function. Within this function, we will define our scene, camera, light, and geometrical objects.

let createScene = function () { 
// code goes here.
}

A scene is the place where all the game content is displayed. Let’s create a scene to add basic scene requirements: a camera, a light, and some 3D objects.

let scene = new BABYLON.Scene(engine);

// Change the scene background color to black.
 scene.clearColor = new BABYLON.Color3(0,0,0);

There are many cameras available in Babylon.js. We are going to use the most basic camera, i.e., FreeCamera in our demo.

let camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 7, -9), scene);

‘camera’ is nothing but a name of the camera. FreeCamera has many properties that you can use to adjust your view. Some of the most commonly used properties are position, rotation, speed, inertia, and fov. BABYLON.Vector3() defines a 3D position on the scene.

Now, attach the camera to the canvas.

camera.attachControl(canvas, false);

Babylon.js comes with several light sources. Let’s add a light to the scene.

let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 1.5), scene);

// Dim the light a small amount
light.intensity = 0.6;

‘light’ is the name of the HemisphericLight and the parameters are similar to the camera above.

Geometrical Objects

There are some basic elements available in Babylon.js. Let’s create some geometrical objects such as a cylinder.

let cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene);

// Move the cylinder upward
cylinder.position.y = 2;

The parameters for the cylinder are name, height, diamTop, diamBottom, tessellation, heightSubdivs, scene, updatable, and the optional side orientation (see below). The last two parameters are omitted in our demo. Refer the documentation to learn more about these parameters.

Creating Ground

Add the following snippet to create an instance of ground.

let ground = BABYLON.Mesh.CreateGround("ground", 8, 13, 8, scene);

The parameters for ground are name, width, depth, subdivs, and scene. Refer the documentation to learn about these parameters.

Rendering Loop

Finally, we must render the scene to make it visible.

var scene = createScene();

engine.runRenderLoop(function () {
    scene.render();
});

The engine's runRenderLoop() executes renderLoop() repeatedly on every frame. This loop will continue to render indefinitely until it is explicitly told to stop.

See the completed demo at CodePen.

Conclusion

Babylon.js has an official forum if you have any questions. It also has numerous tutorials and documentation to help you get started. The playground allows you to experiment and train. The sandbox allows you to drag and drop exported Babylon.js scenes to see the results in real-time.

I hope that you’ve enjoyed a few insights behind the development of this demo.