Sunday, 28 May, 2017 UTC
Summary
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 babylonjsAdd a canvas element to the HTML body.
< canvas id="renderCanvas" ></ canvas > 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 amountlight.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 upwardcylinder.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.
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.