OpenGL Texture Mapping distorts image

820 views Asked by At

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: enter image description here

And here's the result: enter image description here

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.

1

There are 1 answers

0
Dortimer On BEST ANSWER

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