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 Babylon.js framework include scene graphs with lights, cameras, materials and meshes, 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 Babylon 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, we will 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);

‘cameral’ 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;

‘light1’ 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 object such as 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 paramters 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, scene. Refer the documentation to learn about these paramters.

Rendering loop

We must render the scene to make it visible.

var scene = createScene();

engine.runRenderLoop(function () {

scene.render();

});

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 the demo.

One thought on “Getting Started with Babylon.js

Comments are closed.