QtOpenGL开发(二)绘制立方体

最新推荐文章于 2024-07-25 10:22:28 发布
最新推荐文章于 2024-07-25 10:22:28 发布
阅读量948 收藏 6
点赞数
分类专栏： QT学习笔记 文章标签： qt

文章目录

在OpenGL中三维实体会被拆分成一个个小的平面图形来进行绘制。比如我们绘制的立方体，可以拆分成六个平面来进行绘制。这里我们以一个带纹理的正方体来说明一下三维实体的绘制方法。

绘制立方体

由于正方体的点比较多，为了提升数据的封装性我们定义一个结构体来表示每个点对应的空间坐标和纹理坐标。

struct CubePoint {
        QVector3D posCoord;        //空间坐标
        QVector2D textureCoord;    //纹理坐标
        CubePoint(const QVector3D& position = QVector3D(),
                      const QVector2D& texture = QVector2D()):
            posCoord(position), textureCoord(texture) {
        }
    };

添加了立方体每个点的数据结构之后，我们就可以添加对应的坐标信息了。立方体的坐标示意图如下所示:
在这里插入图片描述

在程序中初始化各个顶点的位置信息和纹理信息:

//QVector<CubePoint> m_data;
//m_data是顶点信息的数据容器
void SimpleGLWindow::initializeCubeData()
{
    //正方体六个面对应的数据
    m_data = {
        // FRONT FACE
        {{-0.5, -0.5,  0.5}, {0, 0}},        {{ 0.5, -0.5,  0.5}, {1, 0}},
        {{ 0.5,  0.5,  0.5}, {1, 1}},        {{-0.5,  0.5,  0.5}, {0, 1}},

        // TOP FACE
        {{-0.5,  0.5,  0.5}, {0, 0}},        {{ 0.5,  0.5,  0.5}, {1, 0}},
        {{ 0.5,  0.5, -0.5}, {1, 1}},        {{-0.5,  0.5, -0.5}, {0, 1}},

        // BACK FACE
        {{-0.5,  0.5, -0.5}, {0, 0}},        {{ 0.5,  0.5, -0.5}, {1, 0}},
        {{ 0.5, -0.5, -0.5}, {1, 1}},        {{-0.5, -0.5, -0.5}, {0, 1}},

         // BOTTOM FACE
        {{-0.5, -0.5, -0.5}, {0, 0}},        {{ 0.5, -0.5, -0.5}, {1, 0}},
        {{ 0.5, -0.5,  0.5}, {1, 1}},        {{-0.5, -0.5,  0.5}, {0, 1}},

        // LEFT FACE
        {{-0.5, -0.5, -0.5}, {0, 0}},        {{-0.5, -0.5,  0.5}, {1, 0}},
        {{-0.5,  0.5,  0.5}, {1, 1}},        {{-0.5,  0.5, -0.5}, {0, 1}},

        // RIGHT FACE
        {{ 0.5, -0.5,  0.5}, {0, 0}},        {{ 0.5, -0.5, -0.5}, {1, 0}},
        {{ 0.5,  0.5, -0.5}, {1, 1}},        {{ 0.5,  0.5,  0.5}, {0, 1}},
    };
}

在initializeGL()中调用数据初始化方法:

void SimpleGLWindow::initializeGL()
{
    ...
    //开启深度测试
    glEnable(GL_DEPTH_TEST);
    //开启剔除操作效果
    glEnable(GL_CULL_FACE);
    //禁用背面的的光照和阴影效果,避免不必要的计算
    glCullFace(GL_BACK);
    //初始化数据
    initializeCubeData();
    //设置刷新显示的时候的默认颜色为RGB(255,255,255)
    glClearColor(1, 1, 1, 0);
}

数据初始化完成之后，我们就可以在绘制方法中绘制立方体了，对应的绘制操作如下所示:

void SimpleGLWindow::paintGL()
{
    //清空颜色缓存和深度缓存
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    //将OpenGL视口和窗口保持相同
    glViewport(0, 0, width(), height());

    //重置变换矩阵
    glLoadIdentity();

    //为了查看方便对视图进行旋转
    //m_angle是旋转的角度
    glRotatef(m_angle, 1.0, 0.0, 0.0);
    glRotatef(m_angle, 0.0, 1.0, 0.0);

    //绑定纹理
    if(m_texture)
    {
        m_texture->bind();
    }
    
    //启动纹理
    glEnable(GL_TEXTURE_2D);
    //绘制立方体
    glBegin(GL_QUADS);
    for(const CubePoint &point: m_data) {
        glTexCoord2d(point.textureCoord.x(), point.textureCoord.y());
        glVertex3f(point.posCoord.x(), point.posCoord.y(), point.posCoord.z());
    }
    glEnd();
    //关闭纹理
    glDisable(GL_TEXTURE_2D);
}

