iOS开发学习OpenGL ES系列 -- VBO&VAO

不知道在这里讲VBO&VAO是否合适，我的想法是早一点了解这一块，后面的例子中我们都运用上以加深印象与熟练度。

首先我们知道OpenGL ES部分运行在CPU上，部分运行在GPU上，所以OpenGL ES横跨在两个处理器之间，协调两个内存区域之间的数据交换。

对于渲染速度，最快的数据交换方式是没有数据交换。从一个内存区域赋值数据到另一个内存速度是相对较慢的。最致命的是，在内存复制发生的时候GPU和CPU都不能把内存另作它用。因此内存区域之间的数据交换需要尽量避免。

其次，所有的内存访问都是相对较慢的，现在的嵌入式CPU可以很容易完成大约每秒一亿次的运算，但是它只能每秒读写内存200万次。这意味着，除非CPU能够在每次从内存读取一块数据后有效地运行五个或者更多个运算，否则处理器的性能就处于次优状态，这种状态叫做"数据饥饿"。这种情况对于CPU来说更明显，在理想条件下，GPU能够每秒执行数亿次运算，但是却只能每秒访问内存2亿次。GPU几乎总是受限于内存访问的性能，并且通常需要在每块数据上执行10～30次运算才不会影响整体的图形输出。(摘自OpenGL ES应用开发实践)

上面这段话的大概意思是：GPU的性能并不在于数据处理，而是在于数据读取上。就前一篇的例子而言，如果要保持矩形一直存在于屏幕上，CPU就需要不断的发送顶点数据到GPU上，否则的话就会被设置的清除色覆盖。这就对应于激活顶点属性，然后发送数据到属性上，在进行绘制的那段代码：

static GLfloat vertices[] = {
        // 第一个三角形
     0.5f,   0.5f,  0.0, 1.0 , 0.0, 0.0,
     0.5f,  -0.5f,  0.0, 1.0 , 0.0, 0.0,
    -0.5f,  -0.5f,  0.0, 1.0 , 0.0, 0.0,
        
        // 第二个三角形
     -0.5,  -0.5f,  0.0, 1.0 , 0.0, 0.0,
     -0.5f,  0.5f,  0.0, 1.0 , 0.0, 0.0,
      0.5f,  0.5f,  0.0, 1.0 , 0.0, 0.0,
};

// 启用这个着色器程序
glUseProgram(program);
    
// 启用着色器属性和获取位置
GLuint positionAttribLocation = glGetAttribLocation(program, "position");
glEnableVertexAttribArray(positionAttribLocation);
    
GLuint colorAttribLocation = glGetAttribLocation(program, "color");
glEnableVertexAttribArray(colorAttribLocation);
    
glVertexAttribPointer(positionAttribLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (char *)vertices);
glVertexAttribPointer(colorAttribLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (char *)vertices + 3 * sizeof(GLfloat));
    
// 绘制
glDrawArrays(GL_TRIANGLES, 0, 6);

在glkView:(GLKView *)view drawInRect:(CGRect)rect方法中会一直持续这个过程，从CPU传递vertices到GPU内存，也就是每次渲染都会传递一次。虽然这里的绘制数据量比较小，但是到后面绘制复杂的图形事，可能会导致数据传递延迟，这就严重影响了绘制帧率。

VBO
VBO全称Vertex Buffer Object -- 顶点缓存对象。OpenGL ES对于数据传递效率低下问题提供的办法是提前传递数据到GPU内存缓存区，绘制的时候GPU就可以非常快速地读取自己内存区域的数据，这样就可以减少数据传递次数，避免数据传递延迟造成的绘制帧率降低问题。而VBO就可以使用顶点缓存能够大大较少了CPU到GPU 之间的数据拷贝开销，因此显著地提升了程序运行的效率。下面是创建代码：

// 使用glGenBuffers函数和一个缓冲ID生成一个VBO对象
glGenBuffers(1, &vertexID);
    
/*
使用glBindBuffer函数把新创建的缓冲绑定到GL_ARRAY_BUFFER目标上
参数： 
target ：指定绑定的目标，取值为 GL_ARRAY_BUFFER（用于顶点数据） 或 GL_ELEMENT_ARRAY_BUFFER（用于索引数据）
buffer ：顶点缓存对象句柄
*/ 
glBindBuffer(GL_ARRAY_BUFFER, vertexID);
    
