Getting started with WebGL

Here’s the thing that takes up my spare time right now: WebGL. For me with my web developer background (PHP, javascript, .NET) and my growing interest in realtime 3D graphics it’s so obvious that I can’t believe I haven’t played around with it before. The good thing is that at this point there are plenty of resources for those who want to learn and that it has been implemented in a stable way in some major browsers.
The downside is that it’s not an obvious choice for VJs as it does not integrate with VJ apps. But I’m sure tools will appear over time to overcome this.

Just have a look at some of the mind-blowing visual possibilities WebGL brings for visualists:
Often when delving into a new programming environment the hard part comes right at the beginning when you try to get a grasp of the architecture of things and the tools needed. I have been playing around with webGL for about a week now and I am slowly getting over that first stony hillside I needed to climb before being able to code anything useful.

So I thought I’d share what I found useful along the way in order to get up and running.

1. Programming environment

In theory all you need is a text editor and a browser. But I know from experience that a real code editor is useful to help keep everything readable. So far I am quite pleased with Sublime Text. As for the browser I chose Chrome for development, but it could probably just as well be Firefox. From what I’ve heard Opera and Safari do not quite live up to the others yet and as for Internet Explorer – who knows?. Make sure to have the latest version of the browser.

2. Web server

Yes a web server is needed, loading up pages by simply opening them locally is only going to work for the simplest of coding examples. Fortunately I am on a Mac and got a long way using the built in Python http-server. Here’s a quick how-to:
Open the Terminal app, write ‘cd ‘ and drag the folder with your code files into the Terminal window. Now it says ‘cd /Users/You/Path/To/Your/Folder/’. Make sure there’s a space after cd. Enter. Then write ‘python -mSimpleHTTPServer’. Enter. Now the Terminal should respond ‘Serving HTTP on port 8000′. Go into Chrome and write ‘http://localhost:8000′ as the address. You should now see the contents of your folder as clickable links.

3. WebGL API

webGL is supported by the above mentioned browsers out of the box. However I use an API for accessing webGL as I find the objects and functions of the API hide some of the complexities and provide me with helpful shortcuts to get things done. One of the most popular at the moment seems to be Three.js and so far I am enjoying using it a lot. There are a lot of good resources and examples on Three.js on the net right now.

4. Getting started with three.js

First I followed this tutorial. Then I tried to code something myself. I found out that the documentation is of some use but it’s very incomplete at the moment. So I did what was recommended and dug into the three.js examples (they are in the examples folder of the three.js download). I start out by looking at an example that does something close to what I want to achieve and then I copy the file and start messing with the code. Unfortunately I have often found the examples to be overly complex – especially when I started out – things are starting to make more sense now. I keep peeling away the stuff that I don’t need in the code, while continually checking in the browser what effect my change is having until I have a minimal working example. Then and only then do I start adding my own code. I may also try to combine code from different examples to achieve what I want.

5. Debugging javascript

WebGL is all about javascript and fortunately Chromes developer tools are really good for telling what’s going on and what is going wrong. cmd+option+I brings up the panel. Console shows the error messages but I have also had good use of the Watch Expressions and the Break Points. Here’s a good article to get started with the debugger tools.

6. Figuring out the error messages

For many things I understand what’s wrong by simply clicking the link in the console and see where in the code the error is. But for the more cryptic error messages Google is my friend. It may seem obvious but simply googling ‘webGL three.js’ + the error message will often bring up something useful. Especially the questions and answers on stackoverflow.com – no wonder as the developer of three.js moved all support to this site. For some browser specific errors searching for ‘chrome’ + error text will bring up an answer.

7. What WebGL isn’t

First of all WebGL builds upon OpenGL but it’s not the same. So reading up OpenGL won’t be directly applicable – especially so if you’re using an API like three.js. OpenGL code examples from other contexts may be portable but not without some translation. If you’re new to the whole realm of realtime 3D graphics including openGL it would probably be useful to read a primer on the general concepts – although one big advantage of three.js lies in the way it uses words and concepts that will be familiar to you if you have played with 3D applications such as 3D Studio, Maya or Cinema4D.

So that’s it from me for now. I don’t offer a complete webGL tutorial just these few tips for now. If you are already up and running with WebGL feel free to add in the comments any other similar tips that helped you when you started out.

Share it:

Leave a Comment