绘制出来的效果如下所示:

在这里插入图片描述

立方体动画

上面方法绘制出来的立方体是静态的。为了让图形不那么单调，我们加一个定时器让立方体旋转起来，对应的实现如下所示:

SimpleGLWindow::SimpleGLWindow(QWindow *parent) :
    QOpenGLWindow(NoPartialUpdate, parent)
{
    //设置多采样的值
    QSurfaceFormat fmt = format();
    fmt.setSamples(25);
    setFormat(fmt);
    
    //设置定时器修改旋转的值
    QTimer* timer = new QTimer(this);
    timer->setInterval(30);
    connect(timer,&QTimer::timeout,this,[&](){m_angle+=1;this->update();});
    timer->start();
}

显示效果如下所示:
在这里插入图片描述

除了定时器外，我们还可以使用灵活度更高的动画框架来让立方体动起来，对应的设置如下:

//simpleglwindow.h
class SimpleGLWindow : public QOpenGLWindow, protected QOpenGLFunctions_1_1
{
    Q_OBJECT
    Q_PROPERTY(float angle READ angle WRITE setAngle)
public:
    qreal angle() const;
    void setAngle(const qreal &angle);
private:
     qreal m_angle = 60;
    ...
};   

//simpleglwindow.cpp
SimpleGLWindow::SimpleGLWindow(QWindow *parent) :
    QOpenGLWindow(NoPartialUpdate, parent)
{
    //设置多采样的值
    QSurfaceFormat fmt = format();
    fmt.setSamples(25);
    setFormat(fmt);

    QPropertyAnimation *animation = new QPropertyAnimation(this);
    animation->setTargetObject(this);
    animation->setPropertyName("angle");
    animation->setStartValue(0);
    animation->setEndValue(359);
    animation->setDuration(5000);
    animation->setLoopCount(-1);
    animation->setEasingCurve(QEasingCurve::InCubic);
    animation->start();
}  
qreal SimpleGLWindow::angle() const
{
    return m_angle;
}

void SimpleGLWindow::setAngle(const qreal &angle)
{
    m_angle = angle;
    this->update();
}

显示效果如下:
在这里插入图片描述

完整的工程代码，欢迎参考:

//simpleglwindow.h
#pragma execution_character_set("utf-8")

#ifndef SIMPLEGLWINDOW_H
#define SIMPLEGLWINDOW_H

#include <QOpenGLWindow>
#include <QOpenGLFunctions_1_1>
#include <QOpenGLTexture>
#include <QVector3D>
#include <QVector2D>
#include <QTimer>
#include <QObject>

//使用的OpenGLFunction的版本是1.1
class SimpleGLWindow : public QOpenGLWindow, protected QOpenGLFunctions_1_1
{
    Q_OBJECT
    Q_PROPERTY(float angle READ angle WRITE setAngle)
public:
    SimpleGLWindow(QWindow *parent = 0);

    qreal angle() const;
    void setAngle(const qreal &angle);

protected:
    //初始化操作
    void initializeGL();

    //绘制函数
    void paintGL();

protected:
    //窗口尺寸变化的事件
    void resizeGL(int w, int h);

private:
    void initialTexture();
    //初始化正方体的数据
    void initializeCubeData();
    //OpenGL纹理
    QOpenGLTexture* m_texture = nullptr;
    //纹理图片
    QImage* m_texture_image = nullptr;

    struct CubePoint {
        QVector3D posCoord;        //空间坐标
        QVector2D textureCoord;    //纹理坐标
        CubePoint(const QVector3D& position = QVector3D(),
                      const QVector2D& texture = QVector2D()):
            posCoord(position), textureCoord(texture) {
        }
    };
    qreal m_angle = 60;
    QVector<CubePoint> m_data;
};

#endif // SIMPLEGLWINDOW_H


//simpleglwindow.cpp
#include "simpleglwindow.h"
#include <QDebug>
#include <QPropertyAnimation>

