Announcement: onGameStart

I've been sitting on this for a little bit, but now my face is on the website so I guess there's no sense in waiting any longer. I've been asked to speak on my Quake 3 demo at onGameStart, an HTML5 Game development conference in Warsaw Poland this September!

I'm still working on the exact subject matter of my talk, but it will most likely involve discussing the optimization challenges I faced while building the Quake 3 demo and things to consider when building a map or model format for use on the web. I'm also working on another surprise project that I want to be able to show off at the conference to contrast with the Quake Demo.

I'm extremely excited by this opportunity to mingle with the HTML5 game development community and share whatever I can about working in this exciting new environment! Hope to see you there!

Teaser time

So I'm taking a bit of a break from my super-secret game project to do a super secret WebGL project! :) I don't know if I'll be able to get this to a functioning point any time soon, but the following screenshot has me SUPER excited!

Hopefully I have more to show in another weeks time or so. Wish me luck!

Update: There's now something a lot more interesting than dots to look at!

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*