Canvas fast texture mapping

Question

I'm making a top-down game with simple 3d graphics. (I'd be happy if it were like gta 2.) I've implemented affine texture mapping that I have found here but it is too CPU intensive.

So my question is: Is there a better solution? I don't understand WebGL, but maybe hardware-accelerated texture mapping would be better than this? I need a function, that will map a texture on a quadrangle.

You can try my game here. (press J to see a wireframe and K or L to improve fps or quality) As you can see it really needs some optimalization. :-)

Answer 1

First off, that's an awesome demo! Kudos for getting that much working on it.

For a usage like this WebGL will absolutely give you better performance, and given that all it looks like you need is some textured cubes, I don't think that it would be terribly difficult for you either. Yes, 3D has more of a learning curve than 2D canvas work, but considering that you're already doing a lot of the math to simulate 3D anyway you'll probably find "real" 3D to be easier!

A good place to start would be the lessons at LearningWebGL.com. They'll run you through the basics, and texture mapping (the bit you want) is only 5 lessons in.

Of course, you could also get a little bit crazy and get the effect that you're looking from with pure CSS! There's a pretty cool demo of somebody actually building a city scene with it, so it's certainly possible. That feels like a bit of a stretch, though, and you'll probably be much better of from a feature perspective with straight WebGL.