Methods for pseudo-perspective skew
by ericlin


Flash does not support "perspective" skew for a bitmap. It is a pitty for those who like 3D design. We like a bitmap texture on a 3D maze like Doom game. We like a 3D gallery showing our bitmap hang on the wall.

Java can do this by manipulate each pixels of bitmap. However, it is a hard work for CPU. Flash can do similar calculation but there is no "pixle" support. So, we need a small mask to retrieve a pixel from a bitmap. Think about that, for a size of 100x100 bitmap, we need 10000 mask and background bitmap. It is not very practical.

So, we try less perfect solution. Here are several methods we use.

download skewComp.zip

1. Manipulate pixels by line.

Right upper corner shows the result. We create several stripes as mask. Each stripe grows in 1 pixels height. So, we need 30 stripes and 30 copies of background picture. Zoom each pic-mask pair and move them to proper position. The result is best in all possible methods. However, 1 pixel is not accurate enough, we still see "zig-zag" stepping without "anti-alias effect". And, it is bad if user 
zoom the picture.

Anyway, the appearance is best without any distortion.

2. Divide bitmap into 2 triangles.

Right lower shows the result. This is the most popular method. We create two triangular mask, the left-top triangle and right-bottom triangle. Then we skew each triangle to fit the perspective quandrangle area.

The pitfall is that, the skew effect is not homogenous. There are difference between these two triangle. If we see it carefully, there is a line separating these two triangle. It looks like we wrap the quadrangle along this line. Check the grid in the perspective, we we see the demarcation line.

However, it is smooth roughly and many wont notice the demacation.

3. Divied bitmap into 4 triangles.

Left lower corner shows the result. It is a variant of 2-traingle method. We need 4 triangle and 4 copies of background bitmap. Sometimes, the appearance is better than the 2-trangle one.


Lets compare the results by click the button "toggle grid":

1. Check the distortion of grid. It shows the distortion of the skew. Of-course, the right upper corner one is the best. The more work load the best ?!

2. The next picture is an irregular rose without any "straight line" except the text at the bottom. It is hard to tell which is best. They looks all right because distortion of a curve line is difficult to get noticed.

3. Here is straight lines. Marvelous, and lucky. The straight lines are vertical which is not distorted by either method. The horizontal lines should have got distorted. However, they are arranged at the peripheral, which are safer. Did you notice any distortion ?

4. Here is a boat.Well, there is no straight lines. But, I arranged the boat intersetting the demacation line of triangles. We see the distortion and in-homogenouse skew across the demarcation line. It is obvious in the 2-traingle methods. Less prominent in 4-traingle methods. However, if the bitmap is small sized, maybe we wont notice it.

5.Here are many horizontal lines. (Vertical lines are resistant in our methods). Horizontal lines at the peripheral is more resistant. Now, we have many horizontal lines at the center field. Well, both 2-traingle and 4-traingle method give obvious distortion demarcations.


Conclusions:

There is no perfect way. The 2-traingle one is the simplest and most popular. It is enough if the bitmap contains no horizontal lines intersecting the demarcation line. If our bitmap has many horizontal line at the center field we might need other method to implement the prospective effect.

If the skewing is not severely distorted, the large side is only slightly larger than the smaller side, then we can try the pixel-line method. If smaller side is 100 pixles and the large side is 130 pixels long, we need 30 masks if we set our accuracy to 1 pixel. If we blurr our accuracy to 2 pixels, then we need only 15 masks.