Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

The question seems easy, but you simply change vertex positions to match the corners of a trapezoid but it simply fails. I've tried scaling top and bottom edges like this :

enter image description here

but when I apply my texture it doesn't behave as I expected rendering this texture

enter image description here

into this image

enter image description here


so far I've managed to produce a good looking image by changing w component of vertex coordinates instead of the x component, but I'm wondering if there is any better way to solve it?


here are my vertex and texture coordinates when I initialize the class.

float w = mTexture->getPixelsWide();
float h = mTexture->getPixelsHigh();        
mVertices[ 0+0] =-w; mVertices[ 0+1] = 0; mVertices[ 0+2] = 0; mVertices[ 0+3] = 1;
mVertices[ 4+0] = w; mVertices[ 4+1] = 0; mVertices[ 4+2] = 0; mVertices[ 4+3] = 1;
mVertices[ 8+0] =-w; mVertices[ 8+1] = h; mVertices[ 8+2] = 0; mVertices[ 8+3] = 1;
mVertices[12+0] = w; mVertices[12+1] = h; mVertices[12+2] = 0; mVertices[12+3] = 1;
mCoordinates[0] = 0; mCoordinates[1] = 0;
mCoordinates[2] = 1; mCoordinates[3] = 0;
mCoordinates[4] = 0; mCoordinates[5] = 1;
mCoordinates[6] = 1; mCoordinates[7] = 1;

and later to scale it I'm currently using:

float ts = (mSpreadTime - mDropTime) / ((mSpreadTime - mTime) + mTopSpreadRatio * (mTime - mDropTime));
float bs = (mSpreadTime - mDropTime) / ((mSpreadTime - mTime) + mBottomSpreadRatio * (mTime - mDropTime));
mVertices[3] = ts;
mVertices[7] = ts;
mVertices[11] = bs;
mVertices[15] = bs;
mVertices[1] = 0 * ts;
mVertices[5] = 0 * ts;
mVertices[9] = h * bs;
mVertices[13] = h * bs;     

note: that method above solved my issue, I'm looking for a way to fix it without messing with w component.

share|improve this question
How do you draw the trapezoid? I mean, how do you set the trapezoid vertices? – Dan Dec 29 '12 at 11:01
@Dan added some code. – Ali.S Dec 29 '12 at 11:18
I think you are doing it the right way, messing with w looks like the only solution. – Dan Dec 29 '12 at 11:37
up vote 4 down vote accepted

I think this is a common issue on trapezoids. Here there is a good explanation of it, and the solution. Basically, OpenGL will divide your trapezoid in triangles, as you showed in your first figure, and these two triangles are not equal, thats why the texture mapping looks distorted. Luckily OpenGL is not only 2D but also 3D, hence you can workout a solution using the w coordinate.

Using only (x,y) Using (x,y,z,w)

           Using only 2D                                  Using 3D coordinates
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.