3D Canvas Walker revisited

Screenshot

One of the things that fascinated me most about computers since I was a teen, was their ability to simulate a three-dimensional space where one could move around in.

That’s why I was so intrigued when I read Jacob Seidelin’s post about “Creating pseudo 3D Games“. I had to play around with it, as I wanted to have mouse control in it, but performance was so bad that it was impossible. So I laid aside that idea. Eventually, he continued this project and used it for something pretty awesome called “WolfenFlickr“, where you can walk around and look at Flickr photos, attached to walls. As I said, pretty awesome.

Anyway, what I wanted was mouse navigation and strafe keys, as you have it in shooters – this kind of moving around always gives me the feeling of being “free“ in a way. Experiencing that freedom in a web page (w/o flash, of course) was still on my mind.

And the I stumbled upon Ben Joffe’s textured Canvascape 3D-Walker. The performance of the canvas element drawing the image slices was better than letting the browser render single elements for each slice – much better. In fact, the idea of mouse control immeadiately popped up again and I had to give it a try. And – it worked! Of course it has some drawbacks (that is, when the cursor leaves the browser window, there’s no more control…), but it gave me that feeling of freedom while moving around!

Fooling around with the canvas element was fun and tought me about it’s image methods. And I hope to find more time to take it further…

Of course there’s an aweful lot of work ahead if one would want this to be pretty (it’s all bricks now, no interaction, perspective issues, no smooth movement on strafe, and so on…) and performance is still an issue with high-res textures, but it is a lot of fun moving around.

Here’s what I added to Ben Joffe’s Walker:

• mouse control
• strafe movement
• walk and crouch
• high-res textures

I dropped IE-Support for this and disabled the mini map for performance reasons.

You’ll need Chrome/Chromium to see it in action in high details mode, but it’s definitely worth it!

Go give it try! Move the mouse cursor into the center of your browser window, press “M“ and enjoy!

PS: Chromium builds for Mac can be found here.

Note: The modifications are all just minor, all credits for this go out to Ben Joffe!