June 2015

Monthly Archives

3D Graphics with HTML5 and Three.js

The 3D graphic capabilities introduced in HTML5 are being used to build creative User Experiences that are highly interactive in nature. Previous versions of HTML and JavaScript engines were not capable of rendering graphics fast enough to run 3D graphics, resulting in developers using Adobe Flash to render animations on the browser. With the introduction of enhanced features like WebGL, Canvas, SVG & 3D CSS Transforms in HTML5, building a web application with 3D graphic capabilities in the browser has become a reality. A User Interface with visual representations & interactivity could be an important differentiator in today’s competitive world.

However, it is a lot of hard work to build a 3D graphic in HTML5 and JavaScript. Fortunately, most of the native code to render 3D using WebGL has been abstracted into a simple library Three.js. Three.js is a library that makes WebGL – 3D in the browser – easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of JavaScript, a Three.js equivalent is only a fraction of that.

Before we get into an example of how to build a rotating cube wireframe using Three.js, let us understand 3D. In a 3D world, you would need the following

  1. A Scene
  2. A Camera
  3. A Renderer

This allows us to render a scene with a camera. Once the scene is setup, you can add objects to the scene to build your 3D world. A step by step guide to build a rotating cube is shown below.

//initialize attributes
var WIDTH = 400, HEIGHT = 300;
var VIEW_ANGLE = 75, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 10000;
var $canvas = $('#canvas'); 

// create a WebGL renderer, camera and a scene 
var renderer = new THREE.WebGLRenderer({ alpha: true }); 
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR ); 
var scene = new THREE.Scene(); 

camera.position.z = 150; 

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

In the above lines we initialize a few attributes, which are used to create the renderer, the camera and the scene. We then create a cube (object) to place in the scene and set its material to be a mesh grid.

// create the sphere's material
var material = new THREE.MeshBasicMaterial(
    color: 0x3498db,
    wireframe: true

var cube = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 5, 5, 5 ), material );

We then add the camera and cube to the scene.


and finally render the scene.

function render() {

    //rotate the cube
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);

We have added a rotate animation to add some visual delight. That’s all! Your first 3D graphic animation in HTML5 is ready. View CODE and DEMO in JSFiddle.

Achieving 3D animations in browsers natively is a lot of fun and opens the doors for a lot of cool user interfaces, which were not possible earlier. Interactive maps, navigation apps, visual reporting are just some of the use cases where a delightful and meaningful User Experience can be given. Applications that differentiate themselves by providing non-traditional user interfaces are gaining traction much faster than competition.

Indoor Map using Magnetic Fields

Location Based Services are increasingly being used to present contextual information to the user. With Google Maps charting the entire globe, it is trivial to add geo capabilities to your application. In today’s world, many apps & services use maps as the primary interface to interact with users. Services like taxi booking or house rental have seen significant increase in application usage, when using maps as their primary interface.

The primary technology used in accurately locating a device is GPS (Global Positioning System). However this technology only works well when outdoors, limiting the usage to outdoor map based services. There is immense scope to build innovative apps & services, if a user location can be tracked to an accuracy of a couple of metres within a mall or a building. This has led to technology companies trying to find a feasible solution for Indoor Mapping.

Various technologies like Bluetooth, Wi-Fi, Inertial Measurements have been applied to find a solution. iBeacon from Apple, Cisco Wireless Location Appliance are products attempting to dominate this space. Another very interesting technology that is being applied to solve this last frontier of digital cartography is Geo-Magnetism.

Magnetic Field Models are used for navigation by various government agencies and can be measured by a sensor on or above the surface of Earth. Of the various sources that generate magnetic fields, it is the Earth’s main magnetic field that accounts for 95% of the field strength at the Earth’s surface. The World Magnetic Model maintains such a Magnetic Field Map and updates it every 5 years (last released in 2015). The magnetic field components X (northward), Y (eastward), Z (downward), F (field strength), D (declination), I (inclination), and H (horizontal strength) are measured in geodetic co-ordinates.

Magnetic positioning can offer pedestrians with smart phones an indoor accuracy of 1–2 meters with 90% confidence level, without using the additional wireless infrastructure for positioning. Magnetic positioning is based on the iron inside buildings that create local variations in the Earth’s magnetic field. Un-optimized compass chips inside smart phones can sense and record these magnetic variations to map indoor locations. This technology is independent from external infrastructures such as radio access points and can provide scalability without large infrastructure investments.

The Android OS through Geomagnetic Field provides support to retrieve the magnetic field co-ordinates from hardware components. Similar support is provided by the Magnetometer in iOS. App developers can leverage this technology to provide fairly accurate Indoor Mapping, opening up a world of new business opportunities. Indoor Mapping can be applied to various use cases like Location-Based Mobile Marketing & Indoor Navigation in Shopping Malls, Airport, Academic Buildings, Train Stations, Stadiums, Parking Spaces, Hospitals, Cruise Ships or Business Parks.