Experimenting with WebGL

I was experimenting with WebGL the other day and it’s pretty damn cool. Here’s a spinning 3d logo of the company I currently work for as an attempt at animating something in 3D. If you’re not in the loop, WebGL is a JavasSript API supported by modern browsers that allows interactive 3D graphics rendering in a browser’s window, specifically the canvas tag. The graphics rendering is GPU accelerated which means excellent performance (as long as you’re using it wisely). The API is designed by the Khronos Group and is based on OpenGL ES 2.0. If you ever used OpenGL then it will be easier for you to start, but similar to OpenGL ES the WebGL API doesn’t have the immediate mode which is widely used in OpenGL tutorials. If you want learn WebGL you’ll need to get better acquainted with the concept of shaders which are lower level programs executed on the GPU. Depending on the type of shader, they’re executed for each vertex of the object or each pixel to be drawn. Those things are fast as hell. If you want a good place to start learning this stuff see Learning WebGL blog. But note that they may not explain all the nitty-gritty details, so you’ll probably end up searching for more information elsewhere. Another good resource is the official WebGL cheat sheet or reference card, whatever you wanna call it. But before you go and start programming something for your page, note that WebGL is not supported by all the current browsers and some visitors might not see the graphics at all. If you can’t see the spinning logo demo yourself then you could try switching browsers. Like using the latest version of Chrome or Firefox (these work for me). But chances are that your particular hardware might not be supported even by those browsers. I’ll finish up by leaving you with a link to some really cool looking WebGL demos. Enjoy!