qt+opengl 三维物体加入摄像机

1 在前几期的文章中，我们已经实现了三维正方体的显示了，那我们来实现让物体的由远及近，和由近及远。这里我们需要了解一个概念摄像机。

1.1 摄像机定义：在世界空间中位置、观察方向、指向右侧向量、指向上方的向量。如下图所示:

 1.2 实现一个摄像机

首先定义一个摄像机位置,然后获取一个摄影机指向原点的向量,并且获取指向摄像机的单位向量(只关心摄像机的方向,不关心其长度).代码如下所示:

1. QVector3D cameraPos(0, 0, 3)

2. QVector3D cameraTarget(0, 0, 0);

3. QVector3D cameraDirection( (cameraTarget- cameraPos).normalized() )

1.3 摄像机位置

摄像机位置是在世界空间中一个指向摄像机位置的向量。右手坐标系：大拇指指向正x轴方向，食指指向正y轴方向，中指指向正z轴方向，z正轴从屏幕指向自己。

 通过改变摄像机的位置就可以实现物体的远近效果。

在qt opengl 函数里面我们有函数实现了

void QMatrix4x4::lookAt(const QVector3D &eye, const QVector3D &center, const QVector3D &up)
//获取lookAt矩阵.
//eye: 设置摄像机(眼睛)位置，比如QVector3D(0,0,3)
//center:表示摄像机(眼睛)正在看的视图的中心,比如原点QVector3D(0,0,0)
//up:眼睛的上向量,一般为QVector3D(0,1,0),通过该向量就能获取到眼睛的右轴和上轴

 这里我们只需要设置相应的参数就可以了

eye ： 就是我们眼睛的位置，这里我们设置Z轴正方向 QVector3D(0, 0, 3);

center : 就是我们以什么地方为中心点观察物体，如QVector3D(0, 0, 0);原点。

up:眼睛的上向量,一般为QVector3D(0,1,0),通过该向量就能获取到眼睛的右轴和上轴

好了，那么我们现在来修改glsl语句和代码实现。