SimpleGLWindow::SimpleGLWindow(QWindow *parent) :
    QOpenGLWindow(NoPartialUpdate, parent)
{
    //设置多采样的值
    QSurfaceFormat fmt = format();
    fmt.setSamples(25);
    setFormat(fmt);

    QPropertyAnimation *animation = new QPropertyAnimation(this);
    animation->setTargetObject(this);
    animation->setPropertyName("angle");
    animation->setStartValue(0);
    animation->setEndValue(359);
    animation->setDuration(5000);
    animation->setLoopCount(-1);
    animation->setEasingCurve(QEasingCurve::InCubic);
    animation->start();

//    QTimer* timer = new QTimer(this);
//    timer->setInterval(30);
//    connect(timer,&QTimer::timeout,this,[&](){m_angle+=1;this->update();});
//    timer->start();
}

void SimpleGLWindow::initializeGL()
{
    //初始化OpenGL函数
    if (!initializeOpenGLFunctions())
    {
        qDebug() << "init opengl functions failed";
    }
    initialTexture();
    //开启深度测试
    glEnable(GL_DEPTH_TEST);
    //开启剔除操作效果
    glEnable(GL_CULL_FACE);
    //禁用背面的的光照和阴影效果,避免不必要的计算
    glCullFace(GL_BACK);

    initializeCubeData();
    //设置刷新显示的时候的默认颜色为RGB(255,255,255)
    glClearColor(1, 1, 1, 0);
}

void SimpleGLWindow::paintGL()
{
    //清空颜色缓存和深度缓存
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    //将OpenGL视口和窗口保持相同
    glViewport(0, 0, width(), height());

    //重置变换矩阵
    glLoadIdentity();

    //为了查看方便对视图进行旋转
    glRotatef(m_angle, 1.0, 0.0, 0.0);
    glRotatef(m_angle, 0.0, 1.0, 0.0);

    //绑定纹理
    if(m_texture)
    {
        m_texture->bind();
    }

    //启动纹理
    glEnable(GL_TEXTURE_2D);
    glBegin(GL_QUADS);
    for(const CubePoint &point: m_data) {
        glTexCoord2d(point.textureCoord.x(), point.textureCoord.y());
        glVertex3f(point.posCoord.x(), point.posCoord.y(), point.posCoord.z());
    }
    glEnd();
    //关闭纹理
    glDisable(GL_TEXTURE_2D);
}

void SimpleGLWindow::resizeGL(int w, int h)
{
    qDebug() << w << h;
}

void SimpleGLWindow::initialTexture()
{
    //初始化图片和纹理
    m_texture_image = new QImage(":/background.jpg");
    m_texture = new QOpenGLTexture(m_texture_image->mirrored());

    //添加放大和缩小的时候的滤波器
    m_texture->setMinificationFilter(QOpenGLTexture::LinearMipMapLinear);
    m_texture->setMagnificationFilter(QOpenGLTexture::Linear);
}

void SimpleGLWindow::initializeCubeData()
{
    m_data = {
        // FRONT FACE
        {{-0.5, -0.5,  0.5}, {0, 0}},        {{ 0.5, -0.5,  0.5}, {1, 0}},
        {{ 0.5,  0.5,  0.5}, {1, 1}},        {{-0.5,  0.5,  0.5}, {0, 1}},

        // TOP FACE
        {{-0.5,  0.5,  0.5}, {0, 0}},        {{ 0.5,  0.5,  0.5}, {1, 0}},
        {{ 0.5,  0.5, -0.5}, {1, 1}},        {{-0.5,  0.5, -0.5}, {0, 1}},

        // BACK FACE
        {{-0.5,  0.5, -0.5}, {0, 0}},        {{ 0.5,  0.5, -0.5}, {1, 0}},
        {{ 0.5, -0.5, -0.5}, {1, 1}},        {{-0.5, -0.5, -0.5}, {0, 1}},

         // BOTTOM FACE
        {{-0.5, -0.5, -0.5}, {0, 0}},        {{ 0.5, -0.5, -0.5}, {1, 0}},
        {{ 0.5, -0.5,  0.5}, {1, 1}},        {{-0.5, -0.5,  0.5}, {0, 1}},

        // LEFT FACE
        {{-0.5, -0.5, -0.5}, {0, 0}},        {{-0.5, -0.5,  0.5}, {1, 0}},
        {{-0.5,  0.5,  0.5}, {1, 1}},        {{-0.5,  0.5, -0.5}, {0, 1}},

        // RIGHT FACE
        {{ 0.5, -0.5,  0.5}, {0, 0}},        {{ 0.5, -0.5, -0.5}, {1, 0}},
        {{ 0.5,  0.5, -0.5}, {1, 1}},        {{ 0.5,  0.5,  0.5}, {0, 1}},
    };
}

