The Era of WebGL
it’s here to stay
Welcome to 2014: over 93% of your users have a screen resolution of 1280x1024 or higher, Chrome usage is over 43% (and climbing), and IE7 usage is at roughly 1%. This is all good news for the budding future of rich, browser-based media. Cat videos and Buzzfeed lists aside, web browsers have evolved into incredibly powerful tools for delivering a variety of other content: video games, virtual reality, data visualization, interactive film, digital art, museum installations, medical computing — the list goes on.
Powering the fluid rendering of these experiences is often a simple <canvas> tag. The 2D incarnation has grown by leaps and bounds in recent years; it’s damn fast on modern desktop and mobile browsers. But what excites me most is the rising support for WebGL, giving us a world of new rendering potential and plenty of applications to explore on the web.
interactive film
With over 70% of desktop now supporting WebGL, it’s far from the “toy” or “tech demo” it once was. Taking IE and Safari out of the equation boosts the support to roughly 85%. It has become a stable feature of Firefox and Chrome in the last year, and even Microsoft has joined the bandwagon with (admittedly lacklustre) support in IE11. Safari support for WebGL is there, but disabled by default. Mobile, too, is beginning to see a revolution in WebGL, already with almost 50% support on Android smartphones.
Unfortunately; many developers and users alike still see WebGL as a heavy, bloated tool solely for 3D games, with graphics that can never match those of current titles. While it does lack the capabilities of fully-fledged desktop OpenGL (or OpenGL ES 3), it supports enough for some truly impressive real-time graphics.
AlteredQualia
The above screenshot is from a WebGL demo by AlteredQualia.
(Be warned, the demo needs a pretty beefy computer to run.)
While this demo is beautiful and shows off the potential of WebGL on high-end hardware, it probably won’t help to dispel any notions of WebGL’s general bloat or sluggishness. After a brief stint at 10FPS, the demo crashed my iMac, forcing me to reboot.
Artur Vill
Perhaps a more fitting demo of pragmatic WebGL would be Artur Vill’s Escher Eye. It moves away from the typical “3D game” look that many have come to expect from WebGL, giving us a nicely performant and compact piece of art.
Away from the world of 3D, libraries like Pixi.JS and PathGL are helping to demonstrate WebGL’s worth for 2D visualizations, games, animations, and even entire web sites. Mat Groves’ POP! crackART is a little experiment that, to the average user, hardly seems like a WebGL application at all. This is a good thing.
Mat Groves
As the web moves forward, I hope to see more exceptionally mundane uses of WebGL for rich-media websites. Photo filters, hero banner interactions, text effects, 3D math and graph rendering, interactive education, WebGL-accelerated maps and panoramas, and plain old motion graphics, just to name a few.
In my next article in this series, I delve into the technical nitty-gritty and explore some hurdles and common solutions for producing efficient and non-intrusive WebGL content.
