Thursday, May 27, 2010

WebGL and Spore Critters

You know what's really lame? Blogs that have one post from two years ago that says: "Hi! I'm _____ and this is my blog and I'm gonna post on it every day!" Well, I'm bound and determined to make sure this blog isn't one of those. To that end, I've decided that if I do lose interest after one post, I may as well make it a good one. So... WebGL!

I've been on an HTML 5 kick recently. (I find that funny because I started out my programming career as a web developer for small internet marketing company. At the time I thought of it as just a stepping stone before I got to do "real code". Now I do "real code" at work every day and I can't wait to go home and play with my HTML!) I don't really care to go into an in-depth analysis of HTML 5 here, there's a billion other sites out there that do that. But one of the cooler bits that has come out of the whole HTML revamp is WebGL. As the name suggests, it's basically just OpenGL in a web page driven by javascript without plugins.

No, wait, I don't think you got that: OpenGL. In a web page. Javascript. No Plugins!

If you don't think that the above idea is awesome, get off my blog! For the rest of you, read on for demonstrations of said awesomeness.

I have a lot of random topics that I want to hit on in the future related to WebGL (performance, matrix libraries, shader organization, etc.) but for the time being you'll have to be content with a little demo. It's based off one of the earlier WebGL demos that appeared online, which displayed a critter exported from Spore in all his unlit, flat textured glory. On the page it mentions that the rendering is omitting the normal mapping and specular information provided with the model and encourages improvements. So I did:

[Update: This was easily the worst demo on the site, and hasn't actually been functioning for well over a year. I've felt it was best to take it down and spare the bandwidth. Sorry!]

Now, for most of you reading this any time near the original posting date, the demo above probably won't work. WebGL is still considered to be very experimental, and is typically disabled by default even if your browser supports it. Try it anyway, since it will point you in the right direction if it can't load properly.

For my version I used next to no code from the original (though I did lift the model, hope no-one minds!). Primarly, the Collada parser was re-written to be a bit more robust and generic (though mine is still extremely limited! Collada is a very complex format.) That said, there are still a great many things I would like to improve, but for the time being it's very fun just to get it up and running.



  1. Very cool! Works for me in the Chromium nightly build, but doesn't in the current Minefield -- I get this in the Error Console:

    Error: too much recursion
    Source File:
    Line: 230

  2. Very cool, I was tempted to have a go when the challenge was set; but, got a little side tracked with other projects;-) That's the problem with the web today too much good stuff and so little time to play. Here's hoping that the politics of webgl will finally be an end to IE and make our lives(and the web) a little more fruitful.

    PS with regard to blog posts, I find it comes in waves, I've now learnt it's okay to sleep for a bit as long as you remember you have a blog when you have something to contribute.

  3. Hm... I haven't tested it on Minefield recently. The nested timers in the Collada parser must be too much for it. I could probably get around that by using an interval instead of a timeout, but truthfully I've been meaning to break that out into a web worker anyway. The only thing stopping me is that apparently the XML DOM functions are unavailable in workers. Hm...

    In either case, I'll try to fix that soon. Thanks for the feedback!

  4. Tweaked the collada code so it doesn't recurse anymore. Should fix minefield, but I won't be able to confirm that till tomorrow. Seems to be a bit slower though. I'll have to look into that...

  5. And I've confirmed now that it works with Minefield too.

  6. Not working in FireFox 4.0.1.

    this warning is displayed in a infinite looped in the error console:

    Warning: WebGL: DrawElements: bound element array buffer is too small for given count and offset
    Source File:
    Line: 104