《Qt-OpenGL系列编程》课程学习记录（2）：EBO、索引数组、使用QOpenGLShaderProgram

友善啊，朋友

已于 2022-05-19 13:25:56 修改

阅读量915

点赞数

分类专栏： # 《Qt-OpenGL系列编程》课程学习记录文章标签： qt OpenGL

于 2022-05-18 22:44:35 首次发布

本文链接：https://blog.csdn.net/kenfan1647/article/details/124839948

版权

《Qt-OpenGL系列编程》课程学习记录专栏收录该内容

12 篇文章 22 订阅

订阅专栏

绘制一个矩形

使用上一节的代码，改一下顶点数据，使用六个点即两个三角形绘制一个矩形：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QOpenGLWidget>
#include <QOpenGLFunctions_4_5_Core>

class Widget : public QOpenGLWidget,QOpenGLFunctions_4_5_Core
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

protected:
    virtual void initializeGL();
    virtual void paintGL();
};
#endif // WIDGET_H

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QOpenGLWidget(parent)
{
}

Widget::~Widget()
{
}

unsigned int VBO, VAO;
unsigned int shaderProgram;
float vertices[] = 
{
    // 第一个三角形
    0.5f, 0.5f, 0.0f, // top right
    0.5f, -0.5f, 0.0f, // bottom right
    -0.5f, 0.5f, 0.0f, // top left
    // 第二个三角形
    0.5f, -0.5f, 0.0f, // bottom right
    -0.5f, -0.5f, 0.0f, // bottom left
    -0.5f, 0.5f, 0.0f // top left
};

const char *vertexShaderSource = "#version 330 core\n"
                                 "layout (location = 0) in vec3 aPos;\n"
                                 "void main()\n"
                                 "{\n"
                                 "  gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
                                 "}\0";

const char *fragmentShaderSource = "#version 330 core\n"
                                   "out vec4 FragColor;\n"
                                   "void main()\n"
                                   "{\n"
                                   "   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
                                   "}\n\0";

void Widget::initializeGL()
{
    initializeOpenGLFunctions();

    //1、创建VBO和VAO对象，并赋予ID
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    //2、绑定VBO和VAO对象
    glBindVertexArray(VAO);//使OpenGL知道这个uint类型的对象表示一个VAO
    glBindBuffer(GL_ARRAY_BUFFER, VBO);

    //为当前绑定到GL_ARRAY_BUFFER的缓冲区对象创建一个新的数据存储，使用参数三的数据初始化数据存储
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    //告知显卡如何解析缓冲里的属性值：
    //第0个数据：有3个值；float类型；不需要标准化；步长；偏移量是0（因为是第一个数据，所以没有偏移量）
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    //开启VAO管理的第一个属性值
    glEnableVertexAttribArray(0);

    //VAO、VBO已经记录了足够的信息了，解除绑定
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);

//---------以下是使用自定义着色器----------------------------  

    //顶点着色器
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);//创建顶点着色器对象 GL_VERTEX_SHADER表示顶点着色器
    glShaderSource(vertexShader, 1, &vertexShaderSource,nullptr);//顶点着色器绑定源码
    glCompileShader(vertexShader);//编译顶点着色器
    int success;
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);//检查编译错误
    if (!success)
    {
        char infoLog[512];
        glGetShaderInfoLog(vertexShader, 512, nullptr, infoLog);
        qDebug()<< "编译顶点着色器出错，错误信息：" << infoLog ;
    }

    //片段着色器
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);//创建片段着色器 GL_FRAGMENT_SHADER表示片段着色器
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, nullptr);
    glCompileShader(fragmentShader);
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        char infoLog[512];
        glGetShaderInfoLog(fragmentShader, 512, nullptr, infoLog);
        qDebug()<< "编译片段着色器出错，错误信息：" << infoLog ;
    }

    //链接两个编译好的着色器
    shaderProgram = glCreateProgram();//创建着色器程序对象
    glAttachShader(shaderProgram, vertexShader);//添加要编译的程序
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);//链接着色器
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success); //检测链接错误
    if (!success)
    {
        char infoLog[512];
        glGetProgramInfoLog(shaderProgram, 512, nullptr, infoLog);
        qDebug()<< "链接着色器出错，错误信息：" << infoLog;
    }
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

//    glPolygonMode(GL_FRONT_AND_BACK,GL_LINE);
}

