Qt+OpenGL入门教程（四）——VBO、VAO和EBO

大家好，欢迎来到IT知识分享网。

前面我们已经简单绘制了一个三角形，但这只是个小demo是远远不够的，当顶点数据很多时，解析很麻烦时我们应该如何处理呢？接下来我们来介绍一下在OpenGL开发中帮助我们提升渲染性能的几种数据对象。

注意：所有代码都是基于上一篇修改，看代码时候，一定多看看看我写的注释！

VBO(Vertex Buffer Object)顶点缓冲对象

代码如下：

widget.cpp

#include "widget.h" GLuint VBO; // VBO Widget::Widget(QWidget *parent) : QOpenGLWidget(parent) { } Widget::~Widget() { } void Widget::initializeGL() { // 初始化OpenGL函数，将Qt里面的函数指针指向显卡的函数 initializeOpenGLFunctions(); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT); shaderProgram.create(); shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/gl.vert"); shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/gl.frag"); shaderProgram.link(); GLfloat vertices[] = { 0.0f, 0.5f, 0.0f, 0.5f, -0.5f, 0.0f, -0.5f, -0.5f, 0.0f, }; // 创建VBO glGenBuffers(1, &VBO); // 绑定VBO glBindBuffer(GL_ARRAY_BUFFER, VBO); // 为当前绑定到target的缓冲区对象创建一个新的数据存储 glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 解绑 glBindBuffer(GL_ARRAY_BUFFER, 0); } void Widget::resizeGL(int w, int h) { glViewport(0, 0, w, h); } void Widget::paintGL() { shaderProgram.bind(); // 启用顶点属性(允许顶点着色器读取GPU数据) glEnableVertexAttribArray(0); // 绑定顶点缓冲对象 glBindBuffer(GL_ARRAY_BUFFER, VBO); // 设置解析规则，GPU能够取到正确的数据供着色器使用 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (void*)0); glDrawArrays(GL_TRIANGLES, 0, 3); } 

总结：

将顶点数据存储在VBO中可以减少CPU与GPU之间的数据传输次数，提高渲染效率！

VAO(Vertex Array Object)顶点数组对象

VAO用于存储多个顶点属性的状态设置。它包含了一系列函数调用的状态，这些函数调用设置了顶点属性指针和绑定了顶点缓冲区对象(VBO)，以便在绘制时使用。

代码如下：

widget.cpp

#include "widget.h" GLuint VBO; // VBO GLuint VAO; // VAO Widget::Widget(QWidget *parent) : QOpenGLWidget(parent) { } Widget::~Widget() { } void Widget::initializeGL() { // 初始化OpenGL函数，将Qt里面的函数指针指向显卡的函数 initializeOpenGLFunctions(); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT); shaderProgram.create(); shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/gl.vert"); shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/gl.frag"); shaderProgram.link(); GLfloat vertices[] = { 0.0f, 0.5f, 0.0f, 0.5f, -0.5f, 0.0f, -0.5f, -0.5f, 0.0f, }; // 创建VAO glGenVertexArrays(1, &VAO); // 创建VBO glGenBuffers(1, &VBO); // 绑定VAO(VAO是没有缓冲类型的) glBindVertexArray(VAO); // 绑定VBO glBindBuffer(GL_ARRAY_BUFFER, VBO); // 为当前绑定到target的缓冲区对象创建一个新的数据存储 glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 设置顶点属性指针 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (void*)0); // 启用顶点属性(允许顶点着色器读取GPU数据) glEnableVertexAttribArray(0); // 解绑 glBindBuffer(GL_ARRAY_BUFFER, 0); glBindVertexArray(0); } void Widget::resizeGL(int w, int h) { glViewport(0, 0, w, h); } void Widget::paintGL() { shaderProgram.bind(); glBindVertexArray(VAO); glDrawArrays(GL_TRIANGLES, 0, 3); } 

总结：

看完这个代码你会发现，paintGL函数里面缺少了顶点数据的解析，只需要绑定VAO即可。

以下是VAO的作用：

