Boosting mobile HTML5 game performance with WebGL

Performance is crucial for any kind of gaming, even more so on mobile where the hardware is weaker and the software is often behind desktop systems. It's also a really interesting subject, which is partly why we've written about it several times before on our blog, such as our HTML5 2D gaming performance analysis (with updated benchmarks here and here), and our Great HTML5 Mobile Gaming Performance Comparison. However that last link - our last big mobile performance test - is from last May, and things are moving quickly as ever.

We're big supporters of WebGL since Construct 2's WebGL renderer is often significantly faster than canvas 2D on desktop, in both benchmarks and real games. Since that post there have been major software updates, new devices, and optimisations to Construct 2's engine. So it's time to do another test. We were glad to find WebGL brings a similar performance boost on mobile, just as it does on desktop - with some surprising cross-device results. More on that in a moment!

Test setup

We've used two tests: a real-world test of the "Space Blaster" game, but automatically controlled, which we call sbperftest. That's our favourite test for measuring realistic results for actual games. However we included a more artificial test, renderperf4, which just measures how many rotated sprites it can fit on screen and still hit 30 FPS. It's mostly a test of how much CPU overhead there is in issuing draw commands, which helps highlight the difference in the overhead between canvas2d and WebGL. My desktop machine achieves astounding results with WebGL on Chrome in that test, which hopefully puts to rest any concerns there ever were about desktop HTML5 performance.

This time around the devices we've used are:

• SGS3: a Samsung Galaxy S3 running Android 4.1.2. We tested both Chrome for Android beta (25) and the latest CocoonJS launcher. Note Chrome for Android beta currently needs WebGL enabled via chrome://flags, but it works very well for us and we anticipate a WebGL-enabled version of Chrome will eventually be the default browser on Android.
• Nexus7: Google's Nexus 7 tablet running Android 4.2.2, where we also tested Chrome for Android beta and CocoonJS.
• iPad2 and iPad3, both running iOS 6.1.2. Neither currently support WebGL yet, but we tested Safari and CocoonJS anyway since there have been software updates to iOS, CocoonJS and Construct 2 since the last test.

sbperftest results

The score for this test is the average framerate over a 60 second period of automated play.

There are a couple of interesting points to note from this:

• The results are generally pretty good. The Space Blaster game gets quite graphically intensive with lots of explosions on-screen. All the devices barely dropped below 30 FPS, which is a good target for a real game on mobile.
• WebGL can make a huge difference! On the Nexus 7 the WebGL renderer improved the average framerate from a passable 34 to an excellent 54. This is such a leap that the cheap Android tablet beats Safari on the much more expensive iPads - just by turning on WebGL!
• CocoonJS is faster than the browser using canvas2d, which is great, but not always faster than when using WebGL. It's clear supporting WebGL would boost CocoonJS performance even further.

renderperf4 results

This is the test specially designed to highlight the overhead between canvas2d and WebGL. The score is the number of sprites it could get on-screen and still maintain 30 FPS.

This exposes some enormous differences!

• WebGL blows away the canvas2d results. The Nexus 7 could only get just over 100 sprites, which some games are likely to hit; with WebGL it could easily manage thousands, which is well beyond what most games need.
• Award for most improved goes to the Samsung Galaxy S3, which benchmarked a result a whole 30x (3000%) better with WebGL support.
• Android beats iOS again, by an even bigger margin, just by turning on WebGL.
• CocoonJS beats the browser on Android, but interestingly not on iOS, perhaps because API restrictions prevent javascript JIT optimisation.

Conclusion

We're pleased to see our desktop results carry over to mobile: WebGL is a big deal fo HTML5 game performance, even for 2D games. On one device it reduces the per-sprite overhead by a massive 30x, and this appears to translate in to a real-world improvement of up to a still impressive 60%. It's enough for cheap devices to out-perform expensive ones simply because they support WebGL. Let's hope Apple take note.

CocoonJS allows making native apps which are often faster than the browser, which is great. However it could definitely benefit from WebGL to boost performance even further; let's hope Ludei are planning on supporting it.

WebGL isn't just about performance - it also allows for incredible shader effects to make your games look extra awesome. Blackberry 10 and Firefox OS are also launching with WebGL enabled by default, and it looks like a WebGL-enabled Chrome will eventually be the default browser for Android. This is good news, and we are confident that the future of mobile games are stunning high-performance games powered by WebGL.