An intro to 3D in the Browser with WebGL and Three.js

Chad Moon

  • Reading Time  Min Read
  • Publish Date August 10, 2011

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.

WebGl is not your Grandma’s Javascript.

WebGL is awesome. It is a very low-level api that extends JavaScript to allow the generation of 3D graphics via the canvas element. The cool thing is that it actually uses the power of your gpu to render the graphics, allowing video-game quality results without any plug-ins. Its important to know that this is bleeding edge tech, the 1.0 specification was just released in March which leads us to…

Browser Support

Webgl Browsers

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:

  1. Get canvas element with webgl context

  2. Set viewport

  3. Configure depth buffer

  4. Create perspective matrix

  5. Create modelview matrix

  6. Create and compile shader(s) and shader program(s)

  7. Create vertex array

  8. 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.

Introducing Three.js

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:

  1. Create a scene object

  2. Create a camera object

  3. Add models/primitives to the scene

  4. Add light(s) to the scene

  5. Render!

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 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!

WebGL Finale

Send Us a Message

Let's Work Together

By filling in the form, you agree to our Privacy Policy, including our cookie use.