void Widget::paintGL()
{
    glClearColor(0.2f,0.3f,0.3f,1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    glUseProgram(shaderProgram);//使用此着色器，没有这行则使用默认的着色器

    glBindVertexArray(VAO);//绑定VAO以便知道该如何使用数据。
    glDrawArrays(GL_TRIANGLES,0,6);//从0开始找6个点------------注意这里的改变---
}

在 initializeGL() 中设置使用线条填充：

glPolygonMode(GL_FRONT_AND_BACK,GL_LINE);

也可以只使用三个点：

glDrawArrays(GL_TRIANGLES,0,3);

索引数组

OpenGL中的复杂图形都是三角形组成的，上面使用的六个点中：

float vertices[] =
{
    // 第一个三角形
    0.5f, 0.5f, 0.0f, // top right
    0.5f, -0.5f, 0.0f, // bottom right        重复A
    -0.5f, 0.5f, 0.0f, // top left            重复B
    // 第二个三角形
    0.5f, -0.5f, 0.0f, // bottom right        重复A
    -0.5f, -0.5f, 0.0f, // bottom left        
    -0.5f, 0.5f, 0.0f // top left             重复B
};

有两个点是重复的，这就给从内存传数据到显存增加了开销。

这时候就可以定义索引数组处理。

去掉重复的点：

float vertices[] = 
{ 
    0.5f, 0.5f, 0.0f, // top right 
    0.5f, -0.5f, 0.0f, // bottom right 
    -0.5f, -0.5f, 0.0f, // bottom left 
    -0.5f, 0.5f, 0.0f // top left 
};

定义索引数组：

unsigned int indices[] = {
    0, 1, 3, // 第一个三角形 //注意：要从0开始
    1, 2, 3 // 第二个三角形 
};

这时候的绘制：

void Widget::paintGL()
{
    glClearColor(0.2f,0.3f,0.3f,1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    glUseProgram(shaderProgram);//使用此着色器，没有这行则使用默认的着色器

    glBindVertexArray(VAO);//绑定VAO以便知道该如何使用数据。
    //    glDrawArrays(GL_TRIANGLES,0,6);//从0开始找6个点
    glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,indices);//参数：绘制三角形，取6个数据，数据类型为unsigned int，索引数组
}

效果和之前一样。

索引缓冲对象（Element Buffer Object，EBO，也叫 Index Buffer Object，IBO）

上面使用索引数组处理，这里使用索引缓冲对象也可以有同样的效果。

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QOpenGLWidget(parent)
{
}

Widget::~Widget()
{
}

unsigned int VBO, VAO, EBO;
unsigned int shaderProgram;
float 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
};
unsigned int indices[] =
{
    0, 1, 3, // first triangle
    1, 2, 3 // second triangle
};

const char *vertexShaderSource = "#version 330 core\n"
                                 "layout (location = 0) in vec3 aPos;\n"
                                 "void main()\n"
                                 "{\n"
                                 "  gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
                                 "}\0";

const char *fragmentShaderSource = "#version 330 core\n"
                                   "out vec4 FragColor;\n"
                                   "void main()\n"
                                   "{\n"
                                   "   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
                                   "}\n\0";

void Widget::initializeGL()
{
    initializeOpenGLFunctions();

    //1、创建VBO和VAO对象，并赋予ID
    glGenVertexArrays(1, &VAO);//绑定VAO
    glGenBuffers(1, &VBO);//绑定VBO

    //2、绑定VBO和VAO对象
    glBindVertexArray(VAO);//使OpenGL知道这个uint类型的对象表示一个VAO
    glBindBuffer(GL_ARRAY_BUFFER, VBO);

    //为当前绑定到GL_ARRAY_BUFFER的缓冲区对象创建一个新的数据存储，使用参数三的数据初始化数据存储
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//顶点数据存入缓冲区

    //告知显卡如何解析缓冲里的属性值：
    //第0个数据：有3个值；float类型；不需要标准化；步长；偏移量是0（因为是第一个数据，所以没有偏移量）
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), nullptr);
    //开启VAO管理的第一个属性值
    glEnableVertexAttribArray(0);


    //---------EBO--------------------------------------------

    glGenBuffers(1, &EBO);//创建一个EBO对象并赋予ID
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);//固定用法，EBO 总是和 GL_ELEMENT_ARRAY_BUFFER 缓冲区类型绑定
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);//索引数据存入缓冲区
    /*
        目标是GL_ELEMENT_ARRAY_BUFFER的时候，VAO会储存glBindBuffer的函数调用。这也意味着它也会储存解绑调用
    */

    //VAO、VBO、EBO已经记录了足够的信息了，解除绑定
    glBindBuffer(GL_ARRAY_BUFFER, 0);//解除VBO绑定
    
