The current state of WebGL

The current state of WebGL

Update: User pyalot on reddit has pointed me towards an excellent site for tracking WebGL usage and statistics: https://webglstats.com/.

WebGL Stats uses a tracker frame embedded in other sites to collect the data. You can help too, just embed the code below into your page.


Back to the original post.

The web is a constantly evolving organism, where some parts advance more quickly than others. In the 3 years that WebGL has been around, adoption has continued to grow at an increased rate. Just this week, both Apple and Google announced improved support for it in their browsers.

WebGL arrives in Apple’s Yosemite update for Safari

With the release of OSX Yosemite this week, Apple announced not only WebGL support for Safari, but a an LVVM compiler for improved JavaScript performance. Here’s some of the buzz around it, and this Ars Technica article does a great job explaining the new compiler updates in this article.

As usual, the new Safari provides a nice speed bump over the old version. The most significant new optimization is in the JavaScript engine. Safari 8 uses the LLVM compiler back end to optimize JavaScript code that has executed frequently enough to make the compilation time worthwhile.

The WebKit development team has posted a detailed technical overview of this new system, dubbed the Fourth Tier LLVM JIT, or FTL for short. This, along with the three preexisting optimization tiers employed by WebKit, highlights just how much engineering time and effort goes into making a dynamic language like JavaScript execute quickly. (This will be relevant later.)

Safari on iOS 8 will support WebGL

The folks at Scirra, creators of the Construct 2 gaming framework, were jumping for joy in June when Apple announced WebGL support for the latest iOS (8) release.  They do an excellent job of explaining it in the previous link, but here’s a quick blurb:

In case you didn’t know, Construct 2 supports two renderers: a basic no-frills “canvas2d” renderer, and a low-level OpenGL-based WebGL renderer. The WebGL renderer is chosen first if it’s available because WebGL mode is a lot faster and it supports awesome visual effects.

This means faster and better looking games from iOS 8. On an iPhone 4S we’ve seen the Space Blaster performance test get topped up from 40 FPS to 58 FPS, and other demos with heavy use of particles or tiled backgrounds going from under 20 FPS to a solid 60 FPS. This is huge – finally the true performance of the often powerful iOS devices has been unlocked!

In short:

1) The web is a platform

2 The end of wrappers

3) Faster JavaScript via LLVM JIT

Android Lollipop

Google’s latest update to their Android OS (5.0 – Lollipop) comes with an improved set of web standards. This includes support for OpenGL ES3.1 on the devices themselves (which is used for native code), but also WebGL support, as we’ll see in the next paragraph.

Support for Khronos OpenGL ES 3.1 now provides games and other apps the highest-performance 2D and 3D graphics capabilities on supported devices.

OpenGL ES 3.1 adds compute shaders, stencil textures, accelerated visual effects, high quality ETC2/EAC texture compression, advanced texture rendering, standardized texture size and render-buffer formats, and more.

Android 5.0 also introduces the Android Extension Pack (AEP), a set of OpenGL ES extensions that give you access to features like tessellation shaders, geometry shaders, ASTC texture compression, per-sample interpolation and shading, and other advanced rendering capabilities. With AEP you can deliver high-performance graphics across a range of GPUs.



 WebGL and Web Audio on Android

The initial release for Android 5.0 includes a version of Chromium for WebView based on the Chromium M37 release, adding support for WebRTC, WebAudio, and WebGL.

Although WebView has been based on Chromium since Android 4.4, the Chromium layer is now updatable from Google Play.

Web Audio is explained well on the chromium site: 

The Web Audio API introduces a variety of new audio features to the web platform. It can be used with the canvas 2D and WebGL 3D graphics APIs for creating a new generation of games and interactive applications. The API is capable of dynamically positioning/spatializing and mixing multiple sound sources in three-dimensional space.

Essentially it fixes how broken audio has been in the browser for quite some time. Multiple sound channels, audio mixing, and more. This gets web developers that much closer to creating a native-like experience within the browser.

What about IE 11 on Win8.1 & Win Phone 8.1?

IE 11 is similar across most Microsoft devices at this point. Both Windows 8.1 and Windows Phone 8.1 support WebGL in the latest version if IE. 

I’ve been using it for some time now, through the 8.1 developer preview on my Lumia 1520. WebGL games on the phone have never looked so good!

Conclusion

Previously we had to rely on tools such as Ludei’s CocoonJS , which provided a custom webview for iOS and Android, to allow for WebGL integration. Now that wrappers are no longer needed for the latest updates to these mobile browsers, who knows if we’ll still need these tools in the future.

I’ve been a proponent for WebGL for some time now, and I see this as only the beginning. We have a little bit of time before WebGL has widespread adoption, but at the rate is has been growing, It’s only a matter of time before we are using it everywhere.

Additional resources: