3D experience in a browser with Three.js

Three.js is a library for rendering 3D models into a browser, without using Flash or other third-party plugins. In 3D graphics, the actual model of a scene is built in a solid space (three dimensions, obviously), and depending of the current view point, lighting and other parameters a new view is generated. Usually thirty times a second...

The technology side

Three.js, as the name suggests, it written in pure JavaScript. It supports many browsers due to its different backends:

• WebGL is the only driver able to outsource the work to a GPU, and free the JavaScript interpreter of an heavy load. 3D graphics is one of the most CPU intensive applications of computing, to the point that not even Moore's law has stopped the development of hardware for specific use (and graphic cards come out every week.)
• The canvas element is part of the HTML 5 standard, but it was introduced before by Webkit and then Gecko browsers several years ago.
• SVG is a 10-year-old standard originally based on XML (before there were JavaScript bindings) and predates modern browsers. As such, it is the most widely supported option, since even Internet Explorer (9.x) will work with it.

Domain side (3D models)

Three.js models concepts like a scene and the object present in it, a renderer, and a camera. It requires at least a primer in 3D graphigs: for example, the Lambertian and Phong reflection models to specify for surfaces are domain specific terms.

Most of the concepts I've seen in the examples are accessible to computer engineers: 3D cartesian coordinates, a camera with an aspect ratio, and solid geometry.

I didn't see any matrices, so I think the library encapsulates well the more advanced math; it's not funny to implement calculus in JavaScript for a standalone application, and the job of the library is to outsource the boring, error-prone bits.

Full of examples

The examples provided by Three.js are visually stunning if you think several years ago alert() was the most reliable JavaScript construct. I can't really add to this article something better with code, but I advise you to follow the links on the pictures for online examples, or to clone the Github repository for greater speed. In this panorama, you can rotate the camera with the mouse to see the whole sky, and zoom in and out seamlessly:

The performance will depend on your browser too: I have tried it with Firefox and Chrome, and the former is noticeably less responsive.

In the examples, usually the orientation of the camera follows the mouse, or it is draggable with a click and zoomable with the scroll. The examples guarantee 30 to 60 frames rendered per second, but of course the amount of detail required may lower the performance.

By the way, since I know all developers are hungry for code, here is how the code looks like (non functional sample, just initialization):

// set the scene size
var WIDTH = 400,
    HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
                   VIEW_ANGLE,
                   ASPECT,
                   NEAR,
                   FAR );

var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

You can check the examples out by loading the examples/ folder of your working copy.

The quality of the renderings feels a bit like the first Tomb Raider games: grainy from particular points of view, and sometimes noting cover the whole browser window due to the limits in the 3D model. However, some of the manipulations done by Three.js were possible only with Flash in the past. Once I saw Formula 1 implemented in Flash, complete with reflections of trees into the cars; but how bright does the future of Flash look? At the same time JavaScript will soon run even on washing machines.

We are at the start of the journey of 3D in the browser, and it's promising. After all, Tomb Raider games were a huge success, even on consoles like the first Playstation where they provided an inferior performance with respect to PCs.