WebGL Starter Package

[Edit: Now with 100% less jQuery dependency!]

I've had some sudden urges to jump back into WebGL land again lately, and while gearing up for another project it struck me how much time I was wasting trying to copy one of my older projects, strip out all the project-specific stuff, and get down to a really basic starting point.

Realistically, that starting point is one of the hardest hurdles to jump for any graphically-based program, doubly so for 3D programs. There's just so very many silly little things that might go wrong!

• Is the context and viewport set up properly?
• Is your shader compiling?
• Are your vertices right?
• Are your indicies right?
• Are your matrices right?
• Did you give the right strides and sizes to your vertex layout? 
• Is your geometry rendering in front of the "camera"?
• Is it rendering in a color other than the background color?
• Are you certifiably insane yet?

I decided to save myself some greif and put together a quick and dirty WebGL page that I can use as a jumping-off point for future projects. The goals here were to start with something that was putting geometry on the screen and allowed me to move around the scene, nothing more. This was the result:

Toji's WebGL "Sandbox"

Like I said, very simple. Just enough geometry on screen to know that you're rendering properly and to give you a sense of space. This is certainly not meant to be the foundation of a complex demo, but it sure beats starting out with a blank page! Of course, while I built this for my own use I certainly hope that some other aspiring WebGL developer out there finds it useful, and to that end I've packaged it up in a convenient downloadable bundle:

WebGLSandbox.zip

A couple of quick notes, for those that end up using this: Most of the formats I work with are designed with Z as the "up" axis, so Y is the one that actually points "out" of the screen. I'm using requestAnimationFrame (with fallbacks to setTimeout) for the core animation loop, so hopefully that doesn't cause any issues. I'm also not setting anything like blend modes or geometry culling states, you're on your own there. The page relies on my glMatrix library (included) and also makes use of webgl-debug.js, though you can easily turn that one off.

If anyone finds this useful or uses it as the basis for their own projects I would love to hear about it! Also, if you have any suggestions on how to improve it send them my way! Happy coding!

requestAnimationFrame

On the suggestion of @mrdoob today I reworked the animation loops for my Quake 3 and Doom 3 demos to use requestAnimationFrame (if it's available). This won't really produce a visible difference for most people, but it should utilize the browser event loop more efficiently. Paul Irish gives a good explanation of it at his blog.

A side effect of this that may be of interest to other developers is the simple little jQuery plugin I wrote to support this functionality in a cross platform manner that also provides a few perks to the user. You use it like so:

$('#canvas').requestAnimation(function(event) {
    // Draw frame here...
});

The "event" passed into the callback function contains the following values:

timestamp: Current timestamp, equivalent to new Date().getTime()
elapsed: Milliseconds elapsed since the animation started
frameTime: Milliseconds elapsed since the callback was last called
framesPerSecond: Rough count of the number of times the callback has been called over the last second. Only updates once per second.

If you wish to stop animating, return false from your callback.

I recognize that this may not meet everyone's needs, and probably is a little buggy at the moment, but it should provide a quick and easy way to do a basic animation loop in a way that plays well with your browser. If you have any suggestions for improving it let me know!

Hellknight demo works again

I've had something come up this last weekend that encouraged me to go back and clean up a couple of my Demos. Hopefully I'll have something more tangible to talk about in that regard soon, but the practical effect of it is that I got the Hellknight demo working again!

The problem was exceedingly stupid, and the only reason I hadn't solved it earlier is because frankly I had never bothered to look. When doing the update to move everything over to the new array models I apparently started pushing the mesh indicies in as a Uint8Array, then later called drawElements with UNSIGNED_SHORT (which, of course, is 16 bit). Obviously these two don't get along very well. I changed over to a Uint16Array and everything worked again! No one to blame but myself on that one. :)

Oh, and I had to un-invert the texture coordinate V component that I had previously been inverting. No idea why that happened. *shrug*

First impressions of Gingerbread for the Droid X

So I posted this review on the Motorola support forums (here), but apparently even though I didn't give out any details about where to get the leak Motorola still felt that me talking about Gingerbread (even if it was mostly positive) was unacceptable and they locked down my post and removed the review. Fortunately, I saved a copy, and I'm reposting it here. Also, since this is my site now and not theirs, I have no qualms about linking to the leak pages:

Get your Gingerbread goodness over at My Droid World! Huge thanks to P3Droid and the crew for pulling this together for us!

I've spent the last half hour or so browsing through my newly Gingerbread-ed X, and I wanted to let the community here know my initial impressions. It's still early, so I probably won't cover everything but I'll update this thread as I find new things. For the sake of reference I was using Liberty 1.5 just before I updated, so I'm going from Blurless to full on Blur. (Quite the switch!)

glMatrix 0.9.5 released

Quick post to say that I've just posted a new version of glMatrix up on the Google Code repository. This is primarily a bug fix release, but I've also squeaked in a few new functions at the suggestions of some users including: mat3.transpose, vec3.lerp, and quat4.slerp.


I know it's been a while since I've updated the library, but frankly I haven't had much motivation to do so lately. I haven't had a chance to do much with WebGL lately (much to my dismay!) and it didn't seem like anyone else was really using the library. A few days back, though, I received word that the awesome tutorials at LearningWebGL.com have been updated to use glMatrix! Needless to say, this provides a bit more motivation for me to keep the libraries up to date!

I'll be paying a bit more attention to items on the library issue page for the next little while, so please direct any bugs you find or feature requests you have over there. Thanks!

Why I love my Android, but bought my wife an iPhone anyway

