texture mapping a trapezoid with a square texture in OpenGL

Here is a good explanation of the issue & solution.

http://www.xyzw.us/~cass/qcoord/

working link: http://replay.web.archive.org/20080209130648/http://www.r3.nu/~cass/qcoord/

Partly copied and adapted from above link, created by Cass

One of the more interesting aspects of texture mapping is the space that texture coordinates live in. Most of us like to think of texture space as a simple 2D affine plane. In most cases this is perfectly acceptable, and very intuitive, but there are times when it becomes problematic.

For example, suppose you have a quad that is trapezoidal in its spatial coordinates but square in its texture coordinates.

OpenGL will divide the quad into triangles and compute the slopes of the texture coordinates (ds/dx, ds/dy, dt/dx, dt/dy) and use those to interpolate the texture coordinate over the interior of the polygon. For the lower left triangle, dx = 1 and ds = 1, but for the upper right triangle, dx < 1 while ds = 1. This makes ds/dx for the upper right triangle greater than ds/dx for the lower one. This produces an unpleasant image when texture mapped.

Texture space is not simply a 2D affine plane even though we generally leave the r=0 and q=1defaults alone. It's really a full-up projective space (P3)! This is good, because instead of specifying the texture coordinates for the upper vertices as (s,t) coordinates of (0, 1) and (1, 1), we can specify them as (s,t,r,q) coordinates of (0, width, 0, width) and (width, width, 0, width)! These coordinates correspond to the same location in the texture image, but LOOK at what happened to ds/dx - it's now the same for both triangles!! They both have the same dq/dx and dq/dy as well.

Note that it is still in the z=0 plane. It can become quite confusing when using this technique with a perspective camera projection because of the "false depth perception" that this produces. Still, it may be better than using only (s,t). That is for you to decide.


I would guess that most people wanting to fit a rectangular texture on a trapezoid are thinking of one of two results:

  1. perspective projection: the trapezoid looks like a rectangle seen from an oblique angle.
  2. "stretchy" transformation: the trapezoid looks like a rectangular piece of rubber that has been stretched/shrunk into shape.

Most solutions here on SO fall into the first group, whereas I recently found myself in the second.

The easiest way I found to achieve effect 2. was to split the trapezoid into a rectangle and right triangles. In my case the trapezoid was regular, so a quad and two triangles solved the problem.


Hope this can help: Quoted from the paper: " At each pixel, a division is performed using the interpolated values of (s=w; t=w; r=w; q=w), yielding (s=q; t=q), which are the final texture coordinates. To disable this effect, which is not possible in OpenGL directly. "

In GLSL, (now at least) this is possible. You can add:

noperspective out vec4 v_TexCoord;

there's an explanation: https://www.geeks3d.com/20130514/opengl-interpolation-qualifiers-glsl-tutorial/