3D on the web

The world is hungry for new experiences and users are constantly changing the way they consume media. So with the rise of 3D cinema and 3D printing, it’s little wonder why web users are now looking for a 3D experience online.

And although nearly all modern computers, and most smartphones, come with the powerful graphics processors to create such experiences, most web pages and mobile websites simply couldn't use them. This meant users experienced slow, low-quality graphics, almost always in 2D.

The arrival of WebGL is changing the game, opening up new, interactive web experiences and redefining the user journey.

A graphics game-changer

3D content in web browsers is not a new concept, in fact it’s been around for a few years but it either relied on Flash or a similar tool to achieve the effect.

WebGL brings hardware-accelerated 3D graphics to the browser without installing additional software. Based on the well-known OpenGL 3D graphics standard, WebGL gives JavaScript plugin-free access to the graphics hardware, all done via the HTML5 canvas element, allowing designers and developers to create realtime 3D graphics in web pages.

From a user’s perspective, WebGL creates websites that contain rich interactive experiences, with hardware accelerated 3D now possible across multiple platforms. For developers, 3D effects can now be used to create stunning designs while also making key information stand out.

3D has come a long way in a short time

Up until 2011, the main tool for 3D in the browser was Flash - cue shudder. CSS3 was around, but it was still highly experimental and not fully adopted. Requiring no plugins to run, WebGL solved one of the biggest problems that came with rendering interactive 2D & 3D computer graphics.

Now it wasn’t without its problems, with early releases not being supported by many of the commonly used browsers. Luckily, that all changed when WebGL was released in the latest versions of Internet Explorer/Edge. With support across multiple browsers and devices, WebGL is bringing immersive experiences to users across the globe.

The tools for WebGL development are still developing but a number of libraries have been created. At the top of the list is the open-source Three.js - widely touted to become the JQuery of WebGL.

The options are endless

One of the biggest benefits to WebGL is the almost endless options it provides developers.
It can be applied to:

  • Interactive Music Videos
  • Games
  • Mapping/GIS/Topographical Survey Software
  • Data Visualization
  • Art
  • 3D Design Environments Space & Object Modeling, and more

So whether it’s a visual gimmick, something interactive for the visitor to play with or a functional tool (such as IKEA's web based kitchen designer or home builder Mcdonald Jones’s Virtual Tours) the power is in your hands!

McDonald Jones let’s you explore - and interact with - display homes from the comfort of your couch

Hollywood calling!

Among the many people to embrace this new technology, Warner Bros. built their very own WebGL experience to promote their movie Gravity. Users could explore the space shuttle, Hubble telescope and the international space station all in an amazing 3D experience.

NASA even jumped on board when they developed an interactive web application called Experience Curiosity to celebrate the 3rd anniversary of the Curiosity rover landing on Mars. Users could operate the rover and even take control of its cameras and robotic arm.

Experience Curiosity: taking a selfie. Image source

It’s these types of interactive experiences that are helping to build new audiences while reconnecting with those who have disengaged with traditional content.

Join the 3D revolution

With WebGL set to replace 'apps' on mobile and software on computers as the main source for 3D experiences, the future of the web looks to be firmly planted in the 3rd dimension.

Putting 3D to good use can make your website stand above the competition and bring attention to your marketing campaign. As the competition for client engagement increases on the web, adding an immersive and interactive experience to your site using WebGL is definitely something to think about.