WebGL Samples


So for the last month or so I've been working on some WebGL samples. Today they finally went public. Here they are:

This one is an aquarium showing up to 1000 fish. Human Engines did all the 3d modeling so thanks to them it looks great.

This one shows up to 96100 blades of grass with a depth of field effect. It's pretty much all on the GPU.

This one seems like it could be turned into a game with a little work. Any volunteers?

This was the first one I made actually. I didn't have any artists so it's all programmer art. The skybox/cubemap is from the maps team and it's taken in the lobby of the Computer History Museum. This one also has ray traced refraction through the tank added by Al Patrick.

There's also some more demos here..

To run them you'll need a browser that supports the WebGL standard. Or should I say, any standards compliant browser? Currently that's the Chrome Canary Build on Windows or the top of tree version on OSX or Linux, Minefield/Firefox 4.0b6 or newer or the latest version of Webkit. Many of these browsers require configuration to turn on WebGL support. There are a few notes here. Note that all of these versions of these browsers are highly unstable as of 2010/09/15 and are still works in progress. Hopefully sometime relatively soon WebGL will be in the release versions of these browsers.

The performance of the various browsers varies widely and of course it also depends on your computer and GPU. On my home PC in Chrome Canary I get 60 frames per second in most of the demos regardless of settings. On the other hand with my 3yr old notebook with Intel 945 integrated graphics the performance is much worse. 10−20 frames per second at best. I hope the need to run these kinds of apps will spur a lot of competition and improvement in the speed of various browsers. Up until now the speed of browsers was important but running gmail, google maps or facebook fast is a far lower bar than running web apps like these. On those sites if the browser takes a second to update it's no big deal. Apps like these though need to update at 60 frames per second if possible and without major increases in speed from all the browsers that's not going to happen.

Note that all of the demos are open source. You can get the source here. There's a library inside called tdl for ThreeD Library. I believe it's a lot lower level than something like SpiderGL, GLGE or O3D and not nearly as full featured but it's possibly better suited to getting the most speed out of WebGL.

My First Game Jam