qreal SimpleGLWindow::angle() const
{
    return m_angle;
}

void SimpleGLWindow::setAngle(const qreal &angle)
{
    m_angle = angle;
    this->update();
}
i胡说
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
采用QT进行OpenGL开发(二)绘制立方体
yang1fei2的博客
07-28 3447
在OpenGL中三维实体会被拆分成一个个小的平面图形来进行绘制。比如我们绘制的立方体，可以拆分成六个平面来进行绘制。这里我们以一个带纹理的正方体来说明一下三维实体的绘制方法。
Qt OpenGL绘制旋转的立方体
yang1fei2的博客
11-15 5669
OpenGL中的最小图元是三角形，两个三角形组合便构成了正方形，空间中的六个正方形首尾组合便构成了正方体。在正方形表面贴上纹理便构成了带纹理的正方体。程序中通过添加定时器定时改变纹理的组合和正方体的位置便得到了旋转变化的立方体。通过引入按键事件可以通过外部输入改变相机位置。程序中通过wsad键来调整相机的位置。 立方体变化的程序源码如下: opengl.h #ifndef OPENGL_H #define OPENGL_H #include <QtWidgets/QWidget> #i
OpenGL-绘制一个正方体
u014723479的博客
01-06 1213
【代码】OpenGL-绘制一个正方体。
Qt OpenGL三维绘图
弹-room
09-12 2095
简介 OpenGL是为三维绘图提供的标准应用编程接口。 OpenGL处理的仅仅是三维绘图方面，而很少或是根本不提供图形用户界面编程方面的支持。OpenGL*应用程序的用户界面必须由其它工具包创建，比如在X平台下的Motif，在Windows平台下的微软基本类库（M
OpenGL-ES 学习(6)---- 立方体绘制
小猪佩奇的博客
06-23 487
顶点的坐标体系如下图所示，三维坐标的中心原点位于立方体的中心，但是要特别注意的是，前后方向表示的是Z轴，上下方向表示的是Y轴。会得到经过插值后的每个片元的颜色，并将这个颜色设置为最终的显示，实现的是一个渐变色的效果，数组中表示不同顶点的绘制顺序，每三个顶点构成一个三角形，最后由。这里为立方体的每个顶点定义不同的颜色，同时在。实现了对顶点内容和顶点Index的缓冲。个面，所以绘制立方体本质上就是绘制这。实现了旋转的效果，同时使用。Note: 这里还使用了。
【OpenGL】--- 使用OpenGL和Qt创建多个带透视效果的立方体
m0_59649626的博客
02-12 465
在本教程中，我们将使用OpenGL和Qt框架创建一个简单的应用程序，该应用程序绘制多个带有纹理的立方体。我们将使用单独的顶点着色器和片段着色器文件，以便更好地组织我们的代码。
OpengGL绘制立方体的三种方法
zzidea的专栏
07-25 7696
这个程序主要是作为新手的入门程序，这个程序来展示OpenGL运行的基本原理。通过绘制一个基本的3D图形（立方体）的三种方法的展示，有一定的借鉴意义
Qt OpenGL一个旋转的立方体
wb175208的专栏
07-10 470
先看效果： 顶点着色器： 片段着色器 使用的图片 aaa
Qt OpenGL（二十八）——Qt OpenGL 核心模式-绘制一个正方体（正六面体）
ifeng12358的博客
01-18 1262
上一篇在介绍了使用变换矩阵的时候，一川想了想，还是得抽空写一篇变换和介绍GLSL的文章，这样才能把这写文章的知识点串起来。绘制一个正方体，我们可以这样来拆解，就是绘制六个四边形，合在一起就是一个六面体，如果每个四边形组成的面是真方形，那么这个六面体就是一个正方体了。接下来通过纹理图片，就可以完整的看到效果了。上面的代码运行之后，由于是正对着屏幕的设置，看不出来是正方体，所以，我们使用旋转矩阵，让他旋转起来，就能看出来了。截止到上一篇文章，一川想使用Qt封装的类绘制一个旋转的彩色三角形的目标就实现了。
Qt OpenGL实现三角锥和立方体
05-04
在"Qt OpenGL实现三角锥和立方体"的例子中，我们需要定义每个形状的顶点坐标，然后使用OpenGL的glDrawArrays或glDrawElements函数将它们绘制出来。三角锥是由5个顶点构成的，而立方体则需要8个顶点和12条边。 4. **...
opengl 绘制多个立方体旋转
03-28
在这个项目中，它们可能被扩展为绘制立方体的代码，因为立方体是由六个相连的三角面组成的。 `texture.fs`是着色器程序的一部分，它代表了fragment shader（片段着色器）。在OpenGL中，着色器负责计算像素的颜色。...
qt OPENGL三维立方块源码.zip
04-13
5. **绘制立方体**: 使用glDrawArrays或glDrawElements函数进行渲染。前者根据连续的顶点数组绘制，而后者使用索引数组，可以优化渲染性能。 6. **视口和投影矩阵**: 开始渲染前，需要设置视口大小以适应窗口，并...
QT+OpenGL六面六色鼠标手势操作旋转立方体 滚轮缩放
10-17
在"QT+OpenGL六面六色鼠标手势操作旋转立方体 滚轮缩放"这个项目中，开发者使用QT作为图形用户界面（GUI）的框架，并结合OpenGL来创建和显示一个动态的、可以交互的六面六色立方体。这个立方体的每个面都被赋予了...
qt 通过空间控制立方体旋转
09-29
在本项目中，我们将探讨如何使用Qt框架与OpenGL结合，以实现通过空间控制立方体的旋转，这在增强现实（AR）应用中是常见的技术。标题提到的是一个具体的功能实现，而描述则提供了项目的背景——使用OpenCV 2.4.11与...
【详细】Ubuntu下安装qt5
最新发布
王尼莫的博客
07-25 634
QT5 安装（Ubuntu20.04） 详细
Qt触摸事件开发总结
漫步者
07-24 628
在触摸设备中，触摸屏的触摸事件发送到系统中后，qt系统默认会将触摸事件转换为鼠标事件，但是这并不以为意味着触摸事件消失了，而是在系统中触摸事件、鼠标事件同时存在，如果某个控件打开了手势开关，那么系统将同时存在触摸事件、鼠标事件和手势事件。第一个问题，首先说qt系统中的触摸事件、鼠标事件和手势事件是否可以共存，答案是肯定的，默认情况下qt系统会将触摸事件（touch事件）转换为鼠标事件，也就是说。最近对触摸事件比较感兴趣，研究了一下触摸相关的事件，并在此进行整理，不准确的地方希望大家斧正。
7、Qt5开发及实列（笔记3-系统操作）
oDuanYanGuHong的博客
07-23 366
说明：此示例包含了基本的常使用的系统操作。
C++客户端Qt开发——Qt窗口（菜单栏）
m0_63596031的博客
07-24 554
Qt窗口是通过类来实现的。是一个为用户提供主窗口程序的类，继承自QWidget类，并且提供了一个预定义的布局。包含一个菜单栏(menu bar)、多个工具栏(tool bars)、多个浮动窗口（铆接部件)(dock widgets、一个状态栏(status bar)和一个中心部件(central widget),它是许多应用程序的基础，如文本编辑器，图片编辑器等。
qt opengl 绘制立方体
12-22
在Qt中使用OpenGL绘制立方体可以通过以下步骤实现： 第一步是创建一个Qt窗口应用程序，并在主窗口中集成OpenGL。 第二步是创建一个继承自QOpenGLWidget的自定义OpenGL窗口类，用于实现OpenGL的绘制逻辑。 第三步是在自定义OpenGL窗口类中重写initializeGL()、resizeGL()和paintGL()这三个函数，用于初始化OpenGL环境、设置视口和进行绘制操作。 在initializeGL()函数中，我们需要设置OpenGL环境，包括清除颜色、启用深度测试等。 在resizeGL()函数中，我们需要设置视口，根据窗口大小进行调整。 在paintGL()函数中，我们需要实现具体的绘制操作。绘制一个立方体可以通过绘制6个矩形来完成，每个矩形对应立方体的一个面。我们可以通过 glVertex3f() 函数来指定每个顶点的坐标，并使用 glDrawArrays() 或 glDrawElements() 来实现实际的绘制操作。 同时，我们还需要设置立方体的颜色、光照、投影等效果，以使立方体看起来更加真实。 最后，在主窗口中创建自定义OpenGL窗口类的实例，并将其添加到布局中，以显示OpenGL绘制的立方体。 通过以上步骤，我们就可以在Qt中使用OpenGL绘制一个立方体，并且可以自由控制其大小、位置、颜色和效果，实现丰富多彩的立体图形效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值