Thursday, September 29, 2011

WebGL Time!

I spent my time this week reading about and learning WebGL. I was looking at ways in which I could do my renderer on Javascript and WebGL.

I started the week by going to the guest lecture by Patric Cozzi on WebGL, and it was highly helpful. I learned about the main big ideas of WebGL, some tips and gotchas, and a handful of Javascript syntax. However, more importantly, I learned about dev tools that help such as JSLint and WebGL inspector, and I also took away names of several WebGL libraries that could be helpful.

Later in the week I started reading WebGL tutorials on

At the same time, I also looked for libraries that I could use. I came across several:
  • glMatrix.js provides fast and simple matrix class and functions
  • sylvester.js offers vectors and matrices with extensive functions and flexible constructors
  • Scene.js is a Javascript scene graph framework
However, there was one that clearly stood out: Three.js. Three.js is an extensive libraries that is designed to help developer draw 3D scenes that renders through WebGL. It has all the necessary classes such as mathematical functions, vectors, matrices, and scene graph objects, and various geometry classes.

I have decided that I would use Three.js to handle all non-rendering related work such as setting up a scene graph and moving the camera. This work will be done on the Javascript side. The heavy rendering work would be done on the shader level, which benefits from the hardware acceleration; Javascript too slow for rendering.

I have set up a simple WebGL application using Three.js. It has a basic scene graph and mouse controlled camera (click and drag on application.) The app can be found here:

Next week I will spend my time setting up this WebGL framework so that everything is ready for rendering. Then I would move onto setting up the necessary shaders in order to do the rendering work.


  1. Glad you are using WebGL. Since you are using Three.js, you should find this blog useful: Learning Three.js.

  2. I'm excited to see how you're going to incorporate photon rendering with WebGL. The fact that you'll be using javascript reminds me of Processing, which is a java based visualization tool for the web. Maybe it can provide some inspiration, seeing their techniques to 3D visualization, and what not?

  3. The functionality Three.js offers seem really promising. I'm glad you found it; I think it'd be really fun to play around with outside of class. I found another chrome experiment using Three.js if you haven't seen it already:

    Pretty awesome stuff.