Perspective correct texturing of trapezoid in OpenGL ES 2.0

by

(I’m taking a bit of a punt here, because your picture does not show exactly what I would expect from texturing a trapezoid, so perhaps something else is happening in your case – but the general problem is well known)

Textures will not (by default) interpolate correctly across a trapezoid. When the shape is triangulated for drawing, one of the diagonals will be chosen as an edge, and while that edge is straight through the middle of the texture, it is not through the middle of the trapezoid (picture the shape divided along a diagonal – the two triangles are very much not equal).

You need to provide more than a 2D texture coordinate to make this work – you need to provide a 3D (or rather, projective) texture coordinate, and perform the perspective divide in the fragment shader, post-interpolation (or else use a texture lookup function which will do the same).

The following shows how to provide texture coordinates for a trapezoid using old-school GL functions (which are a little easier to read for demonstration purposes). The commented-out lines are the 2d texture coordinates, which I have replaced with projective coordinates to get the correct interpolation.

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0,640,0,480,1,1000);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

const float trap_wide = 600;
const float trap_narrow = 300;
const float mid = 320;

glBegin(GL_TRIANGLE_STRIP);
glColor3f(1,1,1);

//  glTexCoord4f(0,0,0,1);
glTexCoord4f(0,0,0,trap_wide);
glVertex3f(mid - trap_wide/2,10,-10);

//  glTexCoord4f(1,0,0,1);
glTexCoord4f(trap_narrow,0,0,trap_narrow);
glVertex3f(mid - trap_narrow/2,470,-10);

//  glTexCoord4f(0,1,0,1);
glTexCoord4f(0,trap_wide,0,trap_wide);
glVertex3f(mid + trap_wide/2,10,-10);

//  glTexCoord4f(1,1,0,1);
glTexCoord4f(trap_narrow,trap_narrow,0,trap_narrow);
glVertex3f(mid + trap_narrow/2,470,-10);

glEnd();

The third coordinate is unused here as we’re just using a 2D texture. The fourth coordinate will divide the other two after interpolation, providing the projection. Obviously if you divide it through at the vertices, you’ll see you get the original texture coordinates.

Here’s what the two renderings look like:

enter image description here

If your trapezoid is actually the result of transforming a quad, it might be easier/better to just draw that quad using GL, rather than transforming it in software and feeding 2D shapes to GL…

More Related Contents:

  1. Drawing a sphere in OpenGL ES
  2. Explicit vs Automatic attribute location binding for OpenGL shaders
  3. Drawing a border on a 2d polygon with a fragment shader
  4. Faster alternative to glReadPixels in iPhone OpenGL ES 2.0
  5. Appropriate multiplication of matrices for rotation/translation
  6. Modifying camera output using SurfaceTexture and OpenGL
  7. How can I do these image processing tasks using OpenGL ES 2.0 shaders?
  8. Is discard bad for program performance in OpenGL?
  9. How do I convert a vec4 rgba value to a float?
  10. Draw text in OpenGL ES
  11. Rendering to non-power-of-two texture on iPhone
  12. Android: GLES20: Called unimplemented OpenGL ES API
  13. When does OpenGL get finished with pointers in functions?
  14. How to draw a circle using VBO in ES2.0
  15. Animation in OpenGL ES view freezes when UIScrollView is dragged on iPhone
  16. Applying Effects on Video being Played
  17. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  18. libgdx SpriteBatch render to texture
  19. Limitation on texture size? Android Open GL ES 2.0
  20. YUV to RGB conversion by fragment shader
  21. Sprite Kit & playing sound leads to app termination
  22. Apply custom filters to camera output
  23. Is there a decent OpenGL text drawing library for the iPhone SDK?
  24. Converting from GLSurfaceView to TextureView (via GLTextureView)
  25. How can I improve the performance of my custom OpenGL ES 2.0 depth texture generation?
  26. Current state and solutions for OpenGL over Windows Remote [closed]
  27. Android: Deciding between SurfaceView and OpenGL (GLSurfaceView)
  28. Threading textures load process for android opengl game
  29. OpenGL ES 2.0 to Video on iPad/iPhone
  30. In OpenGL ES 2.0 / GLSL, where do you need precision specifiers?

Leave a Comment