Opengl - texture mapping to triangles

Question

To apply an image, as a texture, to a rectangle formed by two triangles, I am following a tutorial in open.gl/textures.

I am using freeglut for context creation and the only alterations I made to the original code were in respect to that.

I was expecting to obtain my whole image displayed on a rectangle, but instead I got an image with a rectangle formed by to triangles, with the one in the right having the left side of the image and the one in the left having the right side of the image.

I've checked the texture coordinates (code below) and according to other tutorials I've come to the conclusion that other disposition would make more sense (commented in the code below) but the results are even worse (a black triangle appears).

// Create a Vertex Buffer Object and copy the vertex data to it
    GLuint vbo;
    glGenBuffers(1, &vbo);

    GLfloat vertices[] = {
    // Position Color Texcoords
      /* 
        -0.5f, 0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, // Top-left
        0.5f, 0.5f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, // Top-right
    -0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f,   // Bottom-left
    0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f  // Bottom-righ
      */
        -0.5f, 0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, // Top-left
         0.5f, 0.5f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, // Top-right
         0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, // Bottom-right
        -0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f // Bottom-left
    };

    glBindBuffer(GL_ARRAY_BUFFER, vbo);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    // Create an element array
    GLuint ebo;
    glGenBuffers(1, &ebo);

    GLuint elements[] = {
      0, 1, 2,
      2, 3, 0
     };

    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ebo);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(elements), elements, GL_STATIC_DRAW);

These are the calls to glVertexAttribPointer():

GLint posAttrib = glGetAttribLocation(shaderProgram, "position");
glEnableVertexAttribArray(posAttrib);
glVertexAttribPointer(posAttrib, 2, GL_FLOAT, GL_FALSE, 7 * sizeof(GLfloat), 0);

GLint colAttrib = glGetAttribLocation(shaderProgram, "color");
glEnableVertexAttribArray(colAttrib);
glVertexAttribPointer(colAttrib, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(GLfloat), (void*)(2 * sizeof(GLfloat)));

GLint texAttrib = glGetAttribLocation(shaderProgram, "texcoord");
glEnableVertexAttribArray(texAttrib);
glVertexAttribPointer(texAttrib, 2, GL_FLOAT, GL_FALSE, 7 * sizeof(GLfloat), (void*)(5 * sizeof(GLfloat)));

I would appreciate some help in order to understand what I am doing wrong. I am on a Linux platform, using g++ to compile, SOIL to upload images, freeglut for context creation and using OpenGL 3 functions.

Can we see you glVertexAttribPointer() calls? Or glVertexPointer(), glColorPointer(), glTexCoordPointer(), if you're using the fixed pipeline? I'm not sure how your vertex data is arranged. Are you using only 2 coordinates for your positions? And the 3rd to 5th component are the colors? — Reto Koradi
I updated the post with the calls to glVertexAttribPointer(). You are right I am using 2 coordinates for the positions and from the 3rd to 5th components are the color specs. — Sapiens
Those look good. After seeing the image you linked below, I'm starting to think that the problem is with the texture, not the texture coordinates. The way it looks to me, the "diagonal" that appears is not the diagonal of the quad, right? Could be some kind of problem with row padding, or the size you specify for glTexImage2D() not matching the actual size of the image. Do the colors look the same as in the original image? For a moment I thought it might be an RGB vs. RGBA issue, but that would mess up your image badly. — Reto Koradi
@RetoKoradi Thank you a lot for your insights, I would never thought the image was the problem. After trying the code with other images the result was ok with the code I posted. — Sapiens

Ryp Ryp · Accepted Answer · 2014-05-20T12:33:53

Your UV's appears to be in incorrect order. Try to swap again your Texcoords, but keeping the vertex coordinates in the same order and it should work.

It should give something like this example (not tested):

-0.5f, 0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, // Top-left
0.5f, 0.5f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, // Top-right
0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f, // Bottom-right (swapped)
-0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f // Bottom-left (swapped)

Opengl - texture mapping to triangles

2 Answers