Yes, I'm one of those crazy blokes that was up at 3AM (well, 1AM in my timezone) to pre-order an iPhone as soon as it came out on Verizon. But not for me, for my wife. Her old feature phone was dying and she had made certain wistful comments about how nice a smartphone would be, so when given the chance I jumped at it. It arrived yesterday, and so far she seems to be in love. Yay!

There was a funny moment when I gave it to her though, one that caught me off guard. After an initial moment of shock and excitement (it was a surprise) she turned to me and said: "But wait, why didn't you get one for you?"

I laughed in her face.

It was a totally involuntary reaction, and I felt bad for it, but in all honesty the idea of getting an iPhone for myself seemed a little absurd. I absolutely love my Droid X, and wouldn't trade it for anything Apple has to offer. At the same time, I would never buy my wife an Android phone (or at the very least not any of the ones Verizon offers at this point). I feel it's worth examining the reasons why:

• I don't want to give my wife a phone crammed with bloatware. I don't want to try and explain why that stupid Verizon bookmark will never go away, or why VZ Navigator is stuck there, even though she'll never use it.
• I don't want to ever be concerned about wether or not she's going to get the latest software and OS updates. I don't want to tell her that the cool new feature that they just announced may not be coming to her phone at all because the manufacturer is too lazy to update it.
• I don't want her to deal with a buggy, bloated skin. I don't want to have to explain why my phone looks and acts different than her phone which looks and acts different than her parents phone, even though they're all on the same OS.
• I don't want to EVER tell her that she needs to pull her battery to get her phone to respond again. I've needed to do that weekly in the past with my Droid X (before I started using custom ROMS).
• I don't want her to worry about wether or not an app in the store will actually work on her phone. I don't want her to pay for something only to have it crash and burn when she tries to run it, because it was developed on Phone X and she has Phone Y.
• Basically: I don't want to give her a phone that needs maintenance, by me or anyone else. It's a freaking PHONE! If she has to keep running to her geeky husband just to keep it running, it has failed in the most fundamental way possible.

Say what you want about walled gardens and draconian policy, you have to admit that Apple puts the rest of the mobile world to shame when it comes to making a smartphone that just plain works. There's a lot to be said for that, and I honestly believe that that is the core reason why they still sell like mad.

Of course, on the flipside there's MY phone, which comes with an entirely different set of qualifications:

• I don't want to ask permission (much less pay) for the "privilege" of running a program that I built on my phone.
• I don't want to be told that I can't run something just because I didn't get it through their "official channels." If I find a cool project online, who are you to tell me I can or can't try it?
• I don't want to ship my phone off for a week because my battery died.
• I don't want to pay through the nose just to get more storage.
• I don't want to have to use some proprietary cable when I have several perfectly good micro USB cables lying around.
• I don't want to be forced to use a particular music, email, browser, or messaging app just because the phone maker doesn't like competition.
• I don't want to lose my widgets! Holy crap, how do you people live without them?
• Basically: I view my phone as a small computer, and I want to treat it as such! I don't mind a bit of tweaking and fiddling in order to have more control over my device.

Of course, these two viewpoints (Absolute stability vs. absolute control) are somewhat opposing ideals, but it is certainly nice that there's enough choices out there to satisfy both parties. Granted, I think both sides could certainly be improved by trying to meet somewhere in the middle: There's no good reason why Apple can't free up their platform a little more, and there's no excuse for me ever needing to pop my battery because my OS locked up! Until we hit that point, though, it's a bit sad to say that the iPhone really is the only sane option for users that want a reliable device without dealing with a lot of crap from the carrier and manufacturer.

Android still has a long way to go in that regard.

A few other random notes before I go, after observing my wife with her phone:

• No matter how much I try to delude myself into believing that my phone has a snappy UI, that illusion disappears the moment I interact with any iOS device. It's so much more responsive that it makes me want to cry. This is important, Google! Fix it!!!
• It's unfortunate that many of the Android apps out there are mere shadows of their iOS counterparts. (Pandora comes to mind immediately.) Many Android apps look like amateur knockoffs in comparison, even when developed by the same company! And that's not even considering the multitude of apps that have no Android equivalent! (Netflix! I'm looking at you!)
• It's completely baffling that Apple would do something as clumsy as sticking an actual temperature (73 deg) on the weather app icon and not make it update! The first big question my wife had about the phone was "Why isn't the temperature right?" It took me several minutes of googling to discover that the value shown is static. Same goes for the clock. Seriously?!?
• I didn't realize how much difference two features really make in how I use my phone: The notification bar, and the app drawer. The fact that I can get notifications about anything on my phone in a spot that I can easily see (AND easily ignore) from pretty much anywhere is something I totally took for granted. Likewise, the ability to keep infrequently used apps hidden away in the app drawer while reserving my homescreens for the things I use all the time is absolutely invaluable.

Cutting the Cable (TV)

My wife surprised me a little while ago by approaching ME with an idea that I had been toying with for a while but never suggested to her because I thought she'd hate it:


"Could we save money if we canceled our cable subscription and just did Netflix instead?"


Well, yes! Yes we could. With our special "we want to keep you as a customer so we'll lower your cost for 12 months" rate having just expired a decent internet connection and standard cable package was now running us about $120 a month. Ouch. The plan was then to sign up for Netflix and Hulu Plus, get a Roku player, and see how it worked out. This was a bit of a leap of faith for us, since we'd never used Netflix before, and I'd only tried Hulu online. If we stuck with it, though, we'd be keeping an additional $45 or so each month, so it was well worth it!