WebGL Statistics and the state of WebGL/HTML5

Apr. 25, 2012
comments

In two previous posts I examined capabilities of WebGL and the challenges for WebGL/HTML5 as a game app platform. It has been 8 months since the last writeup, and a lot has happend. Browsers have introduced new capabilities and I have written a site to collect WebGL statistics. The following post will look at what's changed, and what conclusions we can draw from the statistics.

During research for this article I also found this page to be interesting.

Contents

WebGL on Desktops

The situation looks fairly ok. A little more than half of desktop browsers support WebGL.

Percentage
All51%
Chrome89%
Firefox41%
Safari1.2%
Opera1%
IE0%

Opera and Safari are really not moving along with WebGL.

WebGL on IE

Status: All flights canceled, airline is broke

Microsoft has announced they will never support WebGL because of security concerns. This is brazen hypocrisy as they themselves push various hardware accelerated technologies (page composition, canvas and Silverlight3D) which by far and large would have the same security issues. Various bloggers called them out on it.

If this is just a delay tactic or some political move to protect certain other interests of Microsoft remains to be seen. I don't know if they'll implement WebGL, and I'm not willing to bet either way.

In the meantime, you can try IEWebGL, a plugin for IE to give you webgl or Google Chrome Frame, a plugin for IE that lets you use Chrome inside IE, or, you know what, just download Chrome or Firefox and throw away IE. It's market share is fading anyway, and it still is not a modern browser.

WebGL on Mobile devices

Status: Delayed arrival unknown (2013 maybe?)

Nobody relly knows what's taking so long. Both Google and Apple are not prepared to announce anything about it. The statistics show some webgl support for mobiles, however among all mobile devices it's only 1% who have WebGL, and the number against all visitors is only 0.1% (the number of mobile visitors is 10%).

A concern expressed on the mailing-list was that JS speed and WebGL bindings on mobiles are not yet good enough. Expecations are that maybe end 2012 or mid 2013 this would be satisfactorly resolved. If that will be the case remains to be seen.

Kudos goes to Mozilla for shipping an Android version of Firefox with WebGL, however that isn't used right now by too many people, why don't you show it some love and download it.

Opera 12 for Android also implements WebGL, you might give it a try.

Fullscreen

Status: Landed

Yay, this came to be. Congrats to the browser vendor teams who implemented it, you made this happen. The statistic shows that over half of desktop browsers now support fullscreen.

Percentage
All56%
Chrome77%
Firefox58%
Safari61%
Opera0%
IE0%

You can also clearly see that Opera and IE are behind.

Pointerlock (aka mouse capture)

Status: In-Flight arrival mid/late 2012

The ability to capture the mouse is rather important for 3D games, especially where something like the ego-perspective is used (first person shooters and the like).

Both Chrome and Firefox are working on implementations on this feature. If all goes according to plans, it should come to Chrome 20 and Firefox 14. No word on Safari, Opera and IE.

Percentage
All0%
Chrome0%
Firefox0%
Safari0%
Opera0%
IE0%

Gamepads and Joysticks

Status: In-Flight arrival unknown

Both Chrome and Firefox are working on this feature. Some developer builds have the feature, but no vendor has yet committed this to a release milestone. Of course no word on Safari, Opera and IE.

Percentage
All0%
Chrome0%
Firefox0%
Safari0%
Opera0%
IE0%

Drawing Tablet Input Devices

Status: No departures

Tablets don't seem to be on anybodies radar at the moment. They're wonderful devices with a variety of axes (pressure, x, y, tilt, rotation, height, etc.). It'd be really nice for the niche of productivity applications (painting programs for example).

Multiple render Targets

Status: No Departures

After a lot of discussion last year, and this year, we still don't have multiple render targets. The main issue seems to be that:

  • Mobiles have virtually no support for it
  • OpenGL ES has not standardized this feature
  • Google, Apple and Mozilla are reluctant to introduce a feature that only works on desktops, citing the case of incidental dependency on it, that would be a pitfall for WebGL application providers.

