# OpenGL Texture Mapping distorts image

So, I'm just trying to draw a texture to two triangles that are the same size as the viewport, but it breaks up the image and distorts it. I have tried resizing the image file and everything, but nothing seems to work. Below is the code that maps the texture and draws the triangles.

 public void Render()
{
Texture texture = _textureManager.Get("splash");
Gl.glEnable(Gl.GL_TEXTURE_2D);
Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.Id);

double height = 720;
double width = 1280;

double x = 0;
double y = 0;
double z = 0;

float topUV = 0;
float bottomUV = 1;
float leftUV = 0;
float rightUV = 1;

Gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
Gl.glClear(Gl.GL_COLOR_BUFFER_BIT);
Gl.glBegin(Gl.GL_TRIANGLES);
{
Gl.glTexCoord2d(leftUV, topUV);
Gl.glVertex3d(x - width, y + height, z);
Gl.glTexCoord2d(rightUV, topUV);
Gl.glVertex3d(x + width, y + height, z);
Gl.glTexCoord2d(leftUV, bottomUV);
Gl.glVertex3d(x - width, y - height, z);

Gl.glTexCoord2d(rightUV, topUV);
Gl.glVertex3d(x + width, y + height, z);
Gl.glTexCoord2d(rightUV, bottomUV);
Gl.glVertex3d(x + width, y - height, z);
Gl.glTexCoord2d(leftUV, bottomUV);
Gl.glVertex3d(x - width, y - height, z);
}
Gl.glEnd();

}


Here is the original image:

And here's the result:

The image is 1920 x 1080, and the viewport is 1280 x 720, but I'm not too sure that matters because I have tried resizing the image and nothing seems to work.

edit: this is a cross-post from stack overflow (I asked it here as well because nobody seemed to have an answer): https://stackoverflow.com/questions/26723470/opengl-texture-mapping-distorts-image

For starters, try replacing "x-width" with "x" and "y-height" with "y". Also, in order to debug it better, try and render only one triangle at a time.

• I tried rendering one triangle at a time, it breaks up the image regardless. And I've tried putting literals in the parameters for all of the coordinates, and it still has this issue. Nov 4 '14 at 15:52
• What do you mean it breaks up the image regardless? Do you see the same result? if yes, then the problem is not in the above code.. Nov 4 '14 at 16:01
• Yeah, that was what I meant. But here's the thing: I changed the image to be 1024x1024 and it worked out fine, the image looks skewed (as would be expected with altering the aspect ratio and resolution like that), but otherwise it doesn't break it up the way it does currently. Nov 4 '14 at 16:24
• If you render a single triangle, how can you see the whole image? You should see a triangle on screen, and the rest should be black or something. If you see more, then the problem is not in the code that you've posted here. Forget the working scenario - that's definitely by accident. Nov 4 '14 at 16:28
• Sorry, I must have explained that poorly, but when I render a single triangle, it only shows a chunk of the image (as would be expected), with the rest of the screen being black. If I draw a single triangle in the part that is 'messed up' the portion of the image is still messed up. Nov 4 '14 at 16:29

I've found that you get better results if you use images where the height/width are powers of 2. ie. 16, 32, 1024 etc. Maybe take a look at the Texture class documentation and see if it specifies anything about that. It may be doing it's best to buffer the data but it gets garbled because of the dimensions. Also, somewhat less importantly, glBegin and glEnd are deprecated functions. If you are just getting started with textures I'd suggest getting familiar with using shaders / array buffers etc.

• I'm guessing it had to do with the image dimensions. I posted an answer with the code, but I ended up just cutting the image in half and drawing two separate textures (with two triangles a piece). I don't have the rep for it, but I'd upvote your answer if I could. Nov 4 '14 at 23:55

Alright, so I ended up cutting the image in half down the center and just loading two images, and then I used four triangles. This may not be the most elegant solution, but it works just fine. I'm guessing it had to do with the dimensions of the image. (I also changed the parameters for the texture coordinates and all the vertices so that it is more straight forward in the context of Stack Overflow).

public void Render()
{
//Draw Left Half
Texture texture = _textureManager.Get("splash1");
Gl.glEnable(Gl.GL_TEXTURE_2D);
Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.Id);

Gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
Gl.glClear(Gl.GL_COLOR_BUFFER_BIT);
Gl.glBegin(Gl.GL_TRIANGLES);
{
Gl.glTexCoord2d(0, 0);//top left
Gl.glVertex2f(-1280 , 720);

Gl.glTexCoord2d(1, 0);//middle top
Gl.glVertex2f(0, 720);

Gl.glTexCoord2d(0, 1);//bottom left
Gl.glVertex2f(-1280, -720);

Gl.glTexCoord2d(0, 1);//bottom left
Gl.glVertex2f(-1280, -720);

Gl.glTexCoord2d(1, 0);//middle right top
Gl.glVertex2f(0, 720);

Gl.glTexCoord2d(1, 1);//bottom middle
Gl.glVertex2f(0, -720);
}
Gl.glEnd();

//Draw Right Half
texture = _textureManager.Get("splash2");
Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.Id);

Gl.glBegin(Gl.GL_TRIANGLES);
{
Gl.glTexCoord2d(0, 0);//middle top
Gl.glVertex2f(0, 720);

Gl.glTexCoord2d(1, 0);//top right
Gl.glVertex2f(1280, 720);

Gl.glTexCoord2d(0, 1);//bottom middle
Gl.glVertex2f(0, -720);

Gl.glTexCoord2d(1, 0);//top right
Gl.glVertex2f(1280, 720);

Gl.glTexCoord2d(0, 1);//bottom middle
Gl.glVertex2f(0, -720);

Gl.glTexCoord2d(1, 1);//bottom right
Gl.glVertex2f(1280, -720);
}
Gl.glEnd();
}