Sunday, May 15, 2011

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.

13 comments:

  1. This is awesome! Is there any way we can see the demo live?

    ReplyDelete
  2. Well, you can always come see my OnGameStart presentation, as I'll be showing it live on stage. Poland is a bit far for most people to go just to see a demo, though. :)

    The other option is that I will be posting the source code for the demo online in the next day or so. If you have your own copy of RAGE I'll give instructions on how to extract the levels and textures for use with this demo, and you can run a local server to play around with it.

    Not nearly as convenient as a live demo online, I know, but I was asked not to put any RAGE files on a public server and I'm going to respect that request.

    ReplyDelete
  3. Great work, good video/comments.

    ReplyDelete
  4. Pretty amazing. I was turned on to WebGL with the new Ro.me interactive video, and now this. One question, while I understand that the toolsets are unavailable, why would this level design structure be proprietary? Or did I misunderstand?

    ReplyDelete
  5. I'd love to know a little about how you're doing the texture streaming in javascript if you're open to talking about that before your demo at OnGameStart

    ReplyDelete
  6. I'll be putting up a "Tech Talk" post pretty soon like the one that I did for the Quake 3 demo, and yeah I'll go over the streaming then. My OnGameStart presentation is going to focus primarily on things to consider when building your own web-centric file formats.

    As for the format being proprietary: I can't speak for id Software but I would imagine that if you wanted to use this format in a product they would want a licensing fee (it is, after, their technology.) Beyond that, however, the real "magic" of the format is in the tools that create the level, not the final binary map itself. Since id has not released the tools (nor do I see why they would, unless this build path comes built in to the full RAGE editor) there's no good way to create these maps without their support.

    ReplyDelete
  7. Incredible tour de force. I now have an answer for all of those people who implied that when we ported Quake2 to WebGL, it was because Javascript wasn't performant enough for a more modern ID game :)

    ReplyDelete
  8. Really inspiring to see. Great job! Looking forward to read more about it, and to future experiemnts.

    ReplyDelete
  9. The stutter that's seen in the video, is it a problem with the encoding/decoding of the video or there are hotspots in the implementation that are, well, still hot?

    ReplyDelete
  10. Part of it is the video recording software, which caused a lot more pausing and lag than normal, but yes there are some "hotspots" in the demo as is. I've found that the most intensive part of the demo is swapping textures in and out of memory, and there are points in the demo where it needs to push five or six textures at once, which creates a noticeable jump.

    I've actually had a couple new ideas on optimization in relation to that since posting the video, and I'm seeing if I can work any in before I release the source code (which will probably be Friday or Saturday).

    ReplyDelete
  11. Great work! This is a great example to show off the power of WebGL. I found this through the Javascript Weekly newsletter (http://javascriptweekly.com/)

    ReplyDelete
  12. Are you rendering the whole map every frame? Or do you do some sort of spatial culling? BSP/Octree?

    ReplyDelete
  13. This particular map format provides a list of visible surfaces for each point along the predetermined path, which I'm using to reduce the amount of geometry per frame.

    Rendering the entire map each frame would not only be pretty expensive in terms of geometry processed (it's a big map!) but would also require you to have all the textures for the map in memory at the same time. There's 758 textures in the level from the video, each 1024x1024 24 bit color. That's 2.2 gigs of textures in memory at the same time... which would likely be a little slow. :)

    ReplyDelete