OpenGL with QtWidgets：摄像机

雨点打透心脏的1/2处 2023-07-03 04:48 52阅读 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-2 ，并在 2021-8-29 进行了更新）**

# 0.前言 #

上一篇笔记记录了坐标系统：[https://blog.csdn.net/gongjianbo1992/article/details/104131776][https_blog.csdn.net_gongjianbo1992_article_details_104131776]，本文将学习Camera摄像机。

# 1.如何实现 #

观察矩阵把所有的世界坐标变换为相对于摄像机位置与方向的观察坐标。要定义一个摄像机，我们需要它在世界空间中的位置、观察的方向、一个指向它右测的向量以及一个指向它上方的向量。我们实际上创建了一个三个单位轴相互垂直的、以摄像机的位置为原点的坐标系。

![format_png][]

由于这里面知识点较多，理论请参照教程：[https://learnopengl-cn.github.io/01%20Getting%20started/09%20Camera/][https_learnopengl-cn.github.io_01_20Getting_20started_09_20Camera]

这里面重点为LookAt矩阵和欧拉角。

现在我们用LookAt来生成我们的view矩阵了：

![20200202133336620.png][]

![20200202133405783.png][]

//观察矩阵
    QMatrix4x4 view;
    //3个相互垂直的轴和一个定义摄像机空间的位置坐标
    //第一组参数：eyex, eyey,eyez 相机在世界坐标的位置
    //第二组参数：centerx,centery,centerz 相机镜头对准的物体在世界坐标的位置
    //第三组参数：upx,upy,upz 相机向上的方向在世界坐标中的方向，(0,-1,0)就旋转了190度
    //void QMatrix4x4::lookAt(const QVector3D &eye, const QVector3D &center, const QVector3D &up)
    view.lookAt(cameraPosition,cameraFront,cameraUp);
    shaderProgram.setUniformValue("view", view);

欧拉角(Euler Angle)是可以表示3D空间中任何旋转的3个值，由莱昂哈德·欧拉(Leonhard Euler)在18世纪提出。一共有3种欧拉角：俯仰角(Pitch)、偏航角(Yaw)和滚转角(Roll)，下面的图片展示了它们的含义：

![format_png 1][]![format_png 1][]

俯仰角是描述我们如何往上或往下看的角，可以在第一张图中看到。第二张图展示了偏航角，偏航角表示我们往左和往右看的程度。滚转角代表我们如何翻滚摄像机，通常在太空飞船的摄像机中使用。每个欧拉角都有一个值来表示，把三个角结合起来我们就能够计算3D空间中任何的旋转向量了。

(对于教程的移动速度这一需求，我直接略过了，目前还用不到)

（此外，本节用到的一些数学知识，我还得再补补，不然没法理解）

# 2.实现代码 #

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

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

![20200202132348705.png][]![20200204093905512.gif][]

GLCamera类代码：

#pragma once
    #include <QOpenGLWidget>
    #include <QOpenGLFunctions_3_3_Core>
    #include <QOpenGLShaderProgram>
    #include <QOpenGLVertexArrayObject>
    #include <QOpenGLBuffer>
    #include <QOpenGLTexture>
    #include <QKeyEvent>
    #include <QMouseEvent>
    #include <QWheelEvent>
    #include <QTimer>
    #include <QMatrix4x4>
    
    //摄像机（观察矩阵）
    //QOpenGLWidget窗口上下文
    //QOpenGLFunctions访问OpenGL接口，可以不继承作为成员变量使用
    class GLCamera
            : public QOpenGLWidget
            , protected QOpenGLFunctions_3_3_Core
    {
    public:
        explicit GLCamera(QWidget *parent = nullptr);
        ~GLCamera();
    
    protected:
        //【】继承QOpenGLWidget后重写这三个虚函数
        //设置OpenGL资源和状态。在第一次调用resizeGL或paintGL之前被调用一次
        void initializeGL() override;
        //渲染OpenGL场景，每当需要更新小部件时使用
        void paintGL() override;
        //设置OpenGL视口、投影等，每当尺寸大小改变时调用
        void resizeGL(int width, int height) override;
    
        //按键操作,重载Qt的事件处理
        void keyPressEvent(QKeyEvent *event) override;
        //鼠标操作,重载Qt的事件处理
        void mousePressEvent(QMouseEvent *event) override;
        void mouseReleaseEvent(QMouseEvent *event) override;
        void mouseMoveEvent(QMouseEvent *event) override;
        void wheelEvent(QWheelEvent *event) override;
    
    private:
        void calculateCamera();
        QMatrix4x4 getViewMatrix();
    
    private:
        //着色器程序
        QOpenGLShaderProgram shaderProgram;
        //顶点数组对象
        QOpenGLVertexArrayObject vao;
        //顶点缓冲
        QOpenGLBuffer vbo;
        //纹理（因为不能赋值，所以只能声明为指针）
        QOpenGLTexture *texture1{ nullptr };
        QOpenGLTexture *texture2{ nullptr };
        //定时器，做箱子旋转动画
        QTimer timer;
        int rotate{ 0 };
    
        //操作View，我这里为了展示没有封装成单独的Camera类
        //Camera Attributes
        QVector3D cameraPos{ 0.0f, 0.0f, 3.0f };
        QVector3D cameraFront{ 0.0f, 0.0f, -1.0f };
        QVector3D cameraUp{ 0.0f, 1.0f, 0.0f };
        QVector3D cameraRight{ 1.0f, 0.0f, 0.0f };
        //Euler Angles
        //偏航角如果是0.0f,指向的是 x轴正方向，即右方向，所以向里转90度，初始方向指向z轴负方向
        float eulerYaw{ -90.0f }; //偏航角，绕y左右转
        float eulerPitch{ 0.0f }; //俯仰角，绕x上下转
        //Camera options
        float cameraSpeed{ 0.5f }; //移动速度
        float cameraSensitivity{ 0.1f }; //鼠标拖动灵敏度
        float projectionFovy{ 45.0f }; //透视投影的fovy参数，视野范围
        //鼠标位置
        QPoint mousePos;
    };

#include "GLCamera.h"
    #include <cmath>
    #include <QtMath>
    
    GLCamera::GLCamera(QWidget *parent)
        : QOpenGLWidget(parent)
    {
        connect(&timer,&QTimer::timeout,this,[this](){
            rotate+=2;
            if(isVisible()){
                update();
            }
        });
        timer.setInterval(50);
    
        setFocusPolicy(Qt::ClickFocus); //默认没有焦点
        calculateCamera();
    }
    
    GLCamera::~GLCamera()
    {
        //initializeGL在显示时才调用，释放未初始化的会异常
        if(!isValid())
            return;
        //QOpenGLWidget
        //三个虚函数不需要makeCurrent，对应的操作已由框架完成
        //但是释放时需要设置当前上下文
        makeCurrent();
        vbo.destroy();
        vao.destroy();
        delete texture1;
        delete texture2;
        doneCurrent();
    }
    
    void GLCamera::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 inPos;
    layout (location = 1) in vec2 inTexCoord;
    uniform mat4 model;
    uniform mat4 view;
    uniform mat4 projection;
    out vec2 texCoord;
    void main()
    {
    gl_Position = projection * view * model * vec4(inPos, 1.0);
    texCoord = vec2(inTexCoord.x, 1-inTexCoord.y);
    })";
        const char *fragment_str=R"(#version 330 core
    in vec2 texCoord;
    uniform sampler2D texture1;
    uniform sampler2D texture2;
    out vec4 fragColor;
    void main()
    {
    fragColor = mix(texture(texture1, texCoord), texture(texture2, texCoord), 0.2);
    })";
    
        //将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();
        }
    
        //顶点数据（盒子六个面，一个面两个三角）
        float vertices[] = {
            -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
            0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
            0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
    
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
            0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
            0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
            -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    
            -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    
            0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
            0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
            0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
            0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f
        };
        vao.create();
        vao.bind();
        //QOpenGLVertexArrayObject::Binder vaoBind(&vao);
        vbo=QOpenGLBuffer(QOpenGLBuffer::VertexBuffer);
        vbo.create();
        vbo.bind();
        vbo.allocate(vertices,sizeof(vertices));
    
        //参数1对应layout
        // position attribute
        shaderProgram.setAttributeBuffer(0, GL_FLOAT, 0, 3, sizeof(GLfloat) * 5);
        shaderProgram.enableAttributeArray(0);
        // texture coord attribute
        shaderProgram.setAttributeBuffer(1, GL_FLOAT, sizeof(GLfloat) * 3, 2, sizeof(GLfloat) * 5);
        shaderProgram.enableAttributeArray(1);
    
        // texture 1
        //直接生成绑定一个2d纹理, 并生成多级纹理MipMaps
        texture1 = new QOpenGLTexture(QImage(":/container.jpg"), QOpenGLTexture::GenerateMipMaps);
        if(!texture1->isCreated()){
            qDebug() << "Failed to load texture";
        }
        // set the texture wrapping parameters
        // 等于glTexParameteri(GLtexture_2D, GLtexture_WRAP_S, GL_REPEAT);
        texture1->setWrapMode(QOpenGLTexture::DirectionS, QOpenGLTexture::Repeat);
        texture1->setWrapMode(QOpenGLTexture::DirectionT, QOpenGLTexture::Repeat);
        // set texture filtering parameters
        //等价于glTexParameteri(GLtexture_2D, GLtexture_MIN_FILTER, GL_LINEAR);
        texture1->setMinificationFilter(QOpenGLTexture::Linear);
        texture1->setMagnificationFilter(QOpenGLTexture::Linear);
    
        // texture 2
        //直接生成绑定一个2d纹理, 并生成多级纹理MipMaps
        texture2 = new QOpenGLTexture(QImage(":/awesomeface.png"), QOpenGLTexture::GenerateMipMaps);
        if(!texture2->isCreated()){
            qDebug() << "Failed to load texture";
        }
        // set the texture wrapping parameters
        // 等于glTexParameteri(GLtexture_2D, GLtexture_WRAP_S, GL_REPEAT);
        texture2->setWrapMode(QOpenGLTexture::DirectionS, QOpenGLTexture::Repeat);
        texture2->setWrapMode(QOpenGLTexture::DirectionT, QOpenGLTexture::Repeat);//
        // set texture filtering parameters
        //等价于glTexParameteri(GLtexture_2D, GLtexture_MIN_FILTER, GL_LINEAR);
        texture2->setMinificationFilter(QOpenGLTexture::Linear);
        texture2->setMagnificationFilter(QOpenGLTexture::Linear);
    
        shaderProgram.bind();
        shaderProgram.setUniformValue("texture1", 0);
        shaderProgram.setUniformValue("texture2", 1);
        shaderProgram.release();
    
        timer.start();
    }
    
    //绘制多个盒子
    static QVector3D cubePositions[] = {
        QVector3D( 0.0f,  0.0f,  0.0f),
        QVector3D( 2.0f,  5.0f, -15.0f),
        QVector3D(-1.5f, -2.2f, -2.5f),
        QVector3D(-3.8f, -2.0f, -12.3f),
        QVector3D( 2.4f, -0.4f, -3.5f),
        QVector3D(-1.7f,  3.0f, -7.5f),
        QVector3D( 1.3f, -2.0f, -2.5f),
        QVector3D( 1.5f,  2.0f, -2.5f),
        QVector3D( 1.5f,  0.2f, -1.5f),
        QVector3D(-1.3f,  1.0f, -1.5f)
    };
    
    void GLCamera::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); //默认关闭的
    
        //纹理
        glActiveTexture(GL_TEXTURE0);
        texture1->bind();
        glActiveTexture(GL_TEXTURE1);
        texture2->bind();
    
        shaderProgram.bind();
        vao.bind();
    
        /*//观察矩阵
        QMatrix4x4 view;
        //3个相互垂直的轴和一个定义摄像机空间的位置坐标
        //void QMatrix4x4::lookAt(const QVector3D &eye, const QVector3D &center, const QVector3D &up)
        //第一组参数：eyex, eyey,eyez 相机在世界坐标的位置
        //第二组参数：centerx,centery,centerz 相机镜头对准的物体在世界坐标的位置
        //第三组参数：upx,upy,upz 相机向上的方向在世界坐标中的方向，(0,-1,0)就旋转了190度
        view.lookAt(cameraPos,
                    cameraPos+cameraFront,
                    cameraUp);
        shaderProgram.setUniformValue("view", view);*/
        shaderProgram.setUniformValue("view", getViewMatrix());
        //透视投影
        QMatrix4x4 projection;
        //void QMatrix4x4::perspective(float verticalAngle, float aspectRatio, float nearPlane, float farPlane)
        //参数1视野，即观察空间大小
        //参数2宽高比
        //参数3平截头体近距离，参数4平截头体远距离
        //近平面和远平面内且处于平截头体内的顶点都会被渲染
        projection.perspective(projectionFovy, 1.0f * width() / height(), 0.1f, 100.0f);
        shaderProgram.setUniformValue("projection", projection);
        for (unsigned int i = 0; i < 10; i++) {
            //计算模型矩阵
            QMatrix4x4 model;
            //平移
            model.translate(cubePositions[i]);
            //这样每个箱子旋转的速度就不一样
            float angle = (i + 1.0f) * rotate;
            //旋转
            model.rotate(angle, QVector3D(1.0f, 0.3f, 0.5f));
            //传入着色器并绘制
            shaderProgram.setUniformValue("model", model);
            glDrawArrays(GL_TRIANGLES, 0, 36);
        }
    
        vao.release();
        texture1->release();
        texture2->release();
        shaderProgram.release();
    }
    
    void GLCamera::resizeGL(int width, int height)
    {
        glViewport(0, 0, width, height);
    }
    
    void GLCamera::keyPressEvent(QKeyEvent *event)
    {
        event->accept();
        //横向是移动，不是绕0点
        switch (event->key()) {
        case Qt::Key_W: //摄像机往上，场景往下
            cameraPos -= QVector3D::crossProduct(cameraFront, cameraRight).normalized() * cameraSpeed;
            break;
        case Qt::Key_S: //摄像机往下，场景往上
            cameraPos += QVector3D::crossProduct(cameraFront, cameraRight).normalized() * cameraSpeed;
            break;
        case Qt::Key_A: //摄像机往左，场景往右
            cameraPos -= QVector3D::crossProduct(cameraFront, cameraUp).normalized() * cameraSpeed;
            break;
        case Qt::Key_D: //摄像机往右，场景往左
            cameraPos += QVector3D::crossProduct(cameraFront, cameraUp).normalized() * cameraSpeed;
            break;
        case Qt::Key_E: //远
            cameraPos -= cameraFront * cameraSpeed;
            break;
        case Qt::Key_Q: //近
            cameraPos += cameraFront * cameraSpeed;
            break;
        default:
            break;
        }
        update();
    }
    
    void GLCamera::mousePressEvent(QMouseEvent *event)
    {
        event->accept();
        mousePos = event->pos();
    }
    
    void GLCamera::mouseReleaseEvent(QMouseEvent *event)
    {
        event->accept();
    }
    
    void GLCamera::mouseMoveEvent(QMouseEvent *event)
    {
        event->accept();
        int x_offset = event->pos().x()-mousePos.x();
        int y_offset = event->pos().y()-mousePos.y();
        mousePos = event->pos();
        //y轴的坐标是从下往上，所以相反
        //我这里移动的是摄像机，所以场景往相反方向动
        eulerYaw += x_offset*cameraSensitivity;
        eulerPitch -= y_offset*cameraSensitivity;
    
        if (eulerPitch > 89.0f)
            eulerPitch = 89.0f;
        else if (eulerPitch < -89.0f)
            eulerPitch = -89.0f;
        calculateCamera();
        update();
    }
    
    void GLCamera::wheelEvent(QWheelEvent *event)
    {
        event->accept();
        //fovy越小，模型看起来越大
        if(event->delta() < 0){
            //鼠标向下滑动为-，这里作为zoom out
            projectionFovy += cameraSpeed;
            if(projectionFovy > 90)
                projectionFovy = 90;
        }else{
            //鼠标向上滑动为+，这里作为zoom in
            projectionFovy -= cameraSpeed;
            if(projectionFovy < 1)
                projectionFovy = 1;
        }
        update();
    }
    
    void GLCamera::calculateCamera()
    {
        //角度转弧度
        //2021-8-29 之前没转为弧度制，导致初始位置不对
        const float yaw = qDegreesToRadians(eulerYaw);
        const float pitch = qDegreesToRadians(eulerPitch);
        QVector3D front;
        front.setX(std::cos(yaw) * std::cos(pitch));
        front.setY(std::sin(pitch));
        front.setZ(std::sin(yaw) * std::cos(pitch));
        cameraFront = front.normalized();
    }
    
    QMatrix4x4 GLCamera::getViewMatrix()
    {
        QMatrix4x4 view; //观察矩阵
        view.lookAt(cameraPos, cameraPos+cameraFront, cameraUp);
        return view;
    }

