LearnOpenGL 坐标系统(2)

解决 : LearnOpenGL 坐标系统(1) 最后留的一个问题：就是前后两面纹理正常，其他四面不正常，怎么修改

这里要思考这里面的多个内容的关系, Shader, 顶点数据(顶点坐标, 纹理坐标) , gl程序 .

---

---

---

纹理坐标

因为前面一直用的是索引的方式 . 其实大体思路是没有任何问题的.
但是需要处理对应的纹理坐标和顶点坐标的关系的时候, 用索引来做, 是有问题的.为什么呢?

//纹理坐标, 纹理坐标用的三角形坐标一致
glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (GLvoid*)0);
glEnableVertexAttribArray(2);

注意 : 回顾前面关于纹理的内容, 纹理坐标系跟顶点坐标系不一样. 纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1).

---

---

当前问题

问题一 : 如果跟顶点数据一致, 那么-0.5 小于 0 , 所以超出了纹理坐标范围之外. 那么就需要修改Shader程序.
问题二 : 利用索引实现纹理坐标的话, 那有几个面的纹理坐标只有2个点, 不足以构成4个点. 如下图.

image.png

---

---

这里还需要注意回顾的是两种Draw方式的区别

glDrawArrays : 传输或指定的数据是最终的真实数据,在绘制时效能更好 
glDrawElements : 指定的是真实数据的调用索引,在内存/显存占用上更节省 

虽然使用索引的方式在性能上更优, 但是无法满足我们需要的效果. 所以还是只能用glDrawArrays.

---

---

---

修改顶点数据, Shader不变.

顶点数据

GLfloat vertices[] = {
   -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
    0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
   -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
   -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,

   -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
   -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
   -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,

   -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
   -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
   -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
   -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
   -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
   -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

    0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

   -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
    0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
    0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
   -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
   -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,

   -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
   -0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
   -0.5f,  0.5f, -0.5f,  0.0f, 1.0f
};

数据处理

GLuint VBO , VAO ;
unsigned int squareIndicesCount = 0;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glBindVertexArray(VAO);

glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)(0 * sizeof(GLfloat)));
glEnableVertexAttribArray(0);


//纹理坐标, 纹理坐标用的三角形坐标一致
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
glEnableVertexAttribArray(2);

//解绑VAO
glBindVertexArray(0);
squareIndicesCount = sizeof(vertices)/(sizeof(vertices[0]) * 5);

修改Draw方法

glDrawArrays(GL_TRIANGLES, 0, squareIndicesCount);

最后效果:

最后效果