As part of our ongoing programming R&D at Skookum, we’ve recently been experimenting with WebGL. If you’re new to the technology and 3d in general, it can be quite a daunting task to get up to speed. Here’s a quick WebGL primer (along with Three.js) to get you started.
As you can see by the above chart, all of the "cool" browsers are WebGL ready. (Safari does require support enabled via the command line). Then of course we have IE. Sadly the folks at Redmond decided not to include the tech in their latest browser. Hopefully things will change with IE 10.
Not for the Faint of Heart
A drawback (of sorts) is that WebGL is basically a wrapper for openGL. The good part about this is that the possibilities are endless. The bad part is that if you are not familiar with 3d/game development then the learning curve is quite high. Here is a brief run-down on the process for creating a cube in straight WebGL:
Get canvas element with webgl context
Configure depth buffer
Create perspective matrix
Create modelview matrix
Create and compile shader(s) and shader program(s)
Create vertex array
Create and bind vertex buffer…
View the source on the following demo to see what I mean.
All that for a white box? Yep. Believe it or not that "box" is actually an unlit cube in 3d space, and as you can see it is no trivial task setting things up to render it.
Theres got to be an easier way! Well there is, the answer is Three.js. Check out how much shorter our code is recreating that first demo with three.js
Much easier! We simply:
Create a scene object
Create a camera object
Add models/primitives to the scene
Add light(s) to the scene
The other cool thing about Three.js is you can pick from a 2d canvas or svg renderer as well. The performance will be different and not all cool 3d api options will be available, but its good knowing that you have the option if you want to create something basic with maximum browser visibility.
The Fun Stuff
Ok enough with the boring boxes. Here is a demo where we dynamically add spheres to the scene, and then rotate that scene based on the coordinates of our mouse.
As you can see the code is not much longer, and plays nice with others libs like jQuery and sugar. Remember to animate using the requestAnimationFrame instead of setInterval for maximum efficiency.
The Grand Finale
Now if you are still craving more (I know you are). Just take a look at this last demo. It is a modified version of the great app from airtight.cc called the Rutt-Etra-Izer. I have tweaked it to allow the selection of a Skookum’s twitter account. Once the account is selected it will pull in that person’s main profile picture and perform the effect. The z-depth of the lines is determined by the lightness or darkness of the pixel. And you can see the rendering speed of Three.js/WebGL by adjusting the parameters in real time at the left. Have fun!