Welcome to the getting started tutorial in the ongoing BabylonJS Tutorial Series. Today we are going to look at creating our first simple Babylon application setup and running. As always there is a HD video version of this tutorial available here or embedded down below.
To get started with BabylonJS, we need a web page containing a <CANVAS> tag to host our application.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#canvas {
width:100%;
height:100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
Nothing special here. We simply create a canvas tag named canvas, style it so it takes up the entire page and that’s about it. Now we need to link to the BabylonJs library. You’ve got a few options here, you can download it locally or host it from a content delivery network (CDN). I’ll take this approach, as it’s generally the fastest option for end-users. You can even create a stripped down version with only the required features here.
The options for using BabylonJS include:
Babylon.max.js is the most human-readable of the versions, making it the easiest to debug but the slowest to load. During development, this is the version I am going to use. Simply link to this library somewhere within the <HEAD> tag of our HTML.
<script src="http://cdn.babylonjs.com/2-4/babylon.max.js"></script>
We have our host webpage setup and Babylon linked, time to finally get down to some code. Below our canvas, add the following code:
<script>
window.addEventListener('DOMContentLoaded', function(){
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function(){
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.
Vector3(0, 0,-10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
return scene;
}
var scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
});
</script>
When we run this code we should see:
Humble beginnings certainly, but our first running app is complete. So what are we seeing here? It’s an unlit cube viewed by a camera looking at the origin from –10 units down the z-axis. Let’s take a quick look at the code that got us here. First, we create a function that we call on DOMContentLoaded event fired, so basically when our page is loaded, this function is called. Let’s walk through the function.
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
This code gets a reference to the canvas tag we created in our HTML file. We then use this canvas to create an instance of our Babylon game engine.
var createScene = function(){
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 0,-10),
scene);
camera.setTarget(BABYLON.Vector3.Zero());
var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
return scene;
}
Here we are creating a function that will setup our scene. First, we create a new Scene using our newly created engine. We then set the clear color to white. The clear color is the color that each frame is cleared with between calls, essentially setting the background color to white. Next, we create a FreeCamera named “camera1”, located at –10 along the Z axis in our scene. Next, we set the target to the origin (0,0,0). We will go into more detail on cameras shortly, so let’s skip over this for now. Then we create a cube at the origin named “Box” that is 4x4x4 in dimensions. Notice in both when we create the Camera and Box we pass the scene in. This causes these entities to be created in that particular scene. Finally, we return our newly created scene from our function.
var scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
Next, we create our scene by calling our just defined createScene() function. We then start our game loop calling engine.runRenderLoop(). The game loop can be thought of as the heart of our game. This is a loop that will be called over and over as fast as possible. If for example, your game is drawing at 60FPS, this function is called 60 times in a second. For now, all we do is call scene’s render() method, which causes the contents of that scene to be drawn.
Here now is the code in its entirety. ( A WebStorm project is available in the GFS Patreon Dropbox directory Tutorial Series –> Babylon for backers )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.babylonjs.com/2-4/babylon.max.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.
Vector3(0, 0, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
var box = BABYLON.Mesh.CreateBox("Box", 4.0, scene);
return scene;
}
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
});
</script>
</body>
</html>
That’s it for now. In the next part, we will explore cameras in more detail.
The Video