Three.js and Babylon.js: a Comparison of WebGL Frameworks

Joe Hewitson
Tweet

Today’s web browsers have come a long way since the days of Sir Tim Berners-Lee and his Nexus software. Thanks to fantastic JavaScript APIs like WebGL, modern browsers are fully capable of rendering advanced 2D and 3D graphics without help from third-party plugins. By leveraging the horsepower of dedicated graphics processors, WebGL gives our web pages access to dynamic shading and realistic physics.

As you might have guessed, such powerful APIs typically come with a drawback. WebGL is certainly no exception and its downside comes in the form of complexity. Fear not, however, as we’ve explored two thoroughly capable frameworks that aim to make your life easier and possibly even a touch more productive when working with WebGL.

The humble origins of 3D frameworks

The ever popular Three.js along with the newer Babylon.js offer web developers an abstract foundation for crafting feature rich WebGL creations ranging from animated logos to fully interactive 3D games.

Three.js got its start back in April of 2009 and was originally written in ActionScript before being translated to JavaScript. Having been created before the introduction of WebGL, Three.js has the unique convenience of a modular rendering interface allowing it to be used with SVG and HTML5’s canvas element in addition to WebGL.

Babylon.js, being the relative newcomer, broke onto the scene in the summer of 2013. Brought to you by the minds at Microsoft, Babylon.js was introduced alongside Internet Explorer 11’s first official support for the WebGL API. Despite originating from Redmond’s labs, Babylon.js (as well as Three.js) maintains an open source license.

A subtle difference in design

Both Three.js and Babylon.js present easy to use libraries for handling the intricacies of WebGL animations.

Following the scene, renderer, camera, objects model of animation, these frameworks find themselves using similar methods for WebGL use. Utilizing either in your HTML is as simple as a one line script statement linking the respective JavaScript file. Note: Babylon.js has dependencies that require the open source Hand.js be included as well.

Three.js:

<script src="three.js"></script>

Babylon.js:

<script src="babylon.js"></script>
<script src="hand.js"></script>

The main difference between the two lies in their intended use. While it may be true either of these frameworks can be shoehorned into creating the same 3D animation, it’s important to know what each was created to accomplish.

Three.js was created with one goal in mind: to take advantage of web based renderers for creating GPU enhanced 3D graphics and animations. As such, this framework employs a very broad approach to web graphics without focusing on any single animation niche.

This flexible design makes Three.js a great tool for general purpose web animations like logos or modeling applications (great examples can be found here).

Where Three.js attempts to bring a wide range of animation features to the WebGL table, Babylon.js takes a more targeted approach. Originally designed as a Silverlight game engine, Babylon.js maintains its penchant for web based game development with features like collision detection and antialiasing. As previously stated, Babylon.js is still fully capable of general web graphics and animations as evidenced by the demos found on the front page of its website.

Side-by-side demonstration of WebGL technologies

To further demonstrate both the similarities and differences of these two frameworks, let’s build a quick 3D animation. Our project of choice will be a super simple cube with a slow rotation applied. In creating these two sample projects, you should begin to understand how the two technologies gradually diverge and show off their unique strengths. With that, let’s get started.

The first order of business when building creative projects of just about any kind is to initialize a blank canvas within which to contain our 3D animation.

Three.js:

<div style="height:250px; width: 250px;" id="three"></div>
var div = document.getElementById('three');

Babylon.js:

<div style="height:250px; width: 250px;" id="babylon">
<canvas id="babylonCanvas"></canvas></div>
var canvas = document.getElementById('babylonCanvas');

With Three.js we simply create an empty div as our container for the animation. Babylon.js on the other hand makes use of an explicitly defined HTML5 canvas to hold its 3D graphics.

Next, we load the renderer which will be responsible for preparing the scene and drawing to the canvas.

Three.js:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
div.appendChild(renderer.domElement);

Babylon.js:

var engine = new BABYLON.Engine(canvas, true);

Nothing too fancy here, we just initialize the renderers (or engine in the case of Babylon.js) and attach them to our canvas.

Our next step gets a little more involved as we set up a scene to house our camera and cube.

Three.js:

var sceneT = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;

Babylon.js:

var sceneB = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera
("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);
sceneB.activeCamera.attachControl(canvas);

 var light = new BABYLON.DirectionalLight
("light", new BABYLON.Vector3(0, -1, 0), sceneB);
light.diffuse = new BABYLON.Color3(1, 0, 0);
light.specular = new BABYLON.Color3(1, 1, 1);

Here we create our scenes in almost identical fashion and then implement cameras (of which both frameworks support different types) from which we will actually view the created scenes. The parameters passed to the camera dictate various details about the camera’s perspective like field of view, aspect ratio, and depth.

We also include a DirectionalLight for Babylon.js and attach it to our scene to avoid staring at a pitch black animation later on.

With our canvas, scene and cameras all set up we just need to draw the cubes themselves before rendering and animating.

Three.js:

var cube = new THREE.CubeGeometry(100, 100, 100);

var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();

var material = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(cube, material);
sceneT.add(mesh);

Babylon.js:

var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);
var material = new BABYLON.StandardMaterial("texture", sceneB);

box.material = material;
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);

First, we create our cube objects of the specified size and then create our material/mesh (think texture) that will be painted onto the cubes. Any image file will work for the texture and both frameworks support mesh exports from 3D modeling tools like Blender.

In the final step we apply a gentle rotation for animation and then render the scene.

Three.js:

function animate() {
     requestAnimationFrame(animate);
     mesh.rotation.x += 0.005;
     mesh.rotation.y += 0.01;
     renderer.render(sceneT, camera);
}

Babylon.js:

engine.runRenderLoop(function () {
     box.rotation.x += 0.005;
     box.rotation.y += 0.01;
     sceneB.render();
});

Both Three.js and Babylon.js use an animation or render loop to update the canvas with a new, rotated drawing. You’ll also notice Three.js differs slightly from Babylon.js by attaching the camera at the point of render. Our end product is two cubes gently spinning in mid-air. Pretty easy, huh?

The tale of two frameworks

And there you have it. Two very capable WebGL frameworks built around the same foundation, yet focusing on different aspects of enhanced, Web based graphics.

You’ve seen first hand how similar their approaches to animation can be with both following the scene, renderer, camera, objects paradigm. Despite the similarities, Babylon.js subtly differentiates itself by focusing on traditional game engine requirements like engines and custom lighting.

In the end, these two relatively young frameworks enable web developers to more easily take advantage of the powerful 3D opportunities afforded by WebGL. As such, anyone with an interest in 3D web development should certainly take a closer look at this cutting edge technology.

Download demo code in zip file

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Petit Paul

    Note that WebGL in not supported by default in Safari, which is weird. One needs to activate it through the Develop menu, available from the advanced preferences tab.

    • Joe Hewitson

      Thanks for the tip Petit Paul!

  • OzTK

    BabylonJS is NOT a production of Microsoft, and it was not created in Redmond ;) . Its main creator is David Cathue, a french Microsoft employee. You can see the full list of contributors by clicking the “About” button on http://www.babylonjs.com/

  • Joe Hewitson

    Hey OzTK,
    Thanks for the clarification. While Babylon.js may not be an official MS product, it is in fact under a Microsoft open source license: https://github.com/BabylonJS/Babylon.js/

  • Oscar

    I used Three.js to develop my 2012 Xmas card clients, in my brother words “it’s fuc**** awesome!” (he’s 3D animator but using 3D Max and those stuff).
    It’s good to know there’s a new player in the field: Babylon.js, I can’t wait to play with them and develop something more practicall/crossbrowser than a presentation

  • will_rc

    Thanks OzTK It is important separate BagylonJS from Microsoft as there are an amazing number of people who would not consider in any rational unbiased way if they think there is any direct connection with MS :(

  • Ross

    My read on this is that Babylon is much more opinionated, as seen in your material and render loop examples. Three.js is a renderer, not a game engine. The better comparison would be with game engines built on top of Three.js, for example what we’ve done at Verold.

  • OzTK

    Yes, I didn’t know the license though. I imagine the project is personal but that Microsoft is largely aware and supportive of it.

  • OzTK

    Anyway this is a very inviting article to 3D/Game dev world. I’ve been wanting to go there since I started dev. This is a good opportunity for starting without the complexity of DirectX/OpengGL