0
\$\begingroup\$

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.

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

\$\endgroup\$
1

3 Answers 3

Reset to default
0
\$\begingroup\$

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.

\$\endgroup\$
9
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Nov 4, 2014 at 15:52
  • \$\begingroup\$ 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.. \$\endgroup\$ Commented Nov 4, 2014 at 16:01
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Nov 4, 2014 at 16:24
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Nov 4, 2014 at 16:28
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Nov 4, 2014 at 16:29
0
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Nov 4, 2014 at 23:55
0
\$\begingroup\$

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

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.