Scirra cog

About Us

We're a London based startup that develops Construct 2, software that lets you make your own computer games!

Archives

Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

Boosting mobile HTML5 game performance with WebGL

by Ashley | 26th, February 2013

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.

Device Test Avg FPS
SGS3 / Chrome 25 sbperftest / canvas2d
34
SGS3 / Chrome 25 sbperftest / webgl
40
SGS3 / CocoonJS sbperftest / canvas2d
56
Nexus7 / Chrome 25 sbperftest / canvas2d
34
Nexus7 / Chrome 25 sbperftest / webgl
54
Nexus7 / CocoonJS sbperftest / canvas2d
47
iPad2 / Safari sbperftest / canvas2d
52
iPad2 / CocoonJS sbperftest / canvas2d
57
iPad3 / Safari sbperftest / canvas2d
48
iPad3 / CocoonJS sbperftest / canvas2d
56

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.

Device Test Sprites
SGS3 / Chrome 25 renderperf4 / canvas2d 256
SGS3 / Chrome 25 renderperf4 / webgl 7791
SGS3 / CocoonJS renderperf4 / canvas2d 618
Nexus7 / Chrome 25 renderperf4 / canvas2d 112
Nexus7 / Chrome 25 renderperf4 / webgl 2239
Nexus7 / CocoonJS renderperf4 / canvas2d 409
iPad2 / Safari renderperf4 / canvas2d 822
iPad2 / CocoonJS renderperf4 / canvas2d 614
iPad3 / Safari renderperf4 / canvas2d 813
iPad3 / CocoonJS renderperf4 / canvas2d 613

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.

Now follow us and share this

Tags:

Comments

11
labithiotis 5,029 rep

Very good article, and I like the subtle hint to Ludei to push WebGL into their CocoonJS platform. Keep up the good work guys!

Tuesday, February 26, 2013 at 7:07:31 PM
7
photonstorm 2,497 rep

As great as WebGL is (and it truly is amazing stuff) it's useless until iOS support it :( and the massive massive number of Android devices out there that will never see support for it is alarming. It's like a really tempting sweet you just have to avoid eating (or relying on) because most players right now won't see it. So you have to create your game to appeal to the lowest common denominator still. So depressing!

Tuesday, February 26, 2013 at 7:08:14 PM
1
EnglishAcorn 16.5k rep

Great work guys.

Hopefully the mobile platform wrappers will include it's functionality. It'll make life easier.

Tuesday, February 26, 2013 at 7:10:35 PM
4
Ashley 188.0k rep

@photonstorm - at least things are moving in the right direction, and hopefully Chrome for Android will further pressure Apple to add WebGL in a future version of iOS. (They could easily enable it for millions of people making WebGL huge overnight.)

Tuesday, February 26, 2013 at 7:14:32 PM
4
Ashley 188.0k rep

@photonstorm - oh, and don't forget WebGL is pretty widely supported on desktop with Firefox and Chrome!

Tuesday, February 26, 2013 at 7:17:30 PM
7
Tommyttk 3,741 rep

Well all we need to do then is create a whole bunch of awesome looking games using WebGL that are so succesfull on WebGL supporting platforms that those without support for it will be forced to adopt it. Lets start now!

Tuesday, February 26, 2013 at 7:28:51 PM
3
ludodesign 29.9k rep

WebGL is power! And I do believe in all (good) browsers(mobile or desktop) with a good support to WebGL.

Tuesday, February 26, 2013 at 7:36:52 PM
3
Jayjay 18.5k rep

Awesome! Can't wait to see more C2 stuff on Android :D

Tuesday, February 26, 2013 at 7:40:59 PM
3
kenli 7,323 rep

@Ashley i'm just wondering, what about the performance test of sbperftest and renderperf4 on BlackBerry PlayBook and BlackBerry Z10 which support by default WebGL on their default browser?

From this reference, the result of BlackBerry Z10 is so good:
html5test.com/results/mobile.html
html5test.com/compare/browser/bb10.html

Tuesday, February 26, 2013 at 7:44:22 PM
1
ghale 3,091 rep

Cocoonjs is fast with WebGL, but must be optimized a lot, I think.

Tuesday, February 26, 2013 at 7:47:09 PM
1
Astro 5,991 rep

I see wider spread of WebGL support sooner than later, though definitely not quite there yet.

Tuesday, February 26, 2013 at 7:59:55 PM
1
mltreadway 6,114 rep

Very Nice!

Tuesday, February 26, 2013 at 8:22:27 PM
1
teerex 3,587 rep

Looks very promising.

Ahley, does CocoonJS really differs from appMobi (intel SDK) in terms of performance?

P.S. Personally, as appMobi is aquired by Intel, i'm hoping there would be some magical improvements in html5 dev soon.

Tuesday, February 26, 2013 at 8:53:36 PM
2
level1sb 3,066 rep

Newbie question: When you say " just by turning on WebGL" - do you mean just set "enable WebGL" to "on" in the Project Settings (Configuration Settings) and you'll gain performance? That's it? Even if you are not using any WebGL shaders/effects? Heck, ok!

I agree with @photonstorm, it's tempting to use WebGL - and I love it, but without knowing if it will work or not on the user's device, how can we even think to use it at this point for mobile? I like these results, and good to see things moving in the right direction. Maybe in the next 12 months it will be MORE universal. But I'd like not to have to write a whole page of instructions (setting flags and whatnot) just so the user can play the game.

I'd love to see a system (Apple TV or Google TV, that supports WebGL) with dedicated hardware and software specs (like console game systems) so we know what we are developing for. Now THAT would be awesome. Not mobile, but still awesome.

Tuesday, February 26, 2013 at 10:16:50 PM
2
Animate 10.9k rep

It is encouraging to see mobile browser specifications moving in the right direction just as their desktop counterparts. Let's hope that by the end of this year Google enables Web Gl as default in their browser on all their Android devices.

Tuesday, February 26, 2013 at 10:48:52 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.