• 简化顶点属性设置(将顶点属性设置封装在一个对象中，可以更容易地管理和使用顶点属性)
• 提高渲染效率(通过预定义顶点属性设置状态，可以避免在每次绘制调用时重复设置相同的顶点属性)
• 提高可读性和维护性(将顶点属性设置组织成一个单独的对象，使代码更具有可读性和维护性)。

VAO和VBO的关系

• VBO是纯数据的缓冲区
• VAO是一个数组，保存每一类顶点属性的解析结果，OpenGL中貌似最多支持16种顶点属性，这里的顶点属性就是glVertexAttribPointer方法的第一个参数指定的，通常0表示顶点坐标，1表示顶点颜色
• 使用VAO的好处是，你只需要针对VBO做一次解析，将结果存储到VAO中，每一帧渲染使用VAO的指针来访问缓冲区数据，而不需要每一帧都做解析

EBO/IBO(Element/Index Buffer Object)索引缓冲对象

既然有了VBO和VAO，那EBO还有什么用途呢？接下来我们一起研究一下！

EBO主要用来存储顶点的索引信息，那为什么需要存储索引呢？

举个栗子：

假如我们要绘制两个三角形来组成一个矩形(OpenGL主要处理三角形)，顶点数据应该是这样的。

GLfloat vertices[] = { 0.5f, 0.5f, 0.0f, // 右上 0.5f, -0.5f, 0.0f, // 右下 -0.5f, -0.5f, 0.0f, // 左下 -0.5f, -0.5f, 0.0f, // 左下 -0.5f, 0.5f, 0.0f, // 左上 0.5f, 0.5f, 0.0f, // 右上 }; 

细心的你可能会发现有两个点的坐标是重复的，那么这样是不就相当于存储了无用数据嘛？是不是降低了传输效率呢？所以就用到了EBO。

代码如下：

widget.cpp

#include "widget.h" GLuint VBO; // VBO GLuint VAO; // VAO GLuint EBO; // EBO Widget::Widget(QWidget *parent) : QOpenGLWidget(parent) { } Widget::~Widget() { } void Widget::initializeGL() { // 初始化OpenGL函数，将Qt里面的函数指针指向显卡的函数 initializeOpenGLFunctions(); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT); shaderProgram.create(); shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/gl.vert"); shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/gl.frag"); shaderProgram.link(); // 去重后的顶点数据 GLfloat vertices[] = { 0.5f, 0.5f, 0.0f, 0.5f, -0.5f, 0.0f, -0.5f, -0.5f, 0.0f, -0.5f, 0.5f, 0.0f, }; // 顶点下标索引 GLuint indices[] = { 0, 1, 2, 0, 2, 3 }; // 创建VAO glGenVertexArrays(1, &VAO); // 创建VBO glGenBuffers(1, &VBO); // 绑定VAO(VAO是没有缓冲类型的) glBindVertexArray(VAO); // 绑定VBO glBindBuffer(GL_ARRAY_BUFFER, VBO); // 为当前绑定到target的缓冲区对象创建一个新的数据存储 glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 设置顶点属性指针 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (void*)0); // 启用顶点属性(允许顶点着色器读取GPU数据) glEnableVertexAttribArray(0); // 解绑VBO glBindBuffer(GL_ARRAY_BUFFER, 0); // 创建EBO glGenBuffers(1, &EBO); // 绑定EBO glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); // 解绑VAO(在EBO后解绑，paintGL中就不用绑定EBO了) glBindVertexArray(0); } void Widget::resizeGL(int w, int h) { glViewport(0, 0, w, h); } void Widget::paintGL() { shaderProgram.bind(); glBindVertexArray(VAO); glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, NULL); } 

总结：

• 索引数组的类型必须用GLuint，不要误用GLfloat，否则将无法绘制成功
• 使用EBO可以减少需要传输到GPU的数据量。相比直接传输顶点数据，使用索引数组可以更有效地管理和重用顶点数据
• 绘制函数发生变化，不再是glDrawArrays而是glDrawElements