Sign in to follow this  

OpenGL Texture warping/distorting in 2d game?

Recommended Posts

mazzim0    122
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);
    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);

    if( !ilLoadImage( "test.png" ) )
        std::fstream file; "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 (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);
    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);

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

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

        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);
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
Seroja    280
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
mazzim0    122
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
deathkrush    350
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
mazzim0    122
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);


Share this post

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

  • Similar Content

    • By povilaslt2
      Hello. I'm Programmer who is in search of 2D game project who preferably uses OpenGL and C++. You can see my projects in GitHub. Project genre doesn't matter (except MMO's :D).
    • By ZeldaFan555
      Hello, My name is Matt. I am a programmer. I mostly use Java, but can use C++ and various other languages. I'm looking for someone to partner up with for random projects, preferably using OpenGL, though I'd be open to just about anything. If you're interested you can contact me on Skype or on here, thank you!
      Skype: Mangodoor408
    • By tyhender
      Hello, my name is Mark. I'm hobby programmer. 
      So recently,I thought that it's good idea to find people to create a full 3D engine. I'm looking for people experienced in scripting 3D shaders and implementing physics into engine(game)(we are going to use the React physics engine). 
      And,ye,no money =D I'm just looking for hobbyists that will be proud of their work. If engine(or game) will have financial succes,well,then maybe =D
      Sorry for late replies.
      I mostly give more information when people PM me,but this post is REALLY short,even for me =D
      So here's few more points:
      Engine will use openGL and SDL for graphics. It will use React3D physics library for physics simulation. Engine(most probably,atleast for the first part) won't have graphical fron-end,it will be a framework . I think final engine should be enough to set up an FPS in a couple of minutes. A bit about my self:
      I've been programming for 7 years total. I learned very slowly it as "secondary interesting thing" for like 3 years, but then began to script more seriously.  My primary language is C++,which we are going to use for the engine. Yes,I did 3D graphics with physics simulation before. No, my portfolio isn't very impressive. I'm working on that No,I wasn't employed officially. If anybody need to know more PM me. 
    • By Zaphyk
      I am developing my engine using the OpenGL 3.3 compatibility profile. It runs as expected on my NVIDIA card and on my Intel Card however when I tried it on an AMD setup it ran 3 times worse than on the other setups. Could this be a AMD driver thing or is this probably a problem with my OGL code? Could a different code standard create such bad performance?
    • By Kjell Andersson
      I'm trying to get some legacy OpenGL code to run with a shader pipeline,
      The legacy code uses glVertexPointer(), glColorPointer(), glNormalPointer() and glTexCoordPointer() to supply the vertex information.
      I know that it should be using setVertexAttribPointer() etc to clearly define the layout but that is not an option right now since the legacy code can't be modified to that extent.
      I've got a version 330 vertex shader to somewhat work:
      #version 330 uniform mat4 osg_ModelViewProjectionMatrix; uniform mat4 osg_ModelViewMatrix; layout(location = 0) in vec4 Vertex; layout(location = 2) in vec4 Normal; // Velocity layout(location = 3) in vec3 TexCoord; // TODO: is this the right layout location? out VertexData { vec4 color; vec3 velocity; float size; } VertexOut; void main(void) { vec4 p0 = Vertex; vec4 p1 = Vertex + vec4(Normal.x, Normal.y, Normal.z, 0.0f); vec3 velocity = (osg_ModelViewProjectionMatrix * p1 - osg_ModelViewProjectionMatrix * p0).xyz; VertexOut.velocity = velocity; VertexOut.size = TexCoord.y; gl_Position = osg_ModelViewMatrix * Vertex; } What works is the Vertex and Normal information that the legacy C++ OpenGL code seem to provide in layout location 0 and 2. This is fine.
      What I'm not getting to work is the TexCoord information that is supplied by a glTexCoordPointer() call in C++.
      What layout location is the old standard pipeline using for glTexCoordPointer()? Or is this undefined?
      Side note: I'm trying to get an OpenSceneGraph 3.4.0 particle system to use custom vertex, geometry and fragment shaders for rendering the particles.
  • Popular Now