Monday, 6 June 2016

Should I use WebGL?

WebGL is yet another browser technology that shrinks the gap between websites and native applications - it allows a website to have proper 3D animations with fairly impressive performance (due to being powered by the GPU). This is done via the native WebGL JavaScript API - no need for any plugins! As an example of what's possible, check out this car animation:


Who can use WebGL?


Since the first stable release in 2013, WebGL has been picking up great support recently, with Firefox, Safari, Microsoft Edge and IE11 all jumping on board. As of May 2016, roughly 91% of users in Australia and 84% globally can use this technology. Along with IE10 & below, the chief laggards are old Android stock browsers and Opera Mini (source - caniuse.com) - the latter being primarily an issue in Europe. This means that if you incorporate WebGL, expect vast majority of users (desktop & mobile) to enjoy your snazzy animation. However, you’re still going to need a fallback for years to come if you want to support 99%+ users.

What can I do with WebGL?


An amazing variety of things!

  • Depict some real life object more comprehensively (the car example above)
  • 3-axis data presentation (example)
  • Games (example)
  • Outrageous immersive experiences (example - this one’s from Disney, it’s very polished and probably cost a massive amount to develop!)

Challenges for the users


If the animations are fairly complex, a few difficulties can arise:

  • Substantial loading times, possibly half a minute or even more
  • Slower devices can struggle
  • Heavy on battery life

Challenges for development


Is this familiar?

What about this?

If not… you could be in for a real challenge. WebGL is unsurprisingly heavy on 3D maths, the type that you wouldn't have covered unless you did advanced maths in school or university. And these concepts can be a lot harder to learn than even a fully-fledged framework like AngularJS.

And even if you are adept at the required maths, it’s still a very time-consuming endeavour. If you’re choosing between injecting an image scroller of a blender vs rendering a 3D blender, it’s not hard to tell which is going take far longer to develop.

Likewise, there are challenges for the designers - Photoshop isn't sufficient to mock up a 3D website.

Suggested workflow


If your designers have prowess in producing 3D designs, then at it's simplest, you can follow a Waterfall-style management for producing a single component:

3D designer —> developer

With this, the designer produces files of the 3D models (e.g. CAD files) that the developers can then absorb in WebGL.

If your designers don't have that rarer skill, then it's necessary to take a very iterative approach for producing even the most basic single components:

designer <—> developer

With this, the designers envision concepts, then developers interpret those concepts to produce an output, then the designers review the output and propose changes. This scenario clearly has inefficiencies as the designer is unsure of what the final output should be. As such, it's worth doing comprehensive research for examples to describe specifically what is desired and what isn't.

So... when should I use WebGL?


If…
  • the topic & context of the web page is 3D
  • you’re trying to display a 3D diagram, object or concept
  • you’re creating an immersive experience to “wow” users, and they’d be happy to take time

then WebGL is potentially a great tool to incorporate.

And when shouldn't I use it?


If…
  • it’s a gimmicky/tacky application of the tool (think flaming text & marquee banners)
  • you need 99%+ user support
  • the project has insufficient budget for the complexity of WebGL and also for providing a fallback
  • your developers don’t have the required maths knowledge

then avoid the pain! Native apps have had great 3D frameworks for a long time, but most don’t use them - there are many good reasons for that.

Summing it up


WebGL is a great tool to add to your kit, providing immense value if used creatively and wisely. The technology is still young; the greatest need is better frameworks for making the workflow (real life —> 3D model —> WebGL page) faster and simpler, but that will come as more products are developed utilising WebGL, and contributions are made to the open source communities surrounding WebGL.

No comments:

Post a Comment