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.

Enjoy!