Opengl - 纹理映射到三角形

Question

要将图像作为纹理应用到由两个三角形组成的矩形，我正在学习 open.gl/textures 中的教程。

我正在使用 freeglut 来创建上下文，我对原始代码所做的唯一更改就是与此相关。

我希望将整个图像显示在一个矩形上，但是我得到了一个由三角形组成的矩形的图像，右侧的图像具有图像的左侧，左侧的图像具有图片的右侧。

我检查了纹理坐标（下面的代码），根据其他教程，我得出的结论是其他配置会更有意义（在下面的代码中注释）但结果更糟（黑色三角形出现）。

// 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);

这些是对 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)));

我希望能得到一些帮助，以了解我做错了什么。我在 Linux 平台上，使用 g++ 编译，使用 SOIL 上传图像，使用 freeglut 创建上下文并使用 OpenGL 3 函数。

Answer 1

查看您在其中一个 cmets 中发布的图片后：

我认为这不是纹理坐标的问题。您可以看出图像中出现的“对角线”与四边形的对角线不匹配，就像某些纹理坐标混淆时所期望的那样。

最可能的原因是图像数据与您在glTexImage2D() 调用中指定的大小不匹配，或者行对齐有问题。

Answer 2

您的 UV 的顺序似乎不正确。尝试再次交换您的 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-right (swapped)
-0.5f, -0.5f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f // Bottom-left (swapped)