Categories

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.

  • http://greggman.com gman

    There isn’t any at the moment. I’ll try to find time to separate it out and document it.

  • http://twitter.com/mrdoob Mr.doob

    Good work! :)

  • Hhehe

    chrome never disappoints

  • http://www.facebook.com/people/Bikramjit-Mandal/100000543714897 Bikramjit Mandal

    good god!! ur work rocks man!! its cool!

  • Jamie Fristrom

    Very cool – my Native Client experiments aren’t materially faster. Hey, it seems like there are periodic hitches in the aquarium when I have 1000 fish – is that GC? 

  • http://greggman.com greggman

    It’s possible that’s GC. There’s a bug being worked on where sometimes a tab is launched in the same process as the page it was launched from.

    http://www.google.com/chrome/intl/en/webmasters-faq.html#newtab

    The upshot of that is that if the page is loaded in the same process and the original page is causing GC that GC will effect the new page :-( I hope something is worked out.