I know you don't want to introduce accidental incompatibility to mobiles. So I pledge this: On WebGL Stats I will make it perfectly obvious that mobiles do not support MRTs. Can we now move ahead with this?

Geometry instancing

Status: No Departures

This has sparked a lot of discussion as well. For the same reasons as we don't have multiple render targets, we also don't have draw instanced. This isn't merely a convenience extension, there are limits on the number of uniform vectors that means efficient batching is difficult.

I would also pledge to make draw instanced non-support on mobiles as visible as possible, for what it's worth.

Anisotropic filtering

Status: In-Flight arrival unknown

I have contributed the specification and first implementation of it in Firefox. The specification is currently in draft because it does not yet work on Direct3D. It'd be nice if we could get this done and move on.

WebGL Capabilities that I can use

If you look at the statistics page, you can study the tables for yourself, the following short paragraphs are more or less just an explanation and advise based on those numbers.

However the advice is based on Desktop machines, because there simply are not enough mobiles in my sample data to draw any meaningful conclusion.

Floating Point Textures

Can use: Maybe

This kind of texture tends to be costly on the bandwith (4x more bandwidth consumed). Data produced on the GPU can't be read back.

It enjoys good support, but it's kinda weaker on OSX and Linux. If you can avoid using it without any obvious problem, avoid it. But if you can't do it without floating point textures, go ahead and use them.

Percentage
All97%
Chrome99%
Firefox85%
Safari97%
Opera0%

Opera, behind of course.

Shader Standard Derivatives

Can use: Yes

I've never used this extension. But if you need it, it's fairly well supported, even by Opera!

Percentage
All96%
Chrome100%
Firefox78%
Safari99%
Opera91%

Vertex Shader Texture Lookups/Units

Can use: Maybe, max 4 textures

You need more than 0 vertex texture image units in order to use this feature. It's fairly great for some things (like waving grass, particles or rendering terrain). There is a substantial number (12%) of desktop users who don't have the capability to use it.

If support is present, 88.2% of people have support of up to 4 textures in the vertex shader. Do not use more than 4 vertex shader textures, only 7.2% have support for 8 or 16 textures.

Fragment Shader Texture Units

Recommended max: 16 textures

You can use up to 16 textures safely because that's supported by 99.8% of desktops (however don't use more, it quickly drops off).

Texture Size

Recommended max: 2048x2048 or 4096x4096

Some people can't have textures larger than 2048x2048 (7%). But 93% can support textures up to 4096x4096. If you can avoid large 4k textures, avoid them. But you can use 4k textures if you need them. Do not use more than 4k, only 69% have support for 8192x8192.

Vertex Attributes

Recommended max: 16 attributes

Up to 99.9% of people support at least 16 vertex attributes. Do not use more, only 0.1% have support for 29.

Varying Vectors

Recommended max: 8 varyings, 32 floats

Varyings are used to pass values from the vertex shader to the fragment shader. The number specifies how many 4-component vectors you can pass.

Everybody has at least 8 varying vectors, you may also use 10 varying vectors (still supported by 93% of users).

Uniform vectors

Vertex Shader max: 254 vectors, 1016 floats
Fragment Shader max: 29 vectors, 116 floats (maybe 221 vectors, 884 floats)

Uniforms are used to pass information to your shaders other than vertices. The amount specifies the number of 4-component vectors that you can use, so multiply the number by 4 to figure out how many floats you can use.

The numbers look fairly clearcut for vertex shaders, but a little more complicated for fragment shaders. If you absolutely want to reach 100% you can only use 29 uniforms in the fragment shader.

Closing thoughts

Some of the capability percentages are correlated (for instance all users who have vertex shader texture lookups also have more than 29 fragment shader uniforms). You can test this with the can use tool on webglstats.

We have seen some progress in the platform over the last 8 months. Some of it is awesome, some of it will soon be awesome, but a lot is still missing, sadly for mostly political reasons. I hope this overview and webglstats help the aspiring software developer make informed decisions about his choice of requirements. I also hope it helps to drive the discussion forward so we can do more awesome in the next 8 months :)