//    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
    //目标是GL_ELEMENT_ARRAY_BUFFER的时候，VAO会储存glBindBuffer的函数调用。这也意味着它也会储存解绑调用, 所以这行是多余的，因为如果调用了那么VAO会记录了EBO解绑
    
    glBindVertexArray(0);//解除VAO绑定

    //---------以下是使用自定义着色器----------------------------

    //顶点着色器
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);//创建顶点着色器对象 GL_VERTEX_SHADER表示顶点着色器
    glShaderSource(vertexShader, 1, &vertexShaderSource,nullptr);//顶点着色器绑定源码
    glCompileShader(vertexShader);//编译顶点着色器
    int success;
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);//检查编译错误
    if (!success)
    {
        char infoLog[512];
        glGetShaderInfoLog(vertexShader, 512, nullptr, infoLog);
        qDebug()<< "编译顶点着色器出错，错误信息：" << infoLog ;
    }

    //片段着色器
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);//创建片段着色器 GL_FRAGMENT_SHADER表示片段着色器
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, nullptr);
    glCompileShader(fragmentShader);
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        char infoLog[512];
        glGetShaderInfoLog(fragmentShader, 512, nullptr, infoLog);
        qDebug()<< "编译片段着色器出错，错误信息：" << infoLog ;
    }

    //链接两个编译好的着色器
    shaderProgram = glCreateProgram();//创建着色器程序对象
    glAttachShader(shaderProgram, vertexShader);//添加要编译的程序
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);//链接着色器
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success); //检测链接错误
    if (!success)
    {
        char infoLog[512];
        glGetProgramInfoLog(shaderProgram, 512, nullptr, infoLog);
        qDebug()<< "链接着色器出错，错误信息：" << infoLog;
    }
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

    glPolygonMode(GL_FRONT_AND_BACK,GL_LINE);
}

void Widget::paintGL()
{
    glClearColor(0.2f,0.3f,0.3f,1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    glUseProgram(shaderProgram);//使用此着色器，没有这行则使用默认的着色器

    glBindVertexArray(VAO);//绑定VAO以便知道该如何使用数据。
    //    glDrawArrays(GL_TRIANGLES,0,6);//从0开始找6个点
    //    glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,indices);//参数：绘制三角形，取6个数据，数据类型为unsigned int，索引数组
    glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,nullptr);//使用VAO中定义好是数据绘制
}

效果和前面一致。

QOpenGLShaderProgram

Qt将着色器程序的编译和链接封装成了 QOpenGLShaderProgram 类。下面使用它实现和之前相同的效果。

添加两个资源文件，片段着色器 shapes.frag：

#version 450 core
out vec4 FragColor;

void main()
{
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}

顶点着色器 shapes.vert：

#version 450 core
layout(location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0f);
}

#include "axbopenglwidget.h"

QOpenGLShaderProgram shaderProgram;

unsigned int VBO, VAO,EBO;
float vertices[] =
{
    0.5f, 0.5f, 0.0f, // top right
    0.5f, -0.5f, 0.0f, // bottom right
    -0.5f, -0.5f, 0.0f, // bottom left
    -0.5f, 0.5f, 0.0f // top left
};

unsigned int indices[] =
{
    0, 1, 3, // first triangle
    1, 2, 3 // second triangle
};

AXBOpenGLWidget::AXBOpenGLWidget(QWidget *parent) : QOpenGLWidget(parent)
{
}

AXBOpenGLWidget::~AXBOpenGLWidget()
{
    makeCurrent();
    glDeleteBuffers(1,&VBO);
    glDeleteBuffers(1,&EBO);
    glDeleteVertexArrays(1,&VAO);
    doneCurrent();
}

void AXBOpenGLWidget::initializeGL()
{
    initializeOpenGLFunctions();

    //创建VBO和VAO对象，并赋予ID
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    //绑定VBO和VAO对象
    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);

    //为当前绑定到target的缓冲区对象创建一个新的数据存储。
    //如果data不是NULL，则使用来自此指针的数据初始化数据存储
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    //告知显卡如何解析缓冲里的属性值
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), nullptr);
    //开启VAO管理的第一个属性值
    glEnableVertexAttribArray(0);

    glBindBuffer(GL_ARRAY_BUFFER, 0);

    shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex,":/shaders/shapes.vert");
    shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment,":/shaders/shapes.frag");
    if(!shaderProgram.link())
        qDebug()<<"ERR:"<<shaderProgram.log();

    glGenBuffers(1, &EBO);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
    glBindVertexArray(0);

    glPolygonMode(GL_FRONT_AND_BACK,GL_LINE);
}

void AXBOpenGLWidget::paintGL()
{
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    shaderProgram.bind();
    glBindVertexArray(VAO);

    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, nullptr);
}