How to Use Babylon.js to Create 3D Rendering for the Web

WebGL is clearly a hot topic nowadays. Apple has just announced the availability of WebGL for Safari (without having to struggle with options) and iOS 8. This allows web developers to create 3D web sites that can really be used everywhere.

The main drawback of WebGL is the inner complexity. You have to deal with a lot of plumbing because WebGL is a really powerful but extremely low level. So before being able to just draw a plain triangle you will have to deal with a huge amount of code.

This is why with some friends we decided to create a high level API on top of WebGL: Babylon.js. You can find it here: www.babylonjs.com

Simplicity is the foundation of Babylon.js, which is why we want for each required feature within the framework, to use a minimal amount of code, thus providing total simplicity within that tool.

Getting started

To deal with WebGL, we created a class called Engine. This engine will hide all the plumbing for you.

Once an engine is created, you will be able to create a scene which is the container of all entities implied in a 3D rendering:

Lights: Define the light source

Cameras: Define your point of view

Meshes: They are the 3D objects

Materials: Define how a 3D object is rendered

So based on this, here is the smallest piece of code you have to write to setup everything:

// Once the scene is created, just register a render loop to render it

engine.runRenderLoop(function () {

scene.render();

});

// Resize

window.addEventListener("resize", function () {

engine.resize();

});

}

But you can even go simpler by using the sandbox: http://www.babylonjs.com/sandbox/. This tool allows you to drag’n’drop a .babylon file alongside textures and directly test it without having to setup a webserver.