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