Search code examples
c#opengltao-framework

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


Solution

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