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

## Create an account

Register a new account

• ## Partner Spotlight

• ### Forum Statistics

• Total Topics
627665
• Total Posts
2978531
• ### Similar Content

• Both functions are available since 3.0, and I'm currently using glMapBuffer(), which works fine.
But, I was wondering if anyone has experienced advantage in using glMapBufferRange(), which allows to specify the range of the mapped buffer. Could this be only a safety measure or does it improve performance?
Note: I'm not asking about glBufferSubData()/glBufferData. Those two are irrelevant in this case.
• By xhcao
Before using void glBindImageTexture(    GLuint unit, GLuint texture, GLint level, GLboolean layered, GLint layer, GLenum access, GLenum format), does need to make sure that texture is completeness.
• By cebugdev
hi guys,
are there any books, link online or any other resources that discusses on how to build special effects such as magic, lightning, etc. in OpenGL? i mean, yeah most of them are using particles but im looking for resources specifically on how to manipulate the particles to look like an effect that can be use for games,. i did fire particle before, and I want to learn how to do the other 'magic' as well.
Like are there one book or link(cant find in google) that atleast featured how to make different particle effects in OpenGL (or DirectX)? If there is no one stop shop for it, maybe ill just look for some tips on how to make a particle engine that is flexible enough to enable me to design different effects/magic
let me know if you guys have recommendations.
• By dud3
How do we rotate the camera around x axis 360 degrees, without having the strange effect as in my video below?
Mine behaves exactly the same way spherical coordinates would, I'm using euler angles.
Tried googling, but couldn't find a proper answer, guessing I don't know what exactly to google for, googled 'rotate 360 around x axis', got no proper answers.

References:
Code: https://pastebin.com/Hcshj3FQ
The video shows the difference between blender and my rotation:

• By Defend
I've had a Google around for this but haven't yet found some solid advice. There is a lot of "it depends", but I'm not sure on what.
My question is what's a good rule of thumb to follow when it comes to creating/using VBOs & VAOs? As in, when should I use multiple or when should I not? My understanding so far is that if I need a new VBO, then I need a new VAO. So when it comes to rendering multiple objects I can either:
* make lots of VAO/VBO pairs and flip through them to render different objects, or
* make one big VBO and jump around its memory to render different objects.
I also understand that if I need to render objects with different vertex attributes, then a new VAO is necessary in this case.
If that "it depends" really is quite variable, what's best for a beginner with OpenGL, assuming that better approaches can be learnt later with better understanding?

• 10
• 10
• 12
• 22
• 13