Introduction to WebGL
Posted by Daniel on December 19th, 2009
The WebGL Logo
3d graphics rendering is coming to a browser near you. Khronos, which is responsible for OpenGL (among other things) has published the specifications for WebGL on their website. The idea is to use the HTML5 canvas element to bring 3d straight to the browser without requiring third party plugins or proprietary code. The technology itself is tied closely to the specs for OpenGL ES, which is a 3d rendering library largely used in portable devices (Android, Symbian and the Iphone all use it). While Khronos itself is a consortium made up of companies such as AMD, Intel, Nvidia and Sun Microsystems, the WebGL working group has development support from all the major browser manufacturers except (guess who?) Microsoft.
While the technology itself is not ready for the masses, you can already start playing around with it in Firefox, Chrome, and Safari’s latest development releases. Information on how to implement WebGL on each browser can be found on the Khronos website. Be forewarned however, that WebGL is not for the faint of heart. While people with experience working with OpenGL should feel right at home for the most part, this is going to seem a little foreign to your garden variety webmaster. This is from the prerequisites section on the Khronos website:
WebGL is a low-level API, so it’s not for the faint of heart. OpenGL’s shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you’ll need to be familiar with include:
- GLSL, the shading language used by OpenGL and WebGL
- Matrix computation to set up transformations
- Vertex buffers to hold data about vertex positions, normals, colors, and textures
That being said, there are already tutorials popping up, and Khronos has a page showing off some live examples of what’s being done with the technology (if you are running a WebGL enabled browser). And because most folks passing through here aren’t running a browser that can see any of what we’re talking about, we’ll end things here because you’re probably already watching the videos below anyhow.