Hi, Thanks for this wonderful forum. This is my first message in these forums. It looks like that here is plenty of professional guys, who could answer my little problem. Here it comes.. :P I´m trying to make a little 2d engine with OpenGL (just testing). I saw a very nice texture streching (or is it distorting? I don´t know, I´m not English) effect and I decided to add it to my "engine". I´m trying to draw a quad with texture. The speciality is that the quad is not an ordinary rectangle. The user can grab every corner and stretch the quad. It´s hard to tell you what I mean so here is the image: (made with PhotoShop CS). However, OpenGL draws quad as two rectangles and uses intependent texture coordinates for both of triangles so the current result is not what I´m searching for. As you can see, the other triangle´s texture is streched more than other´s: As I told you, I´m using 2d projection (glOrtho). I´ve set my ortho coordinates so that the top left corner is (0,0) and the bottom right corner is (w,h). Here is my OpenGL setup code:

// setup OpenGL
    glViewport(0, 0, width, height);
    glEnable(GL_TEXTURE_2D);
    glMatrixMode(GL_PROJECTION);
    if( relative )    gluOrtho2D(0, 1.0, 1.0, 0);
    else            gluOrtho2D(0, width, height, 0);

I´m using DevIL as my image library and it sets some texture setting at the loading, so I´m gonna give you the loading code too. First my custom loading in the main function:

GLuint text = 0;
    ILuint img = 0;

    ilGenImages(1, &img);
    ilBindImage(img);



    if( !ilLoadImage( "test.png" ) )
    {
        std::fstream file;
        file.open( "err.log", std::fstream::out );

        ILenum error = ilGetError ();
        if (error != IL_NO_ERROR) {
            do {
                file << iluErrorString(error);    
            } while ((error = ilGetError ()));
        }
        return 1;
    }
    text = ilutGLBindTexImage();
    ilDeleteImages(1, &img);

And here is the DevIL loading method:

GLuint ILAPIENTRY ilutGLBindTexImage()
{
    GLuint    TexID = 0, Target = GL_TEXTURE_2D;
    ILimage *Image;

    Image = ilGetCurImage();
    if (Image == NULL)
        return 0;

    if (ilutGetBoolean(ILUT_GL_AUTODETECT_TEXTURE_TARGET)) {
        if (HasCubemapHardware && Image->CubeFlags != 0)
            Target = ILGL_TEXTURE_CUBE_MAP;
        
    }

    glGenTextures(1, &TexID);
    glBindTexture(Target, TexID);

    if (Target == GL_TEXTURE_2D) {
        glTexParameteri(Target, GL_TEXTURE_WRAP_S, GL_REPEAT);
        glTexParameteri(Target, GL_TEXTURE_WRAP_T, GL_REPEAT);
    }
    else if (Target == ILGL_TEXTURE_CUBE_MAP) {
        glTexParameteri(Target, GL_TEXTURE_WRAP_S, ILGL_CLAMP_TO_EDGE);
        glTexParameteri(Target, GL_TEXTURE_WRAP_T, ILGL_CLAMP_TO_EDGE);
        glTexParameteri(Target, ILGL_TEXTURE_WRAP_R, ILGL_CLAMP_TO_EDGE);
    }
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
    glTexParameteri(Target, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(Target, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
    glPixelStorei(GL_UNPACK_SKIP_ROWS, 0);
    glPixelStorei(GL_UNPACK_SKIP_PIXELS, 0);
    glPixelStorei(GL_UNPACK_ROW_LENGTH, 0);
    glPixelStorei(GL_UNPACK_SWAP_BYTES, IL_FALSE);

    if (!ilutGLTexImage(0)) {
        glDeleteTextures(1, &TexID);
        return 0;
    }

    return TexID;
}

And finally, here is the code the game loop, which handles the drawing:

glClear(GL_COLOR_BUFFER_BIT);


        glBindTexture(GL_TEXTURE_2D, text);
        glBegin(GL_QUADS);
            glTexCoord2f (0.0f, 0.0f); glVertex2f(10,110);
            glTexCoord2f (0.0f, 1.0f); glVertex2f(10,10);
            glTexCoord2f (1.0f, 1.0f); glVertex2f(310,10);
            glTexCoord2f (1.0f, 0.0f); glVertex2f(110,110);
        glEnd();
glfwSwapBuffers();

Ok. This was my problem. I hope you can give a solution. Sorry for my bad English.. Thanks beforehand.

I've seen this problem some time ago. Tried to do something similar.

I formalized the problem as: texture an arbitary planar quad, having 4 arbitary texture coordinates (s,t). Myself I wasn't able to find a proper solution (though I hope you will), but I found some interesting material.

Here you can read about the Q coordinate, and the case of a trapezoid.
Here you can read about projective texturing, the beginning of the article has some info about your problem.

The reason for the result is that a quad is broken into 2 triangles by the API, and without knowing the fourth coordinate texture mapping is ambiguous.
Think of moving only 1 of the 4 points defining the quad, texturing would change. But the triangle that doesn't have this point can't know about it.

Solution is adding a Q coordinate, which changes the way texturing goes. AFAIK higher Q makes texture get more "concentrated" around the point, but that's where I got stuck. I didn't find much info about it, and couldn't find/invent a formula to calculate Q knowing all 4 quad points.

A workaround is to just use projective texturing - then Q will be generated for you. The problem is only to find the correct position for the projector to get the result you want.

I'd appreciate if you tell if you find how to calculate Q. These 2 articles should get you started.

Thanks. The Q coordinate seems to be the solution. Now I have to reveal its mysteries... :) If anyone has some kind of experience with q-coordinate I´d be very happy if you could share them.

Yep.. I solved this by making a grid of quads. It gives the detail high enough for me:

And if someone is wondering the code, here it comes. Note that the code is just testing. Final code will be more optimized of course. But the code:

#define GRID_X 10#define GRID_Y 10#define GRID_Xf 10.0f#define GRID_Yf 10.0f// a = top left// b = top right// c = bottom right// d = bottom leftvoid drawQuad(const Vector& a, const Vector& b, const Vector& c, const Vector& d){    Vector vrtx,e,f;    const Vector ba = b - a;    const Vector cd = c - d;    glBegin( GL_QUADS );    for( int y = 0 ; y < GRID_Y ; y++ )    {        for( int x = 0 ; x < GRID_X ; x++ )        {            e = a + ba * (x / GRID_Xf);            f = d + cd * (x / GRID_Xf);            vrtx = e + (f - e) * (y / GRID_Yf);            glTexCoord2f(x / GRID_Xf, 1.0 - y / GRID_Yf);            glVertex2f(vrtx.x, vrtx.y);            e = a + ba * ((x+1) / GRID_Xf);            f = d + cd * ((x+1) / GRID_Xf);            vrtx = e + (f - e) * (y / GRID_Yf);            glTexCoord2f((x+1) / GRID_Xf, 1.0 - y / GRID_Yf);            glVertex2f(vrtx.x, vrtx.y);            e = a + ba * ((x+1) / GRID_Xf);            f = d + cd * ((x+1) / GRID_Xf);            vrtx = e + (f - e) * ((y+1) / GRID_Yf);            glTexCoord2f((x+1) / GRID_Xf, 1.0 - (y+1) / GRID_Yf);            glVertex2f(vrtx.x, vrtx.y);            e = a + ba * (x / GRID_Xf);            f = d + cd * (x / GRID_Xf);            vrtx = e + (f - e) * ((y+1) / GRID_Yf);            glTexCoord2f(x / GRID_Xf, 1.0 - (y+1) / GRID_Yf);            glVertex2f(vrtx.x, vrtx.y);        }    }    glEnd();}