OpenGL-纹理映射到三角形

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.

Answer 1

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)

Answer 2

After looking at the image you posted in one of your comments:

I think this is not a problem with texture coordinates. You can tell that the "diagonal" that appears in the image does not match the diagonal of the quad, like you would expect if some texture coordinates were mixed up.

The most likely cause is that the image data does not match the size you specified in your glTexImage2D() call, or there is a problem with row alignment.