Why is triangle rendering background color over image?

Question

I am displaying a bitmap
from png at 800x600 yet when rendered:

I have a Window class that inherits GameWindow and here are the overridden methods that (I believe) are relevant:

protected override void OnLoad(EventArgs e) {
    base.OnLoad(e);

    GrafxUtils.InitTexturing();
    textureId = GrafxUtils.CreateTextureFromBitmap((Bitmap)currentImage);

    OnResize(null);
    GL.ClearColor(Color.Gray);

}

protected override void OnRenderFrame(FrameEventArgs e) {
    base.OnRenderFrame(e);

    GL.Clear(ClearBufferMask.ColorBufferBit);
    GL.MatrixMode(MatrixMode.Texture);
    GL.LoadIdentity();
    GL.BindTexture(TextureTarget.Texture2D, textureId);
    GL.Begin(PrimitiveType.Quads);

    //  top-left
    GL.TexCoord2(0, 0);
    GL.Vertex2(0, 0);

    //  top-right
    GL.TexCoord2(1, 0);
    GL.Vertex2(currentImage.Width, 0);

    //  bottom-left
    GL.TexCoord2(0, 1);
    GL.Vertex2(0, currentImage.Height);

    //  bottom-right
    GL.TexCoord2(1, 1);
    GL.Vertex2(currentImage.Width, currentImage.Height);

    GL.End();

    SwapBuffers();
}

... and the CreateTextureFromBitmap method:

// utility method from GrafxUtils
public static int CreateTextureFromBitmap(Bitmap bitmap) {
    BitmapData data = bitmap.LockBits(
      new Rectangle(0, 0, bitmap.Width, bitmap.Height),
      ImageLockMode.ReadOnly,
      System.Drawing.Imaging.PixelFormat.Format32bppArgb);
    var tex = GetBoundTexture();
    GL.BindTexture(TextureTarget.Texture2D, tex);
    GL.TexImage2D(
      TextureTarget.Texture2D,
      0,
      PixelInternalFormat.Rgba,
      data.Width, data.Height,
      0,
      OpenTK.Graphics.OpenGL.PixelFormat.Bgra,
      PixelType.UnsignedByte,
      data.Scan0);
    bitmap.UnlockBits(data);
    SetParameters();
    return tex;
}

What would be causing the triangle to appear?

Answer 1

Usage of currentImage.Width/ currentImage.Height for vertex coordinates is not correct. It should have a range from -1 to 1. In your case, since you seem to be drawing from 0 to 1 (ie, quarter of the screen only), the top left should be (0,0) top right should have (1,0) and bottomleft should have (0,-1), bottomright should have (1,-1). If you instead wanted full screen quad, it should range from -1,-1 to 1,1.

As for the strange shape you are observing, you are drawing 2 triangles, but winding order not taken care of. ie, one triangle whose hypotenuse is from top left to bottom right, and another triangle whose hypotenuse is from bottom left to top right. Hence the shape. You can see for example,

http://msdn.microsoft.com/en-us/library/bb464051.aspx

And also,

Index Buffer Object and UV Coordinates don't play nice