WebGL RAGE source is up

https://github.com/toji/webgl-ios-rage

(Edit: Code now resides on github, by popular demand. I won't be maintaining the Google Code version in the future.)

Okay, this is a bit of a different release for me, because I'm really not happy with the state of the code as is, but I'm putting it up anyway. Basically what it boils down to is that I promised to have the code up this week, and I don't want to break that promise. Beyond that, however, I have a new job at Motorola that I'm starting on Monday. (I haven't mentioned that on the blog yet, have I? I forget that not everyone on this site reads my tweets.) I leave for California tomorrow, and since there's no way in hell that I'm checking my iMac as luggage I'll be without a good personal development machine for something on the order of three weeks. So when it came down to a choice between releasing some ugly code now or releasing some prettier code a month from now, I figured you guys would forgive me if I just pushed what I had!

A few notes about the release:

You'll need to compile the PVRtoJPG.cpp into an executable that can be called by the tex_parse python script. (I've included an OSX build) The python script breaks an .iosTex file down into individual PVR files, and then translates those into the JPGs that you need for the walkthrough.

For the YouTube demo I was running off of a server on my local machine. This skirts around the problem of how long it takes to download the texture files. If you run this from a remote server currently you'll likely end up with the wrong texture most of the time. This could be solved by buffering image downloads much like a streaming video, where we start downloading before the initial render, time how long it takes for X number of images, then figure out how far ahead we need to have downloaded before we start moving.

The number one slowdown in the demo is unquestionably the process of actually pushing textures into video memory (gl.texImage2D calls). There's very little that can be done to mitigate that (use smaller textures, maybe?) but things could be helped if I restricted it to at most one gl.texImage2D call per frame. Right now they have the potential to come in big batches.

As I said in my tech talk notes, it took me a while to figure out exactly what the texture structures were. As a result, the code sometimes refers to them as "offests" and sometimes as "textures". Sorry for the confusion, I'll clean that up next time I get a chance.

If anyone has questions about the code I'll be happy to answer! And expect me to push out some improvements to the project once my personal life settles down a bit.

RAGE WebGL Tech Talk

Wow!

I'm really blown away by the response to the video of my RAGE WebGL demo! It's been getting a lot of word of mouth on Twitter and it's been really fun to follow what people have been saying about it on sites like reddit. And most of what I've been hearing is positive too! Which is awesome... mostly...

..except I think people don't really understand what they're seeing. I'm getting a lot of credit for doing an awesome WebGL demo, and certainly I'm proud of it, but the fact is that the real work done on my part was reverse engineering the format. Once that was done the rendering was pretty trivial. And if the video looks awesome then ALL of the credit for that goes to id Software's incredible art and tools teams! The fact is, outside of some careful management of the textures this project pales in comparison to the complexity of, say, my Quake 3 demo. Of course, to a certain degree that was the point of this whole exercise...

iOS RAGE rendered with WebGL

As promised, here's the new WebGL demo that I've been working on! I won't be posting a live version this time (watch the video to find out why), but I will be demoing it on stage at OnGameStart this September as part of my presentation.

I have several follow up posts to this one that I'll be making soon to post the source code for this demo, describe the file format (at least the bits that I was able to figure out) and talk about some of the rendering techniques used here and why I feel this is a great format for WebGL.

UPDATE: I've now got the file format notes that I kept while building this demo avaliable as a Google Doc.

UPDATE AGAIN!: Tech talk for this demo is up now.

Interleaved array basics

I got a question from Jon in the comments on the WebGL sandbox project yesterday:

Hi Brandon, Using your demo as a starting point, I try to display a pyramid, but this far I've only been able to see one of its four faces. If I use gl.LINES instead of gl.TRIANGLES, then I see only one triangle (i.e. on face). I'm also a bit confused by the way you mix texture coordinates into the vertArray. Can you explain how these coordinates get sorted out in the shader?

Honestly I don't know if I'm the best guy in the world to be explaining this, but I'll give it a try, since there seems to be remarkably little WebGL-specific information about this. Most tutorials prefer to keep the arrays separate for simplicity, but that's not optimal for performance. The concepts all work pretty much the same as OpenGL, but it's nice to see them put to use in the environment you are using. It requires some basic understanding of subjects that don't normally apply to Javascript, like counting bytes, but it's not too hard once you get the hang of it.