Topic: Fun With Raycasting

Greetings, my beloved asylum! Like a bad girlfriend, I can't stay away.

So, I've been playing around with the Canvas tag, and ported an old raycaster I had lying around (which used DHTML to accomplish a similar effect, which I think I posted here somewhere around five or six years ago :X) to use it. For good measure, I added floorcasting which really adds to the effect, but slows everything to a crawl. (I get 14FPS in the latest WebKit nightly, 10FPS in Safari, 5FPS in the latest Firefox and Opera.) Granted, I can reduce the screen resolution (which really helps, of course), but I'd like to save that for a last resort.

http://lonelypinkelephants.com/scarab/ (Click to move/turn. Interface doesn't work in Firefox, probably because event.offsetX is garbage. )

The map you walk around is shamelessly stolen from http://www.benjoffe.com/code/demos/canvascape/.

I've made all of the trivial optimizations already, but it's pretty clear that the rendering is the bottleneck, not the calculations. I was wondering if anybody here (some of whom I know already have extensive experience in raycasters ) knew of clever methods to optimize what I'm trying to do. My best bet so far is that I'm just trying to push too many pixels, especially considering the fact I'm using drawImage for each one. I'd like to shoot for PC + iPhone, but I think on the iPhone I'll have to settle for walls-only.

Also, a cookie to whoever knows where the textures + skyline are from.

EDIT: Looks like I might be able to generate a floor image and just blit it? http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation

Anybody know if that's cross-platform or not?

(Edited by iron_wallaby on 02-12-2009 15:22)

Was much easier than I expected. The code is updated and now the floor is slathered with a lovely XOR texture. The framerate is now up to 33FPS in Webkit, which is much closer to what I was expecting. I'm also considering switching this thing back to raw DHTML -- I'm not really doing anything that requires canvas, and the CSS z-indexing could be super useful whenever I get around to adding objects...

Anyway, I'm not encountering a bizarre problem when the canvas drawImage() call (for the texturemapped floor) causes errors, but only while moving. I'm still digging into that one...

While I'm at it, though, I'd rather not stick with an XOR texture forever... is there any convenient method to getting the RGB values of the individual pixels in an image?

Hackity hack: Slowly fixing it...

(Edited by iron_wallaby on 02-12-2009 23:32)

Hey Ironwallaby, I think i played with your script when I was learning about the canvas tag. I remember it worked a whole lot faster when I switched to setTimeout instead of setinterval. I have no idea why. I ended up placing the setTimeout for the draw function in the keyhandler function. That way it only calls draw when you move and it needs to redraw.

Alright, one more update for the evening. I basically rewrote the whole thing to clean up a lot of the mess...

It now uses DHTML and keyboard controls (arrow keys/WASD), and thus works across all browsers (except MSIE).

EVERYTHING (raycasted walls and textured floors) are constrained to 4x4 pixel blocks... I'd like to lift that restraint on the walls so they look smoother, but that will have to be another time when it's not so late. Still havn't figured out the right way to load image pixels so I can use a proper texture map for the floor. Still, I'm pretty happy with it, especially considering how concise the code is.

It's pretty fast. The floors are blazing, the walls are pretty good but I'm not convinced they're playing nice with the HTML -- there may be a better/faster way to handle that. (I am just doing GIANT image tags within divs, and cutting everything off with overflow: hidden.)

@racerX: It must have been someone else's, my old one was DHTML. I'll have to experiment with setTimeout -- I've generally always just gone with setInterval for convenience.

(Edited by iron_wallaby on 02-13-2009 04:08)

(Edited by iron_wallaby on 02-13-2009 04:08)

Yeah, I had made your dhtml one work in canvas but I couldn't get the tex variable figured out and it was not drawing the textures clean enough. Your original one used images for each sliver of the blocks drawn. So i just used the canvas image to do the slicing based on your tex variable. It's pretty fast. I also did one with colored divs that get lighter as you approach. Here's a link.
http://h1.ripway.com/tinyscript/colorizedCrossbrowser.html
I'm sure it's yours, but I probably messed with all the constants. I remember I found the script on your RPI server where you had linked it. I remember this because my girlfriend's kids both went to RPI at the time.

I borrowed Ben Joffes's background image script from canvascape also. Ben has given me permission to use any of his scripts if I make changes to them. He's as cool as Poi said he was.

Oh, I follow now! My mistake, that one was definitely me.

iron_wallaby: On my 2Ghz notebook, your script runs at ~30fps in Opera 9.63, ~40fps in Opera 10a, ~50fps in FF3.1b and ~75fps in SF4dp2. Alas FF lags a bit at updating the BMP image though.

To optimize things a little, you could precompute the BMP header, get rid of the muls by 256 and Math.floor in the floocasting, and remove the multiple calls to pack() in favor of a single call when setting the FLOOR.src. Also, setting the whole style property instead of multiple sub properties might be faster.

Nice work.

Oh, btw, I've done raycasting with objects using Canvas, and the depth sorting is trivial. The overhead is negligeable . Moreover IMO it's largely made up for by the equal quality of rendering of all the elements of the game ( walls, sprites, floor & ceiling if any, HUD and other overlays ) : no sharp elements on top of blurred ones or the other way around. And Canvas also makes the management of multiple textures a million times cleaner than the DHTML approach.


HTH

Cool stuff, p01.

I've made further attempts at optimizing the floor/ceiling routines (8-bit PNGs, the optimizations noted, etc.) and was never happy with the performance I was getting, so I tried something completely different:

http://lonelypinkelephants.com/scarab/mode7.html

This renders excellently in Safari/WebKit and Firefox, though it's awfully slow in Opera. It looks pretty good, with the singular exception that the floors seem to have a different vanishing point than the walls do. I plan on experimenting with shearing the floor horizontally to try alleviating that--I think that, due to the "faked" nature of the Mode 7 effect, fudge factors are going to have to be involved no matter what, which is a bit of a disappointment. (As long as it's fast and looks good, though, right? )

EDIT: One quick hack later and it looks much better. Still not perfect, but perhaps good enough.

(Edited by iron_wallaby on 02-18-2009 00:13)

I aslo believe a Canvas based hybrid ( mode7+raycasting ) approach is the way to go. It produces a much more consistent quality of final rendering and ends up with a much more stable framerate.

Canvas and DrawImage() have been greatly optimized in Opera 10. At work, I get 6fps in Opera 9.62 and 18fps in a build of Opera 10. Opera 10 should be in beta or final by the time you get everything in place and polished a bit in your game/experiment.

You're right, it's much improved in Opera 10. I'm still going to have to tweak for more performance, but it's a much smaller jump. (To it's credit, though, Opera has by far the prettiest rendering.)

I also gave Chrome a try last night and it really surprised me: while I get 16FPS in Opera, 45 in Firefox, and 58 in WebKit, I got a whopping 157 in Chrome. (The rendering is fairly ugly, though.)