5

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. :-)

Community
  • 1
  • 1
Kuka
  • 135
  • 1
  • 8
  • Great start. Anything that reminds me of the original GTAs is worth an upvote. – davin Oct 16 '11 at 14:40
  • +1 I'd also like to see some answers on this. (I was the one asking that question :)). – pimvdb Oct 16 '11 at 14:41
  • Quick question: The canvas in your demo, is it 2d context or 3d? – cherouvim Oct 16 '11 at 15:45
  • I know this is offtopic, but any info on why you chose 2d over 3d context? – cherouvim Oct 16 '11 at 16:09
  • Well, this is a bit embarrassing - I don't understand WebGL. I like 2d context, because it is simple: paths, rectangles, drawImage... There is nothing like this in WebGL. – Kuka Oct 16 '11 at 16:21
  • But if you know the answer (but for the 3d context), it is not hard to make more layers of canvases. So the usage of 2d context is not a problem, is it? – Kuka Oct 16 '11 at 16:23
  • The demo seems interesting, but you're getting some nasty perspective correction problems there with low poly mode (as it is said on the source of the 3D code). You should check out the WebGL lessons on http://learningwebgl.com/blog/?page_id=1217 so you can get up to speed with WebGL which probably will help you out a lot. And yes, it is WAY harder than simple Canvas 2D, but the benefits outweight the hardness. – Chiguireitor Oct 17 '11 at 14:06
  • The link is broken... – Calmarius Nov 21 '13 at 22:54

1 Answers1

2

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.

pimvdb
  • 151,816
  • 78
  • 307
  • 352
Toji
  • 33,927
  • 22
  • 105
  • 115
  • To be honest I was afraid of this kind of answer. I spent a lot of time working on my "engine" and I do not want to throw all my work away. Actually, I was looking for some simple function, that would solve all the problems and just draw transformed textures. Maybe, I will try to learn WebGL but there are so many other problems to solve - for example items, skills, NPCs, story. So I can not focus just on this problem... – Kuka Oct 17 '11 at 18:45
  • 3
    In your question you seemed very concerned about performance, and as such WebGL is unquestionably the way to go. If you are looking for easier solutions to integrate with your code, or something with greater compatibility that's different. One thing I would highly recommend looking at is Marius Gundersen's work on 3D in a 2D canvas. He gave a great presentation about it at a conference I attended recently, and looking into some of his techniques may help you out: http://projects.mariusgundersen.net/OnGameStart/ – Toji Oct 18 '11 at 18:42
  • That presentation is wonderful! Thanks! I've asked this question because I'm looking for some function that would draw a texture on a quadrangle. I have that function but it is too slow and I need to find a better solution. WebGL is good but I'm only 16 years old and I don't understand it. (I have read the tutorial but it didn't help much :( ) If you understand webgl, is it possible to make a function that would just map a texture on a quadrangle? And if it is possible, would you mind sharing it? – Kuka Oct 20 '11 at 16:03
  • LOL, I wish I could remember the algorithms for that. I did a simple software rasterizer years ago (I was probably 13/14), and I remember doing a lot of reading up on perspective-correct texture mapping techniques, but I don't recall a word of it now. Point is, accelerated APIs like OpenGL and DirectX hide that gunk from you, and life is usually better for it. A couple of quick Googles for "perspective correct texture mapping" will probably set you on the right track. I found this guy pretty quickly: http://www.lysator.liu.se/~mikaelk/doc/perspectivetexture/ – Toji Oct 20 '11 at 20:56
  • I've accepted the answer because I've found Three.js when I was looking for some WebGL tutorials. :) I have decided to use it and now it is a whole new game. (first person, sorry GTA1 fans) – Kuka Oct 28 '11 at 16:11