Perspective-correct shader rendering

Question

I want to put a texture on a rectangle which has been transformed by a non-affine transform (more specifically a perspective transform).

I have a very complex implementation based on openscenegraph and loading my own vertex and fragment shaders. The problem starts with the fact that the shaders were written quite a long time ago and are using GLSL 120.

The OpenGL side is written in C++ and in its simplest form, loads a texture and applies it to a quad. Up to recently, everything was working fine because the quad was at most affine-transformed (rotation + translation) so the rendering of the texture on it was correct.

Now however we want to support quads of any shape, including something like this: http://ibin.co/1dbsGPpzbkOX

As you can see in the picture above, the texture on it is incorrect in the middle (shown by arrows) After hours of research I found out that this is due to OpenGL splitting quads into triangles and rendering each triangle independently. This is of course incorrect if my quad is as shown, because the 4th point influences the texture stretch. I then even found that this issue has a name: it's a "perspectively incorrect interpolation of texture coordinates", as explained here: [1]

Looking for solutions to this, I came across this article which mentions the use of the "smooth" attribute in later GLSL versions: [2] but this means updating my shaders to a newer version.

An alternative I found was to use GL_Hints, as described here: [3] but the disadvantage here is that it is only a hint, and there is no way to make sure it is used.

Now that I have shown my research, here is my question:

Updating my (complex) shaders and all the OpenGL which goes with it to abide by the new OpenGL pipeline paradigm would be too time-consuming so I tried using the GLSL "version 330 compatibility" and changing the "varying" to "smooth out" and "smooth in", as well as adding the GL_NICE hint on the C++ side, but these changes did not solve my problem. Is this normal, because the compatibility mode somehow doesn't support this correct perspective transform? Or is there something more that I need to do? Or is there a better way for me to get this functionality without needing to refactor everything?

Here is my vertex shader:

#version 330 compatibility
smooth out vec4 texel;

void main(void) {
    gl_Position = ftransform();
    texel = gl_TextureMatrix[0] * gl_MultiTexCoord0;
}

and the fragment shader is much too complex, but it starts with

#version 330 compatibility
smooth in vec4 texel;

links from above text: [1] en.wikibooks.org/wiki/GLSL_Programming/… — cd127
[2] opengl.org/wiki/… [3] stackoverflow.com/questions/10018905/… — cd127
The smooth keyword is not the issue here. It is actually the default behavior, also in GLSL 1.20. OpenGL's buil-in perspecitve projection does not help you. You seem to distort the rectangle to the trapezoid directly, without it actually beeing extended in depth - so for the builtin logic, your primitive is parallel to the viewing plane, and the perspective correction will end up doing nothing. What you need here is projective texture mapping, have a look at this question. — derhass

cd127 cd127 · Accepted Answer · 2014-10-23T09:50:29

Using derhass's hint I solved the problem in a much different way.

It is true that the "smooth" keyword was not the problem but rather the projective texture mapping.

To solve it I passed directly from my C++ code to the frag shader the perspective transform matrix and calculated the "correct" texture coordinate in there myself, without using GLSL's barycentric interpolation.

To help anyone with the same problem, here is a cut-down version of my shaders:

.vert

#version 330 compatibility

smooth out vec4 inQuadPos;      // Used for the frag shader to know where each pixel is to be drawn

void main(void) {
    gl_Position = ftransform();
    inQuadPos = gl_Vertex;
}

.frag

uniform mat3 transformMat;      // the transformation between texture coordinates and final quad coordinates (passed in from c++)
uniform sampler2DRect source;

smooth in vec4 inQuadPos;
void main(void)
{
    // Calculate correct texel coordinate using the transformation matrix
    vec3 real_texel = transformMat * vec3(inQuadPos.x/inQuadPos.w, inQuadPos.y/inQuadPos.w, 1);
    vec2 tex = vec2(real_texel.x/real_texel.z, real_texel.y/real_texel.z);
    gl_FragColor = texture2DRect(source, tex).rgba;
}

Note that the fragment shader code above has not been tested exactly like that so I cannot guarantee it will work out-of-the-box, but it should be mostly there.

Perspective-correct shader rendering

1 Answers