How to draw a trapezoid in OpenGL?

Question

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 :

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

into this image

Edit:

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?

Edit2:

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.

Answer 1

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 2D                                  Using 3D coordinates