First steps with WebGL

The hype around WebGL is quite big these days. People are talking about it and getting their hands dirty for sometime now. I wanted to give it a try, but I have to be honest: HTML, Javascript, Webdev in general scares the crap out of me, but eventually i ended up taking a look at it and what’s going on these days (WebGL related).

After watching Rome, a project created by Google, my interest got bigger, so I downloaded  a framework called Three.js. This framework is more than just WebGL, but i didn’t really care, i just wanted that section. If you get curious, check it out, it’s growing and even Google used it.

It was quite easy to start playing with, as it brings loads of samples (would be alot easier if i knew where to find the documentation), so i started from there. Create a simple page capable of rendering WebGL to a canvas, explore the framework more or less until i actually made something with it.

My part of this was mostly copy/paste of a shader i had written recently on Approximating Translucency for Subsurface Scattering. A couple of hours later and alot of rambling towards javascript, I finally ended up with the same shader running on the browser.

Next screenshots includes one from the application running with OpenGL and the other two were capture directly from the browser.
Last but not least, i want to mention the work of Tristan Bethe. The 3d scan model seen in this pictures is all him.

Link to the WebGL version. Enjoy!

Link to the WebGL version. Enjoy!