3dtexturestexture-mappinguv-mapping

Transforming 2d textures on rectangles to create illusion of 3d?


Suppose I have the following texture of a red house:

enter image description here

The above texture is meant to be projected on rectangles that form a cuboid, where the first one is the side(s), the middle is the front (back) and the third is the roof. Let's ignore the floor part for now. If we were to view the cuboid from an orthogonal angle, it makes for a convincing house.

Now, suppose I want to view the house from a different angle. Usually, you would expect the textures to be projected on centralized planes, like this:

enter image description here

Which is pretty common for foliage, or this:

enter image description here

Obviously, neither representation is really convincing. We either see intersectnig textures or transparent seams on the rectangles.

I noticed, however, that if I were to offset the top texture down and right, remove some portions of it, and fill enclosed seams with the nearest color (dark gray in the below figure), I would get an (inaccurate) representation of the "3d model":

enter image description here

This is not so terrible. Another idea I tried was to combine the two previous representations into one, where the latter "encompassed" the former:

enter image description here

Another attempt was to create a diagonal rectangle with the side texture:

enter image description here

I started to wonder if there exists a general method (or even a special one, since I have not found that either) to align, rotate, translate, or even add additional textures, such that the 3 textures would create a decent 3d illusion, no matter the viewing angle. I have not found any reading material on this topic, which leads me to believe this concept may be fruitless, yet I want to know for certain. The closest concept to this would be sprite stacking, but they only work well for a particular viewing angle.

I will hardly be surprised if this is not possible on every set of textures (some 3d models may be perhaps too intricate?) but intuitively (to me), achieving

enter image description here

does not seem to be that far fetched.

Am I mistaken?


Solution

  • If you set the textures on 2d planes no matter how you arrange them you're going to loose the 3d illusion form some angle. I couldn't imagine of any way of applying textures on a combination of 2d planes to create 3d illusion from all the angles.

    Did you try using bump maps or normal maps which gives an illusion of depth on a 2d plane? https://apoorvaj.io/exploring-bump-mapping-with-webgl/

    Or you can try out displacement maps, which will modify the 2d planes in 3d as per the displacement maps on runtime that will not be an illusion as such, but it should work with couple of 2d textures and a plane, you'll not need a 3d model.

    https://threejs.org/examples/webgl_materials_displacementmap.html