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.
- WebGL on Desktops
- WebGL on IE
- WebGL on Mobile devices
- Pointerlock (aka mouse capture)
- Gamepads and Joysticks
- Drawing Tablet Input Devices
- Multiple render Targets
- Geometry instancing
- Anisotropic filtering
- WebGL Capabilities that I can use
- Floating Point Textures
- Shader Standard Derivatives
- Vertex Shader Texture Lookups/Units
- Fragment Shader Texture Units
- Texture Size
- Vertex Attributes
- Varying Vectors
- Uniform vectors
- Closing thoughts
The situation looks fairly ok. A little more than half of desktop browsers support WebGL.
Opera and Safari are really not moving along with WebGL.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.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.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.
You can also clearly see that Opera and IE are behind.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 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.
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).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?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.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.
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.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.
Opera, behind of course.Can use: Yes
I've never used this extension. But if you need it, it's fairly well supported, even by Opera!
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.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).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.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.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).
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.
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 :)