#  3.参考 #

LearnOpenGL：[https://learnopengl-cn.github.io/01%20Getting%20started/09%20Camera/][https_learnopengl-cn.github.io_01_20Getting_20started_09_20Camera]

博客：[https://blog.csdn.net/z136411501/article/details/79939695][https_blog.csdn.net_z136411501_article_details_79939695]

[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_blog.csdn.net_gongjianbo1992_article_details_104131776]: https://blog.csdn.net/gongjianbo1992/article/details/104131776
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sZWFybm9wZW5nbC1jbi5naXRodWIuaW8vaW1nLzAxLzA5L2NhbWVyYV9heGVzLnBuZw?x-oss-process=image/format,png
[https_learnopengl-cn.github.io_01_20Getting_20started_09_20Camera]: https://learnopengl-cn.github.io/01%20Getting%20started/09%20Camera/
[20200202133336620.png]: https://img-blog.csdnimg.cn/20200202133336620.png
[20200202133405783.png]: https://img-blog.csdnimg.cn/20200202133405783.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9sZWFybm9wZW5nbC1jbi5naXRodWIuaW8vaW1nLzAxLzA5L2NhbWVyYV9waXRjaF95YXdfcm9sbC5wbmc?x-oss-process=image/format,png
[https_github.com_gongjianbo_OpenGLwithQtWidgets.git]: https://github.com/gongjianbo/OpenGLwithQtWidgets.git
[20200202132348705.png]: https://img-blog.csdnimg.cn/20200202132348705.png
[20200204093905512.gif]: https://img-blog.csdnimg.cn/20200204093905512.gif
[https_blog.csdn.net_z136411501_article_details_79939695]: https://blog.csdn.net/z136411501/article/details/79939695