The current state of WebGL – iOS 8, Yosemite, Android Lollipop

webgl-html5

Update: User pyalot on reddit has pointed me towards an excellent site for tracking WebGL usage and statistics: http://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.

<script src="//cdn.webglstats.com" defer="defer" async="async"></script>

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!

WebGL Win Phone

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:

 

-----------------------


subscribe-to-youtube

15 thoughts on “The current state of WebGL – iOS 8, Yosemite, Android Lollipop

  1. Pingback: The current state of WebGL – iOS 8, Yosemite, Android Lollipop - Dave Voyles for Gaming, HTML5, Startups, & Xbox - Site Home - MSDN Blogs

  2. Pingback: Dew Drop – October 20, 2014 (#1880) | Morning Dew

  3. It is awesome news that both mobile browsers and system webviews have improved so much and now offer WebGL and other great HTML5 features out of the box. CocoonJS is not just the Canvas+ technology you are mentioning in the article but a full platform to build native hybrid mobile apps also using the system WebView or Android Chromium or iOS 8 WKWebView options. Canvas+ could still be a great choice because it provides the same environment for both iOS and Android no matter what OS version you use, advanced memory options, it is the only option to deploy performing apps to Android Wear and it is fully customizable by Ludei (some customers need this kind of control and power). But do not look at CocoonJS just as Canvas+, but a complete option to deploy apps/games using those other options you are talking about. We, at Ludei, are excited about this new improvements that come with every mobile OS update and will continue to provide great tools and solutions for HTML5 developers.

    • ” provides the same environment for both iOS and Android no matter what OS version you use, advanced memory options”

      I didn’t realize this before. Thanks for pointing it out!

      ” Android Wear and it is fully customizable by Ludei (some customers need this kind of control and power)”

      This is also good to know, too.

      Thank you for keeping us in the loop.

  4. Pingback: I spoke about WebGL on David Giard's video podcast

  5. Pingback: Asm.js and WebGL for Unity and Unreal Engine

  6. Pingback: Asm.js + WebGL for Unity and Unreal Engine | NOUPE

  7. Pingback: A beginner's guide to WebGL - Dave Voyles | Tech Evangelist at Microsoft

  8. Pingback: A Beginner's Guide to WebGL

  9. Pingback: A Beginner’s Guide to WebGL | Codango.Com

  10. Pingback: A Beginner’s Guide to WebGL | 3bluefrogs

Leave a Reply