OpenGL系列（三）VBO、VAO

    在OpenGL系列（一）三角形 用到了VBO和VAO，本文对两者进行介绍。

    通过OpenGL的API绘制图形时，需要先定义顶点，如示例中三角形的顶点数组定义如下。

float vertices[] = {
            // 位置信息         // 颜色信息
            0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f,  // 右下
            -0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,  // 左下
            0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f   // 顶部
    };

上面定义的数组存放在内存中，可以被CPU访问，但是GPU访问不了，绘制图形是由GPU执行的，为了能让GPU访问到顶点数据，需要把它们从内存传递到显存中。通过glVertexAtrribPointer可以将数据从传递给GPU，示例如下。

static void
draw(void)
{
   static const GLfloat verts[3][2] = {
      { -1, -1 },
      {  1, -1 },
      {  0,  1 }
   };
   static const GLfloat colors[3][3] = {
      { 1, 0, 0 },
      { 0, 1, 0 },
      { 0, 0, 1 }
   };
   GLfloat mat[16], rot[16], scale[16];

   /* Set modelview/projection matrix */
   make_z_rot_matrix(view_rotx, rot);
   make_scale_matrix(0.5, 0.5, 0.5, scale);
   mul_matrix(mat, rot, scale);
   glUniformMatrix4fv(u_matrix, 1, GL_FALSE, mat);

   glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

   {
      glVertexAttribPointer(attr_pos, 2, GL_FLOAT, GL_FALSE, 0, verts);
      glVertexAttribPointer(attr_color, 3, GL_FLOAT, GL_FALSE, 0, colors);
      glEnableVertexAttribArray(attr_pos);
      glEnableVertexAttribArray(attr_color);

      glDrawArrays(GL_TRIANGLES, 0, 3);

      glDisableVertexAttribArray(attr_pos);
      glDisableVertexAttribArray(attr_color);
   }
}

    以上也是绘制三角形的过程，在绘制之前定义顶点数组verts和颜色数组colors，在调用glDrawArrays绘制之前先通过glVertexAttribPointer将数组传给GPU，最后一个参数是数组的地址。

    这里涉及一个问题，将数据传递到GPU是一个耗时的过程，每次绘制之前都执行数据的传递操作势必会影响整体性能，为了解决这个问题，引入了VBO，VBO是Vertex Buffer Object（顶点缓冲对象）的缩写，用于表示显存中的一个缓冲，该缓冲的数据可以被GPU访问，只要把数据存放到该缓冲中，就不必每次绘制前都执行传递数据的操作了。

    创建VBO并传递数据的流程如下。

    float vertices[] = {
            // 位置信息         // 颜色信息
            0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f,  // 右下
            -0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,  // 左下
            0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f   // 顶部
    };

    glGenBuffers(1, &VBO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

VBO的使用流程解析如下：

1. glGenBuffers创建VBO对象，第一个参数表示创建VBO的数量，第二个参数返回创建成功后的VBO的的句柄
2. glBindBuffer绑定缓冲对象，把VBO绑定到目标GL_ARRAY_BUFFER后，后续对目标GL_ARRAY_BUFFER的操作相当于对被绑定的VBO进行操作
3. glBufferData把数据载入VBO中，在这一步VBO才开始分配空间来保存顶点数据

    通过创建VBO来保存数据后，数据的传递问题解决了，接下来是GPU如何解析这些数据的问题，GPU需要知道一个顶点包含多少个属性，每个属性的数据类型，大小，偏移等信息，这些需要依赖VAO来解决。

    VAO是Vertex Array Object(顶点数组对象)的缩写，用法流程如下。

glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);

glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0); 

glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);

VAO的使用流程解析如下：

1. glGenVertexArrays：创建VAO对象，同样第一个参数表示数量，第二个参数是VAO的句柄
2. glBindVertexArray：绑定VAO对象，经过绑定后，后续的操作都是针对该VAO。
3. glEnableVertexAttribArray，启用属性，参数表示编号，0表示第0个属性。
4. glVertexAttribPointer，把顶点属性设置到VAO中，调用该方法前需要先绑定VBO和VAO，不同的属性可以对应不同的VBO。第一个参数表示属性的编号，如0表示第0号属性，第二个参数表示大小，第三个参数表示类型，第四个参数表示归一化，第五个参数表示步长，也就是两个顶点的起始地址的间隔。第六个表示偏移。

可以把多个属性存放到一个VBO，也可以存放到不同的VBO中。如果存放到同一个VBO中，那么每个顶点的偏移就不一样；如果存放到不同的VBO中，偏移可以都为0。在调用glEnableVertexAttribArray和glVertexAttribPointer之前先调用glBindBuffer可以绑定不同的VBO。

    VBO和VAO都准备好了以后，在准备好着色器的条件下，可以开始绘制，绘制只需绑定VAO即可，代码如下。

void Triangle::onDraw() {
    if(mShader == nullptr || !mShader->useProgram()) return;

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glClearColor(0.5f,0.6f,0.7f,1.0f);
    glBindVertexArray(VAO);
    glDrawArrays(GL_TRIANGLES, 0, 3);
    glFlush();

    mShader->unuseProgram();
}

从上面的绘制流程可以看除，调用glDrawArrays绘制之前，只需调用glBindVertexArray绑定VAO即可，无须再传递顶点数据，从而提供了效率。