学习OpenGL（四）：纹理加载

Arui丶

已于 2023-02-14 16:33:35 修改

阅读量743

点赞数

分类专栏：学习OpenGL 文章标签：学习 qt c++

于 2022-12-05 18:20:34 首次发布

本文链接：https://blog.csdn.net/weixin_42219627/article/details/128190493

版权

学习OpenGL 专栏收录该内容

5 篇文章 4 订阅

订阅专栏

本系列文章主要是记录学习OpenGL的过程，旨在驱动学习理解OpenGL，最终达到能够使用相关接口解决实际项目问题，学习流程参考《LearnOpenGL》。主要展现形式是"代码示例+接口分析"的形式，编码主要是基于Qt封装的OpenGL模块展开，这样对于我来说更加熟悉。

引言

前一章QOpenGLShaderProgram的使用以及交互的补充，这章继续进行纹理的加载，效果如下：
在这里插入图片描述

代码示例

#include <QOpenGLWidget>
#include <QOpenGLFunctions_3_3_Core>
#include <QOpenGLShaderProgram>

class QOpenGLTexture;
class CustomGLWidget : public QOpenGLWidget, QOpenGLFunctions_3_3_Core
{
    Q_OBJECT
public:
    explicit CustomGLWidget(QWidget *parent = nullptr);
    ~CustomGLWidget() override;

    enum ShapeType{

        ST_NULL,
        ST_RECT,
        ST_TRIANGLE,
    };
    void drawShape(ShapeType shapeType);

    void setLineMode(bool isLine);

    void startColorTimer(bool isStart);

signals:

public slots:

protected:
    void initializeGL() override;
    void resizeGL(int w, int h) override;
    void paintGL() override;

private slots:
    void slot_colorTimeout();

private:
    ShapeType m_shapeType;
    QOpenGLShaderProgram m_shaderProgram;

    QTimer* m_colorTimer;
    QOpenGLTexture* m_wallTexture;
    QOpenGLTexture* m_faceTexture;
};

#include "customglwidget.h"
#include <QTimer>
#include <QTime>
#include <QOpenGLTexture>

static unsigned int VBO, VAO, EBO;

static float vertices[] = {
    0.5f, 0.5f, 0.0f, 1.0f, 0.0f,   // 右上角
    0.5f, -0.5f, 0.0f, 1.0f, 1.0f,  // 右下角
    -0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // 左下角
    -0.5f, 0.5f, 0.0f, 0.0f, 0.0f,  // 左上角
    0.0f, 0.5f, 0.0f, 0.5f, 0.0f    // 中间点
};

static unsigned int indices[] = {
    0, 1, 2, 3
};

CustomGLWidget::CustomGLWidget(QWidget *parent)
    : QOpenGLWidget(parent)
    , m_shapeType(ST_NULL)
{
    m_colorTimer = new QTimer(this);
    connect(m_colorTimer, &QTimer::timeout, this, &CustomGLWidget::slot_colorTimeout);
}

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

void CustomGLWidget::drawShape(CustomGLWidget::ShapeType shapeType)
{
    if(m_shapeType != shapeType){
        m_shapeType = shapeType;
        update();
    }
}

void CustomGLWidget::setLineMode(bool isLine)
{
    makeCurrent();
    if(isLine){
        glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
    }
    else{
        glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
    }
    doneCurrent();

    update();
}

void CustomGLWidget::startColorTimer(bool isStart)
{
    if(isStart && !m_colorTimer->isActive()){
        m_colorTimer->start(100);
    }

    if(!isStart && m_colorTimer->isActive()){
        m_colorTimer->stop();
    }
}

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

    m_shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/shaders/shapes.vert");
    m_shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/shaders/shapes.frag");
    m_shaderProgram.link();
    m_shaderProgram.bind();

    m_wallTexture = new QOpenGLTexture(QImage(":/skin/images/wall.jpg"));
    m_faceTexture = new QOpenGLTexture(QImage(":/skin/images/awesomeface.png"));

    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glGenBuffers(1, &EBO);

    // 绑定顶点数组对象
    glBindVertexArray(VAO);

    // 把我们的顶点数组复制到一个顶点缓冲中，供OpenGL使用
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    // 复制我们的索引数组到一个索引缓冲中，供OpenGL使用
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

    // 设定顶点属性指针
    glVertexAttribPointer(0 ,3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    glVertexAttribPointer(1 ,2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);
}

