Even without a draft specification of WebGL in circulation, we’ve seen some promising 3D content using WebGL appear on the web, put together mainly through developer ingenuity and the fact that Firefox, Chromium, and WebKit are open source projects with early support for the technology. Today, the WebGL Working Group at Khronos released a provisional public draft of the WebGL specification, and we are very excited for what this means for the web.
For one thing, it means more developers can get involved in the evolution of WebGL. There’s a public mailing list set up, so that you can engage directly with members of the WebGL Working Group, as well as a web forum. It’s important to note that the specification is not yet finalized. Participation from the web community is essential towards finalizing the specification, which we hope to do in the first quarter of 2010.
It also means that there are implementations of the draft specification that you can begin to test. You can obtain a Firefox nightly that implements the WebGL draft specification, and can turn on WebGL support in that build by following these steps:
- Type “
about:config” in your browser’s URL bar
- Do a search for “webgl” in the Filter field
- Double-click the “
enabled_for_all_sites” preference to change it to “
Now of course, this is hardware-accelerated 3D graphics in an early beta, and for now requires an OpenGL 2.0-capable GPU and drivers. In particular, most flavors of Intel’s integrated GPUs will not work straight out of the box (such as the GMA900/GMA950 often found in laptops). Developers who build nightly builds of the browser can induce software rendering using Mesa, and should check out Vlad’s blog post for doing this on Windows. Caveat emptor: building software rendering using Mesa into a Firefox nightly is likely to yield slower performance, and is only for the intrepid.
WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML5’s Canvas element, exposed as low-level interfaces within the Document Object Model.
Developers familiar with the Canvas 2D context will recognize that WebGL is another context for Canvas:
// get the canvas element in the DOM var canvas = document.getElementById("canvas3D"); var gl = canvas.getContext("experimental-webgl");
Note that till the specification is finalized, the context is called
- Review the WebGL draft specification
- Get involved! WebGL Homepage on Khronos
- Read articles and contribute on the WebGL Wiki
- A blog about learning WebGL
- Find 3D recipes in the learning WebGL Cookbook