Qt+OpenGL入门教程（四）—

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

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

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

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

VBO会在GPU上创建内存，用于存储我们的顶点数据。
VBO的缓冲类型是GL_ARRAY_BUFFER。

代码如下：

widget.cpp

#include "widget.h"GLuint VBO;  // VBOWidget::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,};// 创建VBOglGenBuffers(1, &VBO);// 绑定VBOglBindBuffer(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;  // VAOWidget::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,};// 创建VAOglGenVertexArrays(1, &VAO);// 创建VBOglGenBuffers(1, &VBO);// 绑定VAO(VAO是没有缓冲类型的)glBindVertexArray(VAO);// 绑定VBOglBindBuffer(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;  // EBOWidget::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};// 创建VAOglGenVertexArrays(1, &VAO);// 创建VBOglGenBuffers(1, &VBO);// 绑定VAO(VAO是没有缓冲类型的)glBindVertexArray(VAO);// 绑定VBOglBindBuffer(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);// 解绑VBOglBindBuffer(GL_ARRAY_BUFFER, 0);// 创建EBOglGenBuffers(1, &EBO);// 绑定EBOglBindBuffer(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);
}

总结：