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

bmseven2024-04-05 12:19

前面我们已经简单绘制了一个三角形，但这只是个小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
相关推荐
Thunter_4 小时前
[QT入门]树形视图控件
开发语言·c++·qt
kaixin_learn_qt_ing5 小时前
解析Xml文件并修改QDomDocument的值
xml·数据库·qt
科学的发展-只不过是读大自然写的代码5 小时前
Qt 日志输出的选择方案有多少
开发语言·qt
Thunter_7 小时前
QT中常用英语单词
开发语言·qt
科学的发展-只不过是读大自然写的代码7 小时前
qt播放视频
数据库·qt·音视频
激昂～逐流7 小时前
Qt使用sqlite数据库及项目实战
数据库·qt·sqlite·学生信息管理系统
溪渣渣_梁世华7 小时前
Qt 进程间通信(一)——QSharedMemory共享内存
c++·qt·进程间通信
师从名剑山7 小时前
Qt实现检测软件是否多开
qt·软件需求
-凌凌漆-8 小时前
【Qt】QItemSelectionModel 添加选中行
qt
从后端到QT10 小时前
Qt 线程 QThread类详解
开发语言·qt
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）042024年江苏省研究生数学建模科研创新实践大赛C题气象数据高精度融合技术研究论文和代码分析05【经验分享】Ubuntu22.04安装微信(linux官方版)06【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解07通达信神奇九转指标原理及选股公式，无未来函数，数字不消失082024亚太赛（中文赛）数学建模竞赛选题建议+初步分析09浏览器插件——ModHeader 的分享和学习102024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题超详细解题思路+数据预处理问题一代码分享