October 7, 2015

3D Graphics with WebGL, Three.JS & Babylon.JS

3D-Visualization and gaming has come a long way since just two decades ago, when implementations required a lot of overwork, including third-party plug-ins, and in some cases also required capturing of motion graphics for commercial 3D gaming.

The results we found had always been awe-inspiring, but they often incurred huge costs and required countless hours of work behind the scenes. However, the options that we have today make this process much easier. This post will discuss how JavaScript provides us some great answers with WebGL and two of the APIs – Three.js and Babylon.js –that use WebGL to provide cross- browser solutions for 3D visualization and gaming.

What is WebGL?

WebGL is a JavaScript-based API that provides a medium to render interactive 3D and 2D graphics on any compatible web browser. The advantage here lies in the fact that there is no dependency on plug-ins. WebGL does this with the help of control logic implemented with JavaScript and shader logic that is executed on a Graphics Processing Unit (GPU). Code implementations for 3D graphics can be written directly in WebGL but it comes with some caveats, like a very high learning curve and the absence of graceful fall back in case of incompatibility. This is where two of the most flexible open source libraries, Three.js and Babylon.js, come to the rescue.

What are Three.js and Babylon.js?

These are JavaScript-based frameworks that handle the complexities of WebGL with ease and provide a user-friendly way of implementing 3D graphics. While Three.js was designed as a tool for general purpose web animations, Babylon.js was designed to take a more targeted approach for web-based game development and uses an extensive physics engine for collision detection and other intricacies involved for 3D graphics.

Possibilities with Three.js and Babylon.js

The possibilities are endless–from simulating an actual fluttering cloth to a simulation of an entire universe with plants to implementing a 360-degree view of a room. The rendering of landscapes and terrains are nearly perfect examples of the beauty of these frameworks. Below are a few examples of what can be achieved with these frameworks:

As a brief introduction, let us take a look at the interiors of Three.js. For any 3D visualization, we would require the following objects:

  • Camera
  • Scene–represents a list of objects that is displayed on-screen, like 3D models and lights
  • Geometry–the shape of objects, like cube, sphere, cylinder
  • Material–color, image, or texture that defines how a geometrical shape would be displayed
  • Mesh–composed of the geometry and material

To begin, we would implement an animated cube. The declaration of objects that we would need comes first:

var camera, scene, renderer;
var geometry, material, mesh;

We require two functions–init() and animate().

The init() function creates and sets the position of the camera, creates a cubic geometrical shape, defines the material of the mesh that the shape would be composed of, adds the shape and the mesh onto the scene, and renders the entire scene on a canvas element.

The code for the entire init() function is listed below:

3D Graphics with WebGL

There are multiple types of camera classes provided by Three.js, out of which THREE.PerspectiveCamera is used for a perspective view of the scene. The scene can be added with a mesh (where mesh is composed of a geometrical shape and the colour, or texture, or image that defines how the shape would look), which is implemented by using the THREE.MeshBasicMaterial class. Again, Three.js provides a vast collection of classes of material that can be applied to different geometrical shapes.

The most important aspect is the rendering of the objects that makes WebGL with Three.js or Babylon.js easy to work with. Three.js provides a class THREE.CanvasRenderer that renders the objects automatically on the HTML5 canvas element. This provides a very graceful fallback in case WebGL (which is dependent on the compatibility of the latest browsers) is not compatible with the browser being used at client end.

The animate() function makes use of the requestAnimationFrame() function to perform a call back of the animate() function itself, which updates the animation before the next repaint takes place in the browser. For this example, the rotation vector is updated for the mesh in the scene in any subsequent repaints. The code for the animate() function is listed below:

3D Graphics with WebGL

The animating Cube example can be viewed on the demo link.

This post has discussed a basic level implementation of 3D graphics in WebGL using the Three.js JavaScript library. In subsequent blogs, we will go further, discussing advanced usage of WebGL in tandem with these two libraries in implementing visualizations and 3D gaming.