void CustomGLWidget::resizeGL(int w, int h)
{
    QOpenGLWidget::resizeGL(w, h);
}

void CustomGLWidget::paintGL()
{
    // 背景颜色
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    switch (m_shapeType) {
    case ST_RECT:
        glBindVertexArray(VAO);
        //glDrawArrays(GL_TRIANGLES, 0, 6);
        //glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, nullptr);
        m_wallTexture->bind();
        glDrawElements(GL_POLYGON, 4, GL_UNSIGNED_INT, nullptr);
        break;
    default:
        break;
    }
}

void CustomGLWidget::slot_colorTimeout()
{
    makeCurrent();
    int timeValue = QTime::currentTime().second();
    float greenValue = sin(timeValue) / 2.0f + 0.5f;
    m_shaderProgram.setUniformValue("customColor", 0.0f, greenValue, 0.0f, 1.0f);
    doneCurrent();

    update();
}

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCord;

out vec4 vertexColor; // 为片段着色器指定一个颜色输出
out vec2 TexCord;

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

    TexCord = aTexCord;
}

#version 330 core
out vec4 FragColor;

in vec4 vertexColor; // 从顶点着色器传来的输入变量（名称相同、类型相同）
uniform vec4 customColor;

in vec2 TexCord;
uniform sampler2D texture0;

void main()
{
    //FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
    //FragColor = vertexColor;
    //FragColor = customColor;
    FragColor = texture(texture0, TexCord);
}

代码解析

    FragColor = texture(texture0, TexCord);

着色器(Shader)是运行在GPU上的小程序，纹理的加载主要需要使用ShaderProgram中纹理附加函数texture(…)。该函数有两个参数，第一个是纹理本身，也就是图片，第二个就是顶点对应的纹理坐标，也就是图片坐标，以左上角为原点。

图片加载

首先是图片转换为纹理，传递至GPU，供ShaderProgram使用。此处使用的是已封装好的QOpenGLTexture，加载资源文件，如下所示：

    m_wallTexture = new QOpenGLTexture(QImage(":/skin/images/wall.jpg"));
    m_faceTexture = new QOpenGLTexture(QImage(":/skin/images/awesomeface.png"));

加载图片后，在绘制之前进行绑定，也就是paintGL中进行绑定，绑定shapes.frag中的uniform ，以此进行CPU和GPU之间的通信，如下所示：

void CustomGLWidget::paintGL()
{
    // 背景颜色
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    switch (m_shapeType) {
    case ST_RECT:
        glBindVertexArray(VAO);
        //glDrawArrays(GL_TRIANGLES, 0, 6);
        //glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, nullptr);
        m_wallTexture->bind();
        glDrawElements(GL_POLYGON, 4, GL_UNSIGNED_INT, nullptr);
        break;
    default:
        break;
    }
}

坐标加载

之后就是纹理坐标的加载，这里需要调整顶点数组，在原来的顶点坐标上追加纹理坐标，如下所示：

static float vertices[] = {
    0.5f, 0.5f, 0.0f, 1.0f, 0.0f,   // 右上角
    0.5f, -0.5f, 0.0f, 1.0f, 1.0f,  // 右下角
    -0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // 左下角
    -0.5f, 0.5f, 0.0f, 0.0f, 0.0f,  // 左上角
    0.0f, 0.5f, 0.0f, 0.5f, 0.0f    // 中间点
};

由于数组改变，应该在绑定顶点数据时需要进行调整，一个是数组的步长应该变成5（3个顶点坐标、2个纹理坐标），另一个就是增加纹理坐标的读取，将其加载到第二个数组中，作为shapes.vert第二个参数，也就是layout (location = 1)，如下所示：

    // 设定顶点属性指针
    glVertexAttribPointer(0 ,3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    glVertexAttribPointer(1 ,2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);