There is (among graphics enthusiasts) a lot of debate what API/version of something to use with a bunch of hotly contested alternatives. I would like to convince you to give WebGL a try, and this blog post explains why. It will also quickly summarize a few things people usually ask about WebGL. There are many gotchas (like with anything) as well, and I am aware of a lot more of them than you can imagine. I will perhaps talk about them in another blog post.
- What is WebGL?
- It is the easiest 3D API to use
- It is the best tested 3D API
- It is the best documented 3D API
- It is extensible
- I don't want to use WebGL why do I care?
- Click a link, get a customer
- Is there any money in it?
- How does it compare to ...
- The Future
Yes WebGL can run without OpenGL. There is a compatibility library called Angle which translates WebGL Shaders to either:
- Desktop OpenGL GLSL (on Linux and OSX)
- Mobile OpenGL ES 2.0 ESSL (on android and blackberry)
- Direct3D 9 HLSL (on windows)
WebGL API calls are also translated:
- Desktop OpenGL (each browser supplies his own wrapper for that)
- Mobile OpenGL ES 2.0 (just a pipe trough)
- Direct3D 9 API (Angle provides a wrapper for that)
Browsers that support WebGL:
- Desktop Chrome
- Desktop Firefox
- Desktop Safari (on OSX, need to flip a flag)
- Desktop Opera
- Mobile Firefox for Android
- Mobile Chrome Beta for Android (need to flip a flag)
- Mobile Opera for Android
- Firefox OS builtin browser
- Blackberry builtin browser
Browsers that do not support WebGL:
- Internet Explorer
- Desktop Safari on Windows
- Mobile Safari (iOS, iPhone, iPad etc.)
- Opera for iOS
- Builtin Android browser
If a platform works or not depends a bit on driver versions, OS versions and other factors. This is known as a Whitelist/Blacklist.
There are however platforms where WebGL will not run no matter what:
- Windows on ARM (surface etc.)
- Windows Phones
- Windows 8 Modern UI
- iOS (iPhone, iPad etc.)
This is because Microsoft and Apple have not implemented WebGL and they dissallow other browsers for these platforms. You might find this perplexing since you can find other browsers in these devices App-Stores. However these browsers are just different decorations for Internet Explorer or mobile Safari engines, and unless a browser can make his own engine, WebGL cannot be supported.
That is not easy to say. However I have introduced a WebGL statistics platform to answer that question. As of February 2nd 2013 the numbers are:
Data is assembled from over 13 million visits on over 530 participating sites over the last 60 days.
Note that in the last 30 days, Mobile support increased by 2% up from 4% for mobiles. That's huge progress (50% increase)! Mostly that's thanks to the Chrome Beta for android that finally supports WebGL per flag.
If you write 3D applications you might know all the boilerplate setup and code you need to write just so you can start to do anything. People like John Carmack have complained about this. Well lucky for you, WebGL is not (much) like that.
Get a Canvas:
var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
Get a context:
var gl = canvas.getContext('experimental-webgl');
You're done. No messing with makefiles and includes and windows and GLX/GLU/etc. The browser does all that for you. You're now ready to start calling the API.
There are many problems when programming hardware accelerated graphics. One of them is the myriad of driver issues and incompatibilities.
In order to root out all those problems, WebGL has a comprehensive (and growing) conformance suite with thousands of tests ensuring WebGL behaves as it should. Anybody can run these tests and report problems to the browser vendors when it fails. As far as I know WebGL is the only 3D API that has such a suite. Not only will it make WebGL better, it will also help OpenGL, OpenGL ES and even Direct3D since it is now also used by hardware vendors like Nvidia, AMD and Apple to improve their drivers.
Sometimes it is possible that a driver update, or a change in the WebGL implementation results in worse performance. To detect these problems, there is also a performance regression test suite. Again, as far as I know WebGL is the only 3D API in posession of such a test suite.
Unlike other 3D APIs and frameworks, this is a very open standard.
- Specification, tests and extensions on github
- performance regressions on github
- quick reference card from Khronos
- Khronos topic page
- Khronos WebGL wiki
- Public Mailing list
- extension registry
And a lot of unofficial resources such as
Since WebGL inherited its extension mechanism from OpenGL, it is the only web based 3D technology that can make use of advanced features before a new big point release. And can offer them in legacy versions of the API if the next point release is not yet supported. Currently implemented are:
- Single and half floating point textures
- Standard derivatives functions in shaders
- Vertex Array Objects (VAOs)
- S3TC Compressed textures
- Depth Textures
- Anisotropic texture filtering
More extensions are being proposed, drafted and eventually implemented and everybody hopes we will get Multi-Render Targets and instanced drawing soon.
- Browsers have gotten better Garbage collection partly as a result of WebGL.
- Since this is a Web technology, everybody has been working very hard to push graphics hardware vendors and OEMs for better drivers.
Every non Web technology relies on a series of steps for the user to perform before he can launch your application. For instance for classic desktop applications it looks like this:
- Find download link
- Save download as
- Open download folder
- Click installer
- Click yes, yes, yes, enter path, more yes
- Close installer
- Find installed application
- Launch Application
- Wait for auto-update
- Enjoy application
It is a bit smoother (but not all that much) for App-Store based applications. But what about WebGL applications?
- Find launch link
- Enjoy application
Of course we have to do the compare against other solutions, so here goes:
This is an engine more than an API. Most people don't have the Unity3D Web-Player installed, and it doesn't run on mobiles anyway. If an engine is your thing, and you don't care about the web as much, you should try it. I like APIs and the Web a lot, so I don't really use it.
Note that there are ways to bring Unity 3D to the web (and to mobiles).
- It can be compiled to Google Chrome only NaCL (obvious drawbacks). But that still isn't integrative with the host of web technologies in that none of the various frameworks, libraries etc. available for HTML/CSS/JS will be any use to you.
- It can be compiled to run on mobiles and be distributed in App-Stores, but that isn't really the same as putting it on a webpage and have it "click -> play".
Flash uses a non-standard API (neither like Direct3D nor like OpenGL) that seems to be fairly poorly documented (at least the documentation I could find was sparse at best). An unfortunate choice is also flashs shader format, which is practically programming assembler. WebGL allows you to program in a convenient high level C like language. Of course Flash also doesn't run on mobiles (the old story). But from a Web-Developers point of view, it also does not integrate with any of the web technologies. You also need to precompile all your shaders, and compiling shaders online is not possible.
However you can compile flash to run on mobiles with some of the half-dozen or so services/technologies that repackage your flash app to a native app and let it distribute on an App-Store. But again, like Unity 3D, that's not quite the same as putting it on a webpage and have it "click -> play" (one of the biggest traditional strengths of flash).
Microsoft has not given Silverlight much love, much less Silverlight 3D. Aparts from the usual inconveniences (doesn't run on mobiles, needs a plugin, poorly documented etc.) you also need to precompile your shaders. Of course you need Visual Studio and .Net and whatever to even start writing anything in Silverlight. The biggest hurdle however is that Microsoft makes users jump trough half a dozen obscure dialogs to enable 3D for every single silverlight application that wants to use 3D. Last I heard it's practically impossible to do, so this isn't really a choice.
Doesn't run on the Web. Doesn't run on mobiles. Doesn't run on Apple. It's a non standardized API.
Serious driver issues, doesn't run on the Web. Doesn't run on mobiles.
Doesn't run on Desktops. Runs on a lot of mobiles, but doesn't run on the Web.
WebGL/HTML5 etc. isn't perfect. There are lots of issues like with any sufficiently complex technology. But I sincerely believe that WebGL is the best shot we have to bring 3D everywhere. The Web has always been about write once, run everywhere. I have been enjoying WebGL a lot, and I hope you can enjoy it too.
I know I can be a grumpy and offensive guy at times, but this is to say a little thanks to all the unsung heroes who make WebGL possible and better. Kenneth Russel, Gregg Tavares, Brandon Jones, Jeff Gilbert, Benoit Jacob, Paul Irish, and everybody else, you do a fabulous job!