Thanks to Chris Blizzard (@chrisblizzard) for putting me on the right track for finding WebGL documention. There is no documentation anywhere yet, but it turns out WebGL is built on top of OpenGL ES 2.0. That is an embedded version of OpenGL designed to drive the latest graphics chips out there, with full support for programmable shaders. It can be found in the latest iPhone 3GS phone - but not the older iPhone 3G, which only has hardware that can support OpenGL ES 1.1.
OpenGL ES 2.0 is a subset of OpenGL, based on the 2.x spec. That means that my old OpenGL books (the Red and Blue books) are not very helpful for learning WebGL. Fortunately, there is a new book, the "OpenGL ES 2.0 Programming Guide", known as the "Gold Book", which covers this new API.
I just finished Chapter 2 of the book, "Hello Triangle: An OpenGL ES 2.0 Example", which contains a program that draws a simple triangle. That's great, because my previous experiment also contained a triangle program. The two programs did vary slightly however. So what I have done below is rewrite the example from the book in JavaScript using WebGL, using (mostly) the same sequence of calls. I think it turned out reasonably clean.
If you don't see anything above, WebGL probably isn't working in your browser.
As I work through the book, I'll be posting my experiments here, so stay tuned!
Update: I added an extra gl.flush(), and now it works with the custom-built WebKit nightly with WebGL available from here.
Update 2: WebGL is enabled in recent WebKit nightlies on Mac, flip the pref: defaults write com.apple.Safari WebKitWebGLEnabled -bool YES (via @smfr)