#include "glwidget.h"
#include <QOpenGLShaderProgram>
#include <QOpenGLTexture>
#include <QMouseEvent>
#include <QDateTime>
#include <QtMath>static const char *vertexShaderSource ="#version 330\n""layout (location = 0) in vec4 vertex;\n""layout (location = 1) in vec4 texCoord;\n""out vec4 texc;\n""uniform  mat4 matrix;\n""uniform  mat4 model;\n""uniform  mat4 view;\n""uniform  mat4 projection;\n""void main(void)\n""{\n""    gl_Position =  projection*view* matrix * vertex;\n""    texc = texCoord;\n""}\n";static const char *fragmentShaderSource ="#version 330\n""uniform sampler2D texture;\n""in vec4 texc;\n""void main(void)\n""{\n""    gl_FragColor = texture2D(texture, texc.st);\n""}\n";GLWidget::GLWidget():QOpenGLWidget(),m_xRos(0),m_yRos(0)
{cam = QVector3D(m_xRos, m_yRos, m_zRos);cameraPos = QVector3D(0, 0, 3); 近---远// cameraPos = QVector3D(0, 0, 30);远---近timer = new QTimer;timer->setInterval(20);connect(timer,&QTimer::timeout,this,[=]{qDebug()<<"timeout"<<nCount<<m_xRos;rotateBy(2 * 16, +2 * 16, -1 * 16);});}
GLWidget::~GLWidget()
{makeCurrent();vbo.destroy();for (int i = 0; i < 6; ++i)delete textures[i];delete program;doneCurrent();
}QSize GLWidget::minimumSizeHint() const
{return QSize(400, 400);
}QSize GLWidget::sizeHint() const
{return QSize(400, 400);
}void GLWidget::rotateBy(int xAngle, int yAngle, int zAngle)
{float cameraSpeed = 0.2;cameraPos += cameraSpeed * QVector3D(0, 0, 1);//由远到近//cameraPos -= cameraSpeed * QVector3D(0, 0, 1);//由近到远xRot += xAngle;yRot += yAngle;zRot += zAngle;update();
}void GLWidget::setClearColor(const QColor &color)
{clearColor = color;update();
}void GLWidget::initializeGL()
{vertices = {// ---- 位置----   - 纹理坐标 -      ---- 颜色 ----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,//10.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,//20.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,//3-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,//40.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,//5-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,};initializeOpenGLFunctions();// makeObject();glEnable(GL_DEPTH_TEST);glEnable(GL_CULL_FACE);//#define PROGRAM_VERTEX_ATTRIBUTE 0
//#define PROGRAM_TEXCOORD_ATTRIBUTE 1program = new QOpenGLShaderProgram;program->addShaderFromSourceCode(QOpenGLShader::Vertex,vertexShaderSource);program->addShaderFromSourceCode(QOpenGLShader::Fragment,fragmentShaderSource);program->link();program->bind();//激活Program对象vbo.create();vbo.bind();              //绑定到当前的OpenGL上下文,vbo.allocate(vertices.constData(), vertices.count() * sizeof(GLfloat));//初始化VAO,设置顶点数据状态(顶点，法线，纹理坐标等)vao.create();vao.bind();for (int j = 0; j < 6; ++j){textures[j] = new QOpenGLTexture(QImage(QString(":/cube%1.png").arg(j + 1)).mirrored());textures[j]->setMinMagFilters(QOpenGLTexture::LinearMipMapLinear,QOpenGLTexture::Linear);textures[j]->setWrapMode(QOpenGLTexture::DirectionS, QOpenGLTexture::ClampToEdge);textures[j]->setWrapMode(QOpenGLTexture::DirectionT, QOpenGLTexture::ClampToEdge);}program->setAttributeBuffer(0, GL_FLOAT, 0,                  3, 5 * sizeof(float));   //设置aPos顶点属性program->setAttributeBuffer(1, GL_FLOAT, 3 * sizeof(float),  2, 5 * sizeof(float));   //设置aColor顶点颜色program->enableAttributeArray(0); //使能aPos顶点属性program->enableAttributeArray(1); //使能aColor顶点颜色program->setUniformValue("texture", 0);QMatrix4x4 projection;projection.perspective(60,(float)width()/height(),0.1,100);//构建透视矩阵,这个可以是固定写法program->setUniformValue("projection", projection);//    vao.release();
//    vbo.release();
}void GLWidget::paintGL()
{//glClearColor(clearColor.redF(), clearColor.greenF(), clearColor.blueF(), clearColor.alphaF());glEnable(GL_DEPTH_TEST);glClearColor(0.1f,0.5f,0.7f,1.0f);  //设置清屏颜色glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);QMatrix4x4 m;//m.ortho(-0.5f, +0.5f, +0.5f, -0.5f, 4.0f, 15.0f);m.translate(0.0f, 0.0f, 0.0f);m.rotate(xRot / 16.0f, 1.0f, 0.0f, 0.0f);m.rotate(yRot / 16.0f, 0.0f, 1.0f, 0.0f);m.rotate(zRot / 16.0f, 0.0f, 0.0f, 1.0f);m.scale(0.5);program->setUniformValue("matrix", m);//    QMatrix4x4 view;
//    view.translate(0.0f,0.0f,-3.0f);
//    program->setUniformValue("view", view);QMatrix4x4 view;view.lookAt(cameraPos, QVector3D(0, 0, 0), QVector3D(0, 1, 0));//view.lookAt(cameraPos, cameraPos+QVector3D(0,0,-1), QVector3D(0,1,0));program->setUniformValue("view", view);for (int i = 0; i < 6; ++i) {textures[i]->bind();glDrawArrays(GL_TRIANGLE_FAN, i * 4, 4);}
}
void GLWidget::resizeGL(int width, int height)
{this->glViewport(0,0,width,height);                //定义视口区域
}void GLWidget::mousePressEvent(QMouseEvent *event)
{lastPos = event->pos();timer->start();
}void GLWidget::mouseMoveEvent(QMouseEvent *event)
{int dx = event->x() - lastPos.x();int dy = event->y() - lastPos.y();if (event->buttons() & Qt::LeftButton) {rotateBy(8 * dy, 8 * dx, 0);} else if (event->buttons() & Qt::RightButton) {rotateBy(8 * dy, 0, 8 * dx);}lastPos = event->pos();
}void GLWidget::mouseReleaseEvent(QMouseEvent * /* event */)
{emit clicked();
}

#ifndef GLWIDGET_H
#define GLWIDGET_H#include <QOpenGLWidget>
#include <QOpenGLFunctions>
#include <QOpenGLBuffer>
#include <QOpenGLVertexArrayObject>
#include <QTimer>
#include <QOpenGLTexture>
#include <QOpenGLShaderProgram>QT_FORWARD_DECLARE_CLASS(QOpenGLShaderProgram);
QT_FORWARD_DECLARE_CLASS(QOpenGLTexture)class GLWidget : public QOpenGLWidget, protected QOpenGLFunctions
{Q_OBJECTpublic://using QOpenGLWidget::QOpenGLWidget;GLWidget();~GLWidget();QSize minimumSizeHint() const override;QSize sizeHint() const override;void rotateBy(int xAngle, int yAngle, int zAngle);void setClearColor(const QColor &color);signals:void clicked();protected:void initializeGL() override;void paintGL() override;void resizeGL(int width, int height) override;void mousePressEvent(QMouseEvent *event) override;void mouseMoveEvent(QMouseEvent *event) override;void mouseReleaseEvent(QMouseEvent *event) override;private:QColor clearColor = Qt::black;QPoint lastPos;int xRot = 0;int yRot = 0;int zRot = 0;QOpenGLTexture *textures[6] = {nullptr, nullptr, nullptr, nullptr, nullptr, nullptr};QOpenGLShaderProgram *program = nullptr;QOpenGLBuffer vbo;QVector<float> vertices;QOpenGLVertexArrayObject vao;QTimer* timer;float m_xRos = 0.0f;float m_yRos = 0.0f;float m_zRos = 3.0f;QVector3D   cam;int nCount=0;QVector3D cameraPos;QVector3D cameraTarget;QVector3D cameraDirection;
};#endif

 运行下代码是不是就是可以由远到近和由近到远了呢.

我们初始化

cameraPos = QVector3D(0, 0, 3);    
cameraPos += cameraSpeed * QVector3D(0, 0, 1);//由近到远

这样写就是近--远了呢

cameraPos = QVector3D(0, 0, 30);
cameraPos -= cameraSpeed * QVector3D(0, 0, 1);//由远到近了呢

我们这样写是固定了摄像机观察的点是QVector3D(0, 0, 0),可是有个问题是不是当我们设置eye为

cameraPos = QVector3D(0, 0, 30);的时候，运行出来显示出来的效果是由远到近，然后又近到远了呢？为什么？因为

cameraPos -= cameraSpeed * QVector3D(0, 0, 1);这个值减少到负方向了?

所以我们修改下程序，修改center（摄像机观察的点）让观察点随着摄像机变化，是不是就没有由远到近 ，然后又由近到远呢？上代码

#include "glwidget.h"
#include <QOpenGLShaderProgram>
#include <QOpenGLTexture>
#include <QMouseEvent>
#include <QDateTime>
#include <QtMath>static const char *vertexShaderSource ="#version 330\n""layout (location = 0) in vec4 vertex;\n""layout (location = 1) in vec4 texCoord;\n""out vec4 texc;\n""uniform  mat4 matrix;\n""uniform  mat4 model;\n""uniform  mat4 view;\n""uniform  mat4 projection;\n""void main(void)\n""{\n""    gl_Position =  projection*view* matrix * vertex;\n""    texc = texCoord;\n""}\n";static const char *fragmentShaderSource ="#version 330\n""uniform sampler2D texture;\n""in vec4 texc;\n""void main(void)\n""{\n""    gl_FragColor = texture2D(texture, texc.st);\n""}\n";GLWidget::GLWidget():QOpenGLWidget(),m_xRos(0),m_yRos(0)
{cam = QVector3D(m_xRos, m_yRos, m_zRos);cameraPos = QVector3D(0, 0, 3);timer = new QTimer;timer->setInterval(20);connect(timer,&QTimer::timeout,this,[=]{qDebug()<<"timeout"<<nCount<<m_xRos;rotateBy(2 * 16, +2 * 16, -1 * 16);});}
GLWidget::~GLWidget()
{makeCurrent();vbo.destroy();for (int i = 0; i < 6; ++i)delete textures[i];delete program;doneCurrent();
}QSize GLWidget::minimumSizeHint() const
{return QSize(400, 400);
}QSize GLWidget::sizeHint() const
{return QSize(400, 400);
}void GLWidget::rotateBy(int xAngle, int yAngle, int zAngle)
{float cameraSpeed = 0.2;cameraPos -= cameraSpeed * QVector3D(0, 0, -1);//由远到近//cameraPos += cameraSpeed * QVector3D(0, 0, -1);//由近到远xRot += xAngle;yRot += yAngle;zRot += zAngle;update();
}void GLWidget::setClearColor(const QColor &color)
{clearColor = color;update();
}void GLWidget::initializeGL()
{vertices = {// ---- 位置----   - 纹理坐标 -      ---- 颜色 ----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,//10.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,//20.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,//3-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,//40.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,//5-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,};initializeOpenGLFunctions();// makeObject();glEnable(GL_DEPTH_TEST);glEnable(GL_CULL_FACE);//#define PROGRAM_VERTEX_ATTRIBUTE 0
//#define PROGRAM_TEXCOORD_ATTRIBUTE 1program = new QOpenGLShaderProgram;program->addShaderFromSourceCode(QOpenGLShader::Vertex,vertexShaderSource);program->addShaderFromSourceCode(QOpenGLShader::Fragment,fragmentShaderSource);program->link();program->bind();//激活Program对象vbo.create();vbo.bind();              //绑定到当前的OpenGL上下文,vbo.allocate(vertices.constData(), vertices.count() * sizeof(GLfloat));//初始化VAO,设置顶点数据状态(顶点，法线，纹理坐标等)vao.create();vao.bind();for (int j = 0; j < 6; ++j){textures[j] = new QOpenGLTexture(QImage(QString(":/cube%1.png").arg(j + 1)).mirrored());textures[j]->setMinMagFilters(QOpenGLTexture::LinearMipMapLinear,QOpenGLTexture::Linear);textures[j]->setWrapMode(QOpenGLTexture::DirectionS, QOpenGLTexture::ClampToEdge);textures[j]->setWrapMode(QOpenGLTexture::DirectionT, QOpenGLTexture::ClampToEdge);}program->setAttributeBuffer(0, GL_FLOAT, 0,                  3, 5 * sizeof(float));   //设置aPos顶点属性program->setAttributeBuffer(1, GL_FLOAT, 3 * sizeof(float),  2, 5 * sizeof(float));   //设置aColor顶点颜色program->enableAttributeArray(0); //使能aPos顶点属性program->enableAttributeArray(1); //使能aColor顶点颜色program->setUniformValue("texture", 0);QMatrix4x4 projection;projection.perspective(60,(float)width()/height(),0.1,100);//构建透视矩阵,这个可以是固定写法program->setUniformValue("projection", projection);//    vao.release();
//    vbo.release();
}void GLWidget::paintGL()
{//glClearColor(clearColor.redF(), clearColor.greenF(), clearColor.blueF(), clearColor.alphaF());glEnable(GL_DEPTH_TEST);glClearColor(0.1f,0.5f,0.7f,1.0f);  //设置清屏颜色glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);QMatrix4x4 m;//m.ortho(-0.5f, +0.5f, +0.5f, -0.5f, 4.0f, 15.0f);m.translate(0.0f, 0.0f, 0.0f);m.rotate(xRot / 16.0f, 1.0f, 0.0f, 0.0f);m.rotate(yRot / 16.0f, 0.0f, 1.0f, 0.0f);m.rotate(zRot / 16.0f, 0.0f, 0.0f, 1.0f);m.scale(0.5);program->setUniformValue("matrix", m);//    QMatrix4x4 view;
//    view.translate(0.0f,0.0f,-3.0f);
//    program->setUniformValue("view", view);QMatrix4x4 view;view.lookAt(cameraPos, cameraPos+QVector3D(0,0,-1), QVector3D(0,1,0));program->setUniformValue("view", view);for (int i = 0; i < 6; ++i) {textures[i]->bind();glDrawArrays(GL_TRIANGLE_FAN, i * 4, 4);}
}
void GLWidget::resizeGL(int width, int height)
{this->glViewport(0,0,width,height);                //定义视口区域
}void GLWidget::mousePressEvent(QMouseEvent *event)
{lastPos = event->pos();timer->start();
}void GLWidget::mouseMoveEvent(QMouseEvent *event)
{int dx = event->x() - lastPos.x();int dy = event->y() - lastPos.y();if (event->buttons() & Qt::LeftButton) {rotateBy(8 * dy, 8 * dx, 0);} else if (event->buttons() & Qt::RightButton) {rotateBy(8 * dy, 0, 8 * dx);}lastPos = event->pos();
}void GLWidget::mouseReleaseEvent(QMouseEvent * /* event */)
{emit clicked();
}

我们运行程序，最后点击下屏幕，是不是实现了呢？