Java Tips, Tricks & Code

As mentioned in last month's collection of Mascot Capsule 3D tricks and tips ("Tips for Creating Java 3D MIDlets"), so called texture distortion can be a problem when modeling in 3D. This tip gives a more in-depth explanation of this problem, and its solution. We'll concentrate on one common type of distortion caused by polygons not being vertical to the camera.

Let's start with a quick look at a straight-on view. The two images below show the front view of a basic 3D box without, and with, a texture. Everything looks great and the box and texture look correct.

In the next two images we see the same box, but now rotated away from the camera. Perspective causes the top and bottom edges to be skewed; the top edge appears to trend up and to the right and the bottom trends down and to the left.

All of a sudden the texture doesn't look that great anymore. The texture is clearly distorted on the box side. What happened? Well, notice that the box isn't actually a box, but a set of triangles. When placing the texture on these triangles, the computer really doesn't change the texture according to the perspective; it just skews the bitmap to fit each triangle. The very top and bottom edges of the wall look OK. However, the bricks on the upper left triangle of the wall's face follow the top edge. The bricks on the bottom right triangle follow the bottom edge. The transition where the triangles join is sharp and obvious.

What we would like to see is the shapes of the bricks matching the perspective of the wall. What we also would like to see is the bricks between the top and the bottom slowly transform between following the bottom of the wall to following the top of the wall, making the middle layer of bricks more or less a horizontal line. However, this is not what we see in the picture. On the contrary, all layers (or rather each and every part of a layer) follow either the direction of the top side, or the bottom side, and there is no smooth transformation between these.

One solution to this problem can be seen in the following four images, where we've increased the number of triangles that make up the wall.

The computer still renders the texture on each polygon the same way as before, just skewing them to fit. However, because we now have more triangles, the change in direction of the texture between different triangles becomes smoother.

The solution is simply to find a compromise between the number of triangles required to minimize the distortion of the texture map versus the extra processing time necessary to render them.

Another simple solution is to avoid the problem by using a texture that doesn't have a symmetric pattern in the way a brick wall does. If you use such patterns, even the minimum number of polygons might look very good, as in the images below. Compare these to the four first images; it's a definite improvement!