3D models on 2D tilemap perspective when scrolling

Question

I am creating a small top-down game, where the player traverses a 2D tilemap, with an illusion of depth provided by 3D models for things like buildings or trees.

Having gotten to the point where I can render models and a basic terrain as a background, I've gotten stuck on the task of joining both together in a way as to seem not too unnatural.

I think an image description of my problem would be best suited for this. For the sake of explanation, the model I am rendering is a transparent cube.

In this position, where the camera has a head-on view, everything looks generally normal. Now, if I shift the model a bit to the right, the following gets displayed:

Not horrible by any means, but it does look a tad bit awkward: the road remains straight while the building seems to be jutting out from the path. The building itself has been panned, but the ground has remained static. Additionally, this has proven rather nausea-inducing during testing, due to the awkward mixing of angles.

The only possible solution that came to me (and hence why I am asking here) would be to render each tile as a model as well. I think that creating a flat rectangle the size of the viewable screen and texturing it with the visible tiles could possible work: that way, since it is a model, it can be rotated and shrunk based on visibility, like the model.

However, I am (very) new to OpenGL, and I fail to see how I could implement this. I know that I can draw a textured rectangle with one, solid texture. I don't know how to draw multiple, smaller textures across a face of the rectangle: is it even possible?

Then, considering that I wish to have other things like cliffs, I wondered if cliff tiles could be rendered as being slanted. My map format has a height map, so the slant could be determined by the direction in which the nearest tile with a smaller height resides.

I fear I'm being rather clumsy at explaining this, which is why, using my most Picasso-esque skills I have put together the next image:

Essentially, though the map itself is made up of 2D tiles, by changing the angle they are being rendered at I reckon it would be possible to simulate a 3D effect: the player camera (smiley in the image) would not be able to see the leftmost side (yellow) if they are positioned towards the right.

Regardless, this is all hypothetical and I have no idea where to even begin. Is it possible to render the background as essentially a model in 3D space? If so, how would this be done: via one large cuboid, or multiple smaller ones? Lastly, would slanting textures based on neighbor height work? More importantly, is there a better way to achieve my goals than what I have proposed?

For all it matters, I am writing this game in Java, utilizing the LWJGL OpenGL wrapper.

Answer 1

What you are asking for is completely doable, as you initially wanted: 3d on 2d. You just got the camera angle wrong. For CG cameras, the perspective is almost always linear (as opposed to say, fish-eye) so all you need to do is have the camera looking straight down.

The best example I can think of is the early GTA games, which had simple 3D models for the buildings on top of sprites/tiles for everything else:

Answer 2

As Cong Xu points out it is fully possible to do this effect, as GTA 1 & 2 did. What he fails to mention is that the 2d part is part of the 3D scene. You don't need to fake the 3D effect, you have a graphics card that can compute that on the fly.

How do you do the 2d stuff? Simple you have a quad that contains one texture. So if you have multiple tiles, you render one quad per title. Don't worry about the performance, the graphic card can handle that many. The quads are all in a 2D plane, for example the xy plane. (z=0)

You can also render other 2D objects on top of the ground by rendering more quads where the objects should go. The only thing you need to consider, is that you disable depth testing for the 2d stuff. You can also render non square objects by using alpha blending. You image has a transparent area, you render the quad and only the bits that are not transparent are added to the scene.

Then for the 3D objects you enable depth testing and render them normally.

At this point the camera angle does not have to be perfectly down. You can slant the camera slightly froward as you showed in your little sketch. Just don't go to far or the 2d effect will be to obvious.

A final note about lighting. To get 3D objects that look 3D you might want to use one or two directional lights. If you do, you need to disable the lighting on the 2d bits, because that will ruin the 2d effect.