WebGL getting started

I was going to put together a WebGL tutorial. I made two examples:

first: the simplest example I could make. Everything in one file (in the html). The simplest possible shaders. Good for seeing how to get WebGL going.

second: a really simple example of drawing a square, and making it move and change appearance in the shader. Good for seeing how to get information for javascript to shaders.

These are a good place to get started, but I quickly realized there are lots of good tutorials on the web, and you’re better off learning from them. Here are a few to get you started – if you come across something good, please post it in the comments so others will know about it!

• LearningWebGl.com is a site with tons of WebGL stuff, including a series of tutorials.
• Official Mozilla Getting started with WebGL
• Useful webGL quick reference card.
• This page has some nice examples that push the performance boundaries. The ideas from the example come from the talk “Google I/O 2011: WebGL Techniques and Performance”, which is really useful at understanding modern graphics performance. It might be required viewing later on since it really gets at how to organize graphics data in a modern OpenGL.
• WebGL Inspector is a cool sounding debugging tool – I haven’t tried it myself, but it sounds cool.

As I look around, I am amazed at how many cool WebGL examples there are. If you find any that you think are particularly noteworthy/instructive, please leave a comment on this post.