OpenGL with QtWidgets：练习之扑克翻转

约定不等于承诺〃 2023-07-03 07:15 2阅读 0赞

**（本文是LearnOpenGL的学习笔记，教程中文翻译地址[https://learnopengl-cn.github.io/][https_learnopengl-cn.github.io]（备用地址[https://learnopengl-cn.readthedocs.io/zh/latest/][https_learnopengl-cn.readthedocs.io_zh_latest]），写于 2020-2-4 ，并在 2021-9-5 进行了更新）**

# 1.实现思路 #

（本来想拿扑克的正反面来做练习，奈何没找到免费的资源图片，白嫖不易，于是拿两张明星图片来代替了）

代码主要参考教程 **"坐标系统"** 一节的源码，把顶点坐标和纹理坐标传递给着色器，然后旋转model矩阵就能实现了翻转效果了。

两个纹理的位置是一样的，那么如何区分正反面呢？在OpenGL中默认逆时针的顶点顺序是正面，所以我们把**两个面的顶点顺序反一下，一个顺时针一个逆时针**就可以了。有了正反面，还需要把背面隐藏起来，OpenGL中有面剔除的功能，我们**把背面剔除**即可。（参考：[https://www.jianshu.com/p/4e165df3ae26][https_www.jianshu.com_p_4e165df3ae26]）

glEnable(GL_CULL_FACE); //开启面剔除
    glCullFace(GL_BACK); //剔除背面
    //glFrontFace(GL_CW); //逆时针顶点为正面GL_CCW（默认），顺时针GL_CW

解决了正反面问题，还有个问题是如何把两张图分别贴到正反面 。开始我想的是用两个着色器程序分别绘制，但是感觉太麻烦了，索性把两张图合并到一起（这样就只有一个纹理贴图了），**用纹理坐标来分割两张图**贴到正反面。（如果其中一个图左右翻转了，把纹理坐标x翻转下就可以了）

//VAO,VBO（一个面两个三角）360/460（应该用qimage获取宽高，这里设定死了）
        const float texture_width=360.0f/460.0f;
        float vertices[] = {
            -texture_width/2, -0.5f, 0.0f,  0.0f, 0.5f, //左下角
            texture_width/2, -0.5f, 0.0f,  1.0f, 0.5f, //右下角
            texture_width/2,  0.5f, 0.0f,  1.0f, 1.0f, //右上角
    
            texture_width/2,  0.5f, 0.0f,  1.0f, 1.0f, //右上角
            -texture_width/2,  0.5f, 0.0f,  0.0f, 1.0f, //左上角
            -texture_width/2, -0.5f, 0.0f,  0.0f, 0.5f, //左下角
    
            -texture_width/2, -0.5f, 0.0f,  1.0f, 0.0f, //左下角
            -texture_width/2,  0.5f, 0.0f,  1.0f, 0.5f, //左上角
            texture_width/2,  0.5f, 0.0f,  0.0f, 0.5f, //右上角
    
            texture_width/2,  0.5f, 0.0f,  0.0f, 0.5f, //右上角
            texture_width/2, -0.5f, 0.0f,  0.0f, 0.0f, //右下角
            -texture_width/2, -0.5f, 0.0f,  1.0f, 0.0f, //左下角
        };

坐标变换的代码用的教程里的方式，只旋转了model矩阵。

![20200204101441186.png][]

QMatrix4x4 view; //观察矩阵，后退一点
        view.translate(QVector3D(0.0f, 0.0f, -1.5f));
        _shaderProgram.setUniformValue("view", view);
        QMatrix4x4 projection; //透视投影
        projection.perspective(45.0f, 1.0f * width() / height(), 0.1f, 100.0f);
        _shaderProgram.setUniformValue("projection", projection);
        QMatrix4x4 model;//模型矩阵
        model.rotate(_rotate, QVector3D(0.0f, 1.0f, 0.0f));
        _shaderProgram.setUniformValue("model", model);

（代码里没有堆叠的问题，所以可以不用深度缓冲，我复制粘贴没去掉）

# 2.实现代码 #

（项目git链接：[https://github.com/gongjianbo/OpenGLwithQtWidgets.git][https_github.com_gongjianbo_OpenGLwithQtWidgets.git]）

我的GLTestPoker类实现效果（左边图片右边GIF）：

![20200204094031327.png][]![20200204094034967.gif][]

MyPoker类代码：

#pragma once
    #include <QOpenGLWidget>
    #include <QOpenGLFunctions_3_3_Core>
    #include <QOpenGLShaderProgram>
    #include <QOpenGLVertexArrayObject>
    #include <QOpenGLBuffer>
    #include <QOpenGLTexture>
    #include <QVector3D>
    #include <QMatrix4x4>
    #include <QTimer>
    
    //扑克反转练习
    //QOpenGLWidget窗口上下文
    //QOpenGLFunctions访问OpenGL接口，可以不继承作为成员变量使用
    class MyPoker
            : public QOpenGLWidget
            , protected QOpenGLFunctions_3_3_Core
    {
    public:
        explicit MyPoker(QWidget *parent = nullptr);
        ~MyPoker();
    
    protected:
        //【】继承QOpenGLWidget后重写这三个虚函数
        //设置OpenGL资源和状态。在第一次调用resizeGL或paintGL之前被调用一次
        void initializeGL() override;
        //渲染OpenGL场景，每当需要更新小部件时使用
        void paintGL() override;
        //设置OpenGL视口、投影等，每当尺寸大小改变时调用
        void resizeGL(int width, int height) override;
    
    private:
        //着色器程序
        QOpenGLShaderProgram shaderProgram;
        //顶点数组对象
        QOpenGLVertexArrayObject vao;
        //顶点缓冲
        QOpenGLBuffer vbo;
    
        //纹理
        QOpenGLTexture *texture{ nullptr };
        //定时器，做动画效果
        QTimer timer{ nullptr };
        //旋转角度
        int rotate{ 0 };
    };

#include "MyPoker.h"
    #include <QPushButton>
    #include <QWidget>
    #include <QDebug>
    
    MyPoker::MyPoker(QWidget *parent)
        : QOpenGLWidget(parent)
    {
        connect(&timer,&QTimer::timeout,this,[this](){
            rotate+=2;
            if(isVisible()){
                update();
            }
        });
        timer.setInterval(50);
    }
    
    MyPoker::~MyPoker()
    {
        //initializeGL在显示时才调用，释放未初始化的会异常
        if(!isValid())
            return;
        //QOpenGLWidget
        //三个虚函数不需要makeCurrent，对应的操作已由框架完成
        //但是释放时需要设置当前上下文
        makeCurrent();
        vbo.destroy();
        vao.destroy();
        delete texture;
        doneCurrent();
    }
    
    void MyPoker::initializeGL()
    {
        //为当前上下文初始化OpenGL函数解析
        initializeOpenGLFunctions();
    
        //着色器代码
        //in输入，out输出,uniform从cpu向gpu发送
        //因为OpenGL纹理颠倒过来的，所以取反vec2(aTexCoord.x, 1-aTexCoord.y);
        const char *vertex_str=R"(#version 330 core
    layout (location = 0) in vec3 aPos;
    layout (location = 1) in vec2 aTexCoord;
    out vec2 TexCoord;
    uniform mat4 model;
    uniform mat4 view;
    uniform mat4 projection;
    void main()
    {
    gl_Position = projection * view * model * vec4(aPos, 1.0f);
    TexCoord = vec2(aTexCoord.x, 1.0 - aTexCoord.y);
    })";
        const char *fragment_str=R"(#version 330 core
    in vec2 TexCoord;
    uniform sampler2D texture1;
    out vec4 FragColor;
    void main()
    {
    FragColor = texture(texture1, TexCoord);
    })";
    
        //将source编译为指定类型的着色器，并添加到此着色器程序
        if(!shaderProgram.addCacheableShaderFromSourceCode(
                    QOpenGLShader::Vertex,vertex_str)){
            qDebug()<<"compiler vertex error"<<shaderProgram.log();
        }
        if(!shaderProgram.addCacheableShaderFromSourceCode(
                    QOpenGLShader::Fragment,fragment_str)){
            qDebug()<<"compiler fragment error"<<shaderProgram.log();
        }
        //使用addShader()将添加到该程序的着色器链接在一起。
        if(!shaderProgram.link()){
            qDebug()<<"link shaderprogram error"<<shaderProgram.log();
        }
    
        //VAO,VBO（一个面两个三角）宽高比360/460
        const QImage img_temp(":/liuyifei.png");
        //上下两张图，所以高度除以二
        const float texture_width=1.0f*img_temp.width()/(img_temp.height()/2);
        float vertices[] = {
            -texture_width/2, -0.5f, 0.0f,  0.0f, 0.5f, //左下角
            texture_width/2, -0.5f, 0.0f,  1.0f, 0.5f, //右下角
            texture_width/2,  0.5f, 0.0f,  1.0f, 1.0f, //右上角
    
            texture_width/2,  0.5f, 0.0f,  1.0f, 1.0f, //右上角
            -texture_width/2,  0.5f, 0.0f,  0.0f, 1.0f, //左上角
            -texture_width/2, -0.5f, 0.0f,  0.0f, 0.5f, //左下角
    
            -texture_width/2, -0.5f, 0.0f,  1.0f, 0.0f, //左下角
            -texture_width/2,  0.5f, 0.0f,  1.0f, 0.5f, //左上角
            texture_width/2,  0.5f, 0.0f,  0.0f, 0.5f, //右上角
    
            texture_width/2,  0.5f, 0.0f,  0.0f, 0.5f, //右上角
            texture_width/2, -0.5f, 0.0f,  0.0f, 0.0f, //右下角
            -texture_width/2, -0.5f, 0.0f,  1.0f, 0.0f, //左下角
        };
        vao.create();
        vao.bind();
        //QOpenGLVertexArrayObject::Binder vaoBind(&vao);
        vbo=QOpenGLBuffer(QOpenGLBuffer::VertexBuffer);
        vbo.create();
        vbo.bind();
        vbo.allocate(vertices,sizeof(vertices));
    
        //参数1对应layout
        //顶点
        shaderProgram.setAttributeBuffer(0, GL_FLOAT, 0, 3, sizeof(GLfloat) * 5);
        shaderProgram.enableAttributeArray(0);
        //纹理坐标
        shaderProgram.setAttributeBuffer(1, GL_FLOAT, sizeof(GLfloat) * 3, 2, sizeof(GLfloat) * 5);
        shaderProgram.enableAttributeArray(1);
    
        // texture
        //直接生成绑定一个2d纹理, 并生成多级纹理MipMaps
        texture = new QOpenGLTexture(img_temp, QOpenGLTexture::GenerateMipMaps);
        if(!texture->isCreated()){
            qDebug() << "Failed to load texture";
        }
        // set the texture wrapping parameters
        // 等于glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
        texture->setWrapMode(QOpenGLTexture::DirectionS, QOpenGLTexture::Repeat);
        texture->setWrapMode(QOpenGLTexture::DirectionT, QOpenGLTexture::Repeat);
        // set texture filtering parameters
        //等价于glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        texture->setMinificationFilter(QOpenGLTexture::Linear);
        texture->setMagnificationFilter(QOpenGLTexture::Linear);
    
        shaderProgram.bind();
        shaderProgram.setUniformValue("texture1", 0);
        shaderProgram.release();
    
        timer.start();
    }
    
    void MyPoker::paintGL()
    {
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
        //清除深度缓冲
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
        //Z缓冲(Z-buffer),深度缓冲(Depth Buffer)。
        glEnable(GL_DEPTH_TEST);
    
        glEnable(GL_CULL_FACE); //剔除
        glCullFace(GL_BACK); //剔除背面
        //glFrontFace(GL_CW); //默认逆时针顶点为正面GL_CCW
    
        glActiveTexture(GL_TEXTURE0);
        texture->bind();
    
        shaderProgram.bind();
        vao.bind();
    
        QMatrix4x4 view; //观察矩阵，后退一点
        view.translate(QVector3D(0.0f, 0.0f, -1.5f));
        shaderProgram.setUniformValue("view", view);
        QMatrix4x4 projection; //透视投影
        projection.perspective(45.0f, 1.0f * width() / height(), 0.1f, 100.0f);
        shaderProgram.setUniformValue("projection", projection);
        QMatrix4x4 model;//模型矩阵
        model.rotate(rotate, QVector3D(0.0f, 1.0f, 0.0f));
        shaderProgram.setUniformValue("model", model);
    
        glDrawArrays(GL_TRIANGLES, 0, 12);
    
        vao.release();
        texture->release();
        shaderProgram.release();
    }
    
    void MyPoker::resizeGL(int width, int height)
    {
        glViewport(0, 0, width, height);
    }

[https_learnopengl-cn.github.io]: https://learnopengl-cn.github.io/
[https_learnopengl-cn.readthedocs.io_zh_latest]: https://learnopengl-cn.readthedocs.io/zh/latest/
[https_www.jianshu.com_p_4e165df3ae26]: https://www.jianshu.com/p/4e165df3ae26
[20200204101441186.png]: https://img-blog.csdnimg.cn/20200204101441186.png
[https_github.com_gongjianbo_OpenGLwithQtWidgets.git]: https://github.com/gongjianbo/OpenGLwithQtWidgets.git
[20200204094031327.png]: https://img-blog.csdnimg.cn/20200204094031327.png
[20200204094034967.gif]: https://img-blog.csdnimg.cn/20200204094034967.gif