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\$
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\$
  • \$\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\$ – Debasertron Nov 4 '14 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\$ – Babis Nov 4 '14 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\$ – Debasertron Nov 4 '14 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\$ – Babis Nov 4 '14 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\$ – Debasertron Nov 4 '14 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\$
  • \$\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\$ – Debasertron Nov 4 '14 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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.