Sign in to follow this  
mazzim0

OpenGL Texture warping/distorting in 2d game?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
If you tessellate the quad 10x10 or more, it should stretch more realistically. I don't know what's simpler though, procedurally tessellating the quad or the Q-coordinate approach.

Share this post


Link to post
Share on other sites
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 left
void 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();

}

Share this post


Link to post
Share on other sites
If (like me) you're too lazy to figure out the q-coord method, I've found that splitting the quad into four tris (ie. put a new vertex in the center of the quad, and join the edges up to it) gives good results.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this