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

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

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

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

VBO会在GPU上创建内存，用于存储我们的顶点数据。

VBO的缓冲类型是GL_ARRAY_BUFFER。

代码如下：

widget.cpp

C++ 复制代码

#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

C++ 复制代码

#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主要处理三角形)，顶点数据应该是这样的。

C++ 复制代码

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

C++ 复制代码

#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