/*
调用glBufferData函数，它会把之前定义的顶点数据复制到缓冲的内存中
参数：
target：与 glBindBuffer 中的参数 target 相同；
size ：指定顶点缓存区的大小，以字节为单位计数；
data ：用于初始化顶点缓存区的数据
usage：表示该缓存区域将会被如何使用，它的主要目的是用于对该缓存区域做何种程度的优化
      GL_STATIC_DRAW：表示该缓存区不会被修改
      GL_DYNAMIC_DRAW：表示该缓存区会被周期性更改
      GL_STREAM_DRAW：表示该缓存区会被频繁更改
*/ 
glBufferData(GL_ARRAY_BUFFER, 36 * sizeof(GLfloat), vertices, GL_STATIC_DRAW);

数据提前缓存到GPU内存之后，glkView:(GLKView *)view drawInRect:(CGRect)rect方法中就需要进行修改了，不能再每次绘制都向GPU发送顶点数据。因为我们的数据已经发送到GPU内存中，现在就是需要告诉GPU如果去识别那些数据以及去使用了。

VAO
VAO被称为顶点数组对象，它并不存储数据。它可以像顶点缓冲对象那样被绑定，任何随后的顶点属性调用都会储存在这个VAO中。这样的好处就是，当配置顶点属性指针时，你只需要将那些调用执行一次，之后再绘制物体的时候只需要绑定相应的VAO就行了。这使在不同顶点数据和属性配置之间切换变得非常简单，只需要绑定不同的VAO就行了。刚刚设置的所有状态都将存储在VAO中。

一个顶点数组对象会储存以下这些内容：

glEnableVertexAttribArray和glDisableVertexAttribArray的调用。

通过glVertexAttribPointer设置的顶点属性配置。

通过glVertexAttribPointer调用与顶点属性关联的顶点缓冲对象。

下面通过代码创建一个VAO：

glGenVertexArraysOES(1, &vao);
    
// 绑定vao
glBindVertexArrayOES(vao);
    
// 把顶点数组复制到缓冲中供OpenGL ES使用
glBindBuffer(GL_ARRAY_BUFFER, vertexID);

GLuint positionAttribLocation = glGetAttribLocation(program, "position");
glEnableVertexAttribArray(positionAttribLocation);
    
GLuint colorAttribLocation = glGetAttribLocation(program, "color");
glEnableVertexAttribArray(colorAttribLocation);
    
glVertexAttribPointer(positionAttribLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), NULL);
glVertexAttribPointer(colorAttribLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), NULL + 3 * sizeof(GLfloat));

glBindVertexArrayOES(0);

接下来的绘制就简单了，通过glBindVertexArrayOES启用VAO就可以完成绘制。

glClear(GL_COLOR_BUFFER_BIT);
glClearColor(1.0, 1.0, 1.0, 1.0);

// 启用这个着色器程序
glUseProgram(program);

glBindVertexArrayOES(vao);

// 绘制
glDrawArrays(GL_TRIANGLES, 0,6);

现在glkView:(GLKView *)view drawInRect:(CGRect)rect中就这么简单了。

这里有一点需要说明，我们现在是在OpenGL ES 2.0上使用VAO，这里就得使用苹果扩展的相关API，既带有'OES'的函数：

GLvoid glGenVertexArraysOES(GLsizei n, GLuint *arrays)
GLvoid glBindVertexArrayOES(GLuint array)
GLvoid glDeleteVertexArraysOES(GLsizei n, const GLuint *arrays)
GLboolean glIsVertexArrayOES(GLuint array);

如果我们使用的是ES3，那么就就是对应的这些函数，照样可以完成绘制：

GLvoid glGenVertexArrays(GLsizei n, GLuint *arrays)
GLvoid glBindVertexArray(GLuint array)
GLvoid glDeleteVertexArrays(GLsizei n, const GLuint *arrays)
GLboolean glIsVertexArray(GLuint array);

这样的话，顶点数据经过VBO和VAO的优化，就不需要每次绘制前进行数据传递和属性绑定了，大大提高了绘制速度。

最后的效果图：

附上代码：LearningOpenGL ES GitHub