# OpenGL Texture warping/distorting in 2d game?

This topic is 3975 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## 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);
GLuint text = 0;
ILuint img = 0;

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

{
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);
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);
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 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.

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 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 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 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 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();}

##### 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.

1. 1
2. 2
3. 3
4. 4
5. 5
Rutin
18

• 11
• 12
• 9
• 12
• 37
• ### Forum Statistics

• Total Topics
631420
• Total Posts
2999990
×