Saturday, May 21, 2011

WebGL RAGE source is up

(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.


  1. Any chance you could throw this on Github? If not, would you be opposed to anybody doing a mirror over there? For all intents and purposes, Google Code pales in comparison to Github.

    Thanks for releasing this!

  2. So now you've all got me curious. I've always been partial to Google Code because it allows mercurial and because I don't need to memorize another user/pass. :) What are the benefits of going with github?

  3. Code forks, with pull requests and automatic merging I would say is their best feature. People can modify your code, ask you to accept their modifications and you can add their changes to your code, all at the click of a button.

    Social coding wasn't quite the same before github.

  4. hg-git ( should solve that problem.

  5. Well, you'll have to give me a chance to get settled in Cali, but I'll see about getting a github version up soon!

  6. Cool! Congrats! I was curious about the code, and now I can read it :)

    +1 to GitHub :)

  7. Hi!
    I am a young programmer and I started to learn WebGL.
    I want to make an application in which you can walk around some place (for
    example, room, garden, [and the like this|etc?).
    I'll do the room (models), for example, in Google SketchUp 8 and save the
    format. dae or another.
    I would like application look like Quake III, but without the key action.
    Only look around using the mouse and arrow keys or WASD to move.
    I learned from but it's not enough for me
    Could you help me?
    You did such an application, so you have scripts.
    Or if you could give me any advice, tips on how to learn?
    I'm waiting for an answer.
    Sorry for my skill of English

  8. Misko,

    Wow, that's a pretty tall order. Certainly it can be done, but it's going to be a tough road to travel if you're a beginner. I would suggest making sure that you feel like you've got a good grasp on the concepts presented at LearningWebGL before working on a full level project like you're talking about. I've been playing with OpenGL in various forms for something like 12 years, so don't feel bad if it takes some time before you're getting results like I've been showing in this site.

    As for the idea of getting Sketch Up resources into WebGL, that's an idea I've considered myself but haven't pursued at all. I hear there's a Blender-to-WebGL exporter out there, and Sketch Up files can be imported into Blender. (They talk about it a bit here: That might be the most direct way to go about it. I know that Sketch Up can export to DAE files (Collada) but I wouldn't recommend going that route. My first WebGL demo was a (limited) Collada importer, and they're pretty tough files to read in any sort of flexible way.

    That's about as much advice as I can give on a general level for a project like yours. I'd be interested to see any progress you make, and if you have questions about specific WebGL techniques or problems I'd be happy to help with those.

    Good luck!

  9. Thanks for the tips, we'll see what I can do.
    When I have questions or effects, I show them.
    Thank you again. To write! :)

  10. Toji,
    I would like to ask you.
    You have a working application like to Quake?
    When I see the script and all the source would be much easier.

  11. I'm not 100% sure what you are asking, but I do have my Quake 2 and Quake 3 demos online and the code isn't obfuscated at all. If you're using a browser like Chrome (and if you're doing WebGL dev then you really should be!) Just right-click anywhere on the page, click "Inspect Element", and then go to the "Scripts" tab on the dialog that comes up. That will show you all of the code for that demo and most other similar demos online!

  12. This information is very useful for me.
    I downloaded all the elements from:
    I have a problem because all my files in one folder.
    Could you tell me what folders are there?
    And which files where are they? I mean (example):
    / js
    - glMatrix-min.js
    - jquery-1.4.2.min.js
    - jquery-requestAnimation.js
    / q3bsp?

    Or if I could get such information (in different ways) what folders are on the side?

  13. Hey, MiskoV. I hope you're still tracking this. I think GLGE ( is what you want. It works with DAE files and has plenty of demos doing EXACTLY what you're describing. Take a look at it, it's pretty simple to use.

  14. Hi Brandon,

    I work with an Ad agency in NYC and we'd like to see if you can help with with a project. feel free to email me at chuck dot fletcher at