NOTE: To view WebGL, you’ll need to use a Mozilla trunk nightly build (starting September 18th). Once installed, switch webgl.enabled_for_all_sites to true in about:config. Your OpenGL drivers will also need to be up-to-date. A video of the experiment is included in this post if you’re having trouble installing.
A couple weeks ago, Vladimir Vukicevic posted the first working sample of WebGL, which gives us a glimpse of how JavaScript will access OpenGL ES 2.0. Since then, we’ve seen a number of impressive demos, and it seems GPU accelerated 3D in the browser is finally becoming a reality. This technology deserves attention.
Of course with WebGL in its infancy (even though they’ve been working on it for years), and the spec still in flux, no documentation exists. Learning the API involves scouring sample source and the nsICanvasRenderingContextWebGL interface reference. My OpenGL programming knowledge being limited, I had to use iPhone OpenGL ES 2.0 guides to get me up to speed with the spec. Jeff LaMarche has a fantastic series on the subject, and I decided to use his icosahedron example as a starting point.
View on Vimeo.
It’s a simple low poly test, but I’m rather impressed with the result. And really, who can complain about finally having access to the GPU? Hopefully there aren’t too many roadblocks (ahem, Microsoft/DirectX) in the way before this spec becomes official. Next step for me will be texturing.
