Qt+OpenGL入门教程(四)——VBO、VAO和EBO

本文介绍了在OpenGL开发中,如何使用VBO(顶点缓冲对象)存储大量顶点数据以减少CPU与GPU间的数据传输,以及如何通过VAO(顶点数组对象)简化顶点属性设置和提高渲染效率。同时,EBO(索引缓冲对象)在减少数据量传输和重复使用顶点数据方面的作用也被详细阐述。
摘要由CSDN通过智能技术生成

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

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

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

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

代码如下:

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
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值