WebGL Immersive Experiences
Three.js, PlayCanvas, Babylon.js or A-Frame Based Web Content
WebGL is a way of showing interactive 3D content online, on any browser or device (dependant on complexity and device performance of course ;-). It is plugin free and cost free – open source.
We use WebGL on a lot of client projects at Visualise, from web based augmented experiences (Web AR) through to interactive virtual environments or products. WebGL is an incredibly powerful tool.
Building content in WebGL is getting increasingly relevant as people are less comfortable or willing to download new apps; there is a greater expectation on experiences being run ‘in browser’.
There are a lot of well known ways of building WebGL experiences, including three.js, babylon.js, PlayCanvas and A-Frame, we have used them all.
We have built a range of content in WebGL, here’s a few of our highlights below:
The world of WebGL has a lot of acronyms and confusing titles, below we’ll demystify a few of them.
Three is the purest of the WebGL codes, it’s like making an app in native code rather than using an engine like Unity or Unreal. This means you can get the smoothest possible and best optimised content, but, you’ll need the extra time and budget as you’ll be coding nearly all of the experience from scratch. One of our favourite three.js based experiences is this virtual configurator for the Genesis.
PlayCanvas is like the Unity of WebGL, it’s a set of tools you can use to build web based experiences. It’s great for quickly building and delivering immersive online content but it can be a little limited if you’re looking to do something outside of the box. Also, it carries a fair bit of ‘baggage’ in terms of file size/loading size that you don’t have with natively coding in three.js. A very good option nonetheless. Our Kia Inspiration Lab for the EV6 was built in PlayCanvas.
Babylon.js is an incredibly powerful set of tools for elegantly making webGL experiences. It is open source and well supported by a passionate community of artists and developers. It sits somewhere between three.js and PlayCanvas in it’s benefits and drawbacks, being highly optimisable, low weight in code and coming with a set of tools to help create different experiences. Our favourite of the Babylon.js experiences is Nike’s ACG Experience.
A-Frame is a web based frame work for building VR focussed experiences. It can actually also be used in lots of other ways now, including web based AR experiences and interactive mobile and desktop based 3D experiences.