Learning WebGL

Sorry for the gap, things have been really busy! Here are a few of the demos I’ve seen going by, there are quite a few that are still queued but if you think I’ve missed something then please do leave a comment.

BTW if anyone wants to volunteer to help with these roundups it would be much appreciated… just drop me a line at [email protected].

• Two of my favourite hobbies combined: the Raspberry Pi, and WebGL. To make it even cooler, it’s using Firefox OS!
• A cool demo from PlayCanvas (a game-building product based on HTML5): inventively called D.E.M.O., it’s an FPS built in two weeks! Here’s the writeup.
• A new demo from Jonas Wagner — terrain rendering with LOD, frustrum culling, reflective water, and all kinds of other goodies. Demo here, writeup here.
• A WebGL-based Facebook game: Cola Factory, by Ivan Kuckir.
• A fun way to present a website from tamat — very retro!
• From Florian Bosch: how to create vapour trails (and similar) with minimal triangles.
• Also some great blog posts from Brandon Jones: how to read OpenGL shaders, for WebGL programmers (useful if you’re porting old OpenGL code over), and two fun ones on rendering large maps of sprites by using one texture to hold which sprite goes where, and one to hold the sprites, and the abusing the GPU to put it all together.
• For French speakers: some WebGL tutorials based on the creation of a Tetris game. Here’s part 1, follow the links for parts 2 and 3.
• If you missed the WebGL BoF at SIGGRAPH in Los Angeles, there’s a roundup of presentations and press mentions over at the WebGL wiki.
• I’ve always loved demos that don’t just show off WebGL, but use it for something useful outside the context of pure computer graphics. Tony Parisi notes that that kind of thing is on the increase.
• Chrome-only but cool: WebCam Mesh by Felix Turner of Airtight Interactive, which puts the output of your camera onto a WebGL mesh. Felix writes, “It creates a 3D depth map by mapping pixel brightness to Z-depth. Perlin noise is used for the ripple effect and CSS3 filters are used for color effects. Use mouse move to tilt and scroll wheel to zoom.”
• Also Chrome-only and also cool: an audio visualiser by Berthold Krevert.

Got a WebGL demo or link that you want me to put in next week’s roundup? Leave a comment below, or drop me a line!