WebGL Performance on Various Devices

Question

What kind of performance can I expect from WebGL on existing devices? This is a somewhat open question, since I'll take the best anyone can give, even if it's vague, but in an ideal world, I'd like to know what kind of FPS (or typical frame duration, which is a nicer way to measure performance) are possible with:

• 100, 1000 or 10,000 vertices, with simple constant per-fragment colours and a moving camera
• the same with shading interpolated from vertices (eg Gouraud) (similar to above?)
• the same with shading calculated across the fragment (eg Blinn-Phong calculated in the fragment shader) (significantly slower?)
• all the above with the addition of 2d textures

And, finally, how bad is the limitation that you're driving everything from Javascript (if, say, you want to implement a simple game)? Does it turn out that, in practice, it's not the "background" that's the issue, but the ability to update state fast enough to do anything interesting in the foreground?

Answer 1

I've got a mobile-targeted version of my Quake 3 demo that I've been testing on various devices lately. The results have been slightly better than expected, but not spectacular:

• On Opera 12 with a Motorola Atrix 2 (I think) we were getting ~25FPS
• On Opera 12 with a Galaxy Tab I typically see ~10 FPS (Bigger screen/slower rendering)
• Haven't tried Firefox in a while, but it got slightly worse results last time I looked
• I have a video of it running on an iPad 2 with a modified version of Safari @ ~30FPS

So there you go. Limited data, but data nonetheless. It's worth pointing out that this is a reasonably complex demo, so I'm not really disappointed by the numbers. I'm also rendering the scene at 1/2 screen size and upscaling to help boost performance on mobile.

As such, my initial take is that it works and will probably be great for basic uses (accelerated 2D?) but Inifinity Blade and co. are going to stay native for a while yet.