中秋特别篇：使用QtOpenGL和着色器绘制星空与满月

郝学胜-神的一滴2025-10-08 20:17

1、引言

OpenGL是一个功能强大的跨平台图形库，广泛应用于游戏开发、科学可视化和实时图形渲染等领域。QtOpenGL作为Qt框架的一部分，为开发者提供了一个便捷的接口，可以在Qt应用程序中集成OpenGL功能。本文将详细介绍如何在C++的QtOpenGL环境下，利用OpenGL着色器绘制一个包含星空和满月的场景。

2、OpenGL基础概念

  1. 顶点和顶点着色器：

    • 顶点是构成3D模型的基本单位。每个顶点包含位置、颜色、纹理坐标等信息。
    • 顶点着色器用于处理每个顶点的数据，决定其在屏幕上的位置。顶点着色器可以修改顶点的位置、颜色等属性。

  2. 片段和片段着色器：

    • 片段是渲染过程中最小的可渲染单位，通常对应屏幕上的一个像素。
    • 片段着色器用于计算每个片段的颜色，决定最终的图像颜色。

  3. 着色器程序：

    • 着色器程序由顶点着色器和片段着色器组成，用于控制图形的渲染过程。
    • 着色器程序需要经过编译和链接，才能在OpenGL中使用。

3、QtOpenGL简介

QtOpenGL是Qt框架中的一个模块，它将OpenGL与Qt的GUI系统结合起来，使得开发者可以在Qt窗口中使用OpenGL进行图形渲染。Qt提供了一个名为QOpenGLWidget的类，继承自QWidget，专门用于在Qt应用程序中进行OpenGL渲染。

4、项目目标

本项目的目标是在QtOpenGL环境中，使用OpenGL着色器技术，实现一个包含星空和满月的简单图形程序。通过本项目，读者可以了解以下内容：

  1. 如何在Qt中集成OpenGL功能。
  2. 如何编写和使用OpenGL着色器程序。
  3. 如何在3D空间中生成和渲染点（星星）。
  4. 如何绘制圆形（满月）。

5、实现步骤

步骤1：创建Qt项目并配置OpenGL支持

  1. 打开Qt Creator，选择"新建项目" -> "Qt Widgets应用程序"。

  2. 在项目设置中，确保选择了合适的Qt版本，并添加对"opengl"模块的支持。

  3. 在项目文件（.pro）中添加以下行，以确保链接OpenGL库：

    pro 复制代码 
    QT += opengl

步骤2：创建自定义的QOpenGLWidget子类

  1. 在项目中添加一个新的C++类，命名为StarfieldWidget，继承自QOpenGLWidget。

  2. 在头文件中声明必要的成员变量和方法：

    cpp 复制代码 
    #ifndef STARFIELDWIDGET_H
#define STARFIELDWIDGET_H

#include <QOpenGLWidget>
#include <QOpenGLShaderProgram>
#include <QOpenGLVertexArrayObject>
#include <QOpenGLBuffer>
#include <QVector3D>
#include <vector>

class StarfieldWidget : public QOpenGLWidget
{
    Q_OBJECT
public:
    explicit StarfieldWidget(QWidget *parent = nullptr);
    ~StarfieldWidget();

protected:
    void initializeGL() override;
    void paintGL() override;
    void resizeGL(int width, int height) override;

private:
    QOpenGLShaderProgram *m_program;
    QOpenGLVertexArrayObject m_starVAO;
    QOpenGLVertexArrayObject m_moonVAO;
    QOpenGLBuffer m_starVBO;
    QOpenGLBuffer m_moonVBO;
    std::vector<float> m_starData;
    std::vector<float> m_moonData;
    int m_starCount;
};

#endif // STARFIELDWIDGET_H

步骤3：实现自定义类的构造函数和析构函数

  1. 在构造函数中初始化成员变量，并生成星星和月亮的数据：

    cpp 复制代码 
    StarfieldWidget::StarfieldWidget(QWidget *parent)
    : QOpenGLWidget(parent)
{
    m_program = nullptr;
    m_starCount = 1000;
    generateStarData();
    generateMoonData();
}

StarfieldWidget::~StarfieldWidget()
{
    cleanup();
}

  2. 在析构函数中释放OpenGL资源：

    cpp 复制代码 
    void StarfieldWidget::cleanup()
{
    delete m_program;
    m_program = nullptr;
    m_starVAO.destroy();
    m_moonVAO.destroy();
    m_starVBO.destroy();
    m_moonVBO.destroy();
}

步骤4：实现initializeGL()方法

  1. 初始化OpenGL函数：

    cpp 复制代码 
    void StarfieldWidget::initializeGL()
{
    initializeOpenGLFunctions();
}

  2. 初始化着色器程序：

    cpp 复制代码 
    if (!m_program->addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource)) {
    qWarning() << "Vertex shader error:" << m_program->log();
}
if (!m_program->addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource)) {
    qWarning() << "Fragment shader error:" << m_program->log();
}
if (!m_program->link()) {
    qWarning() << "Shader linking error:" << m_program->log();
}

  3. 初始化顶点数组对象和缓冲区：

    cpp 复制代码 
    m_starVAO.create();
m_starVAO.bind();
m_starVBO.create();
m_starVBO.bind();
m_starVBO.allocate(m_starData.data(), m_starData.size() * sizeof(float));
m_program->enableAttributeArray(0);
m_program->setAttributeBuffer(0, GL_FLOAT, 0, 3);

m_moonVAO.create();
m_moonVAO.bind();
m_moonVBO.create();
m_moonVBO.bind();
m_moonVBO.allocate(m_moonData.data(), m_moonData.size() * sizeof(float));
m_program->enableAttributeArray(0);
m_program->setAttributeBuffer(0, GL_FLOAT, 0, 3);

  4. 设置OpenGL状态：

    cpp 复制代码 
    glEnable(GL_DEPTH_TEST);
glEnable(GL_POINT_SMOOTH);

步骤5：实现paintGL()方法

  1. 清理屏幕：

    cpp 复制代码 
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

  2. 使用着色器程序：

    cpp 复制代码 
    m_program->bind();

  3. 设置视图和投影矩阵：

    cpp 复制代码 
    glm::mat4 view = glm::lookAt(glm::vec3(0.0f, 0.0f, 50.0f),
                             glm::vec3(0.0f, 0.0f, 0.0f),
                             glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 projection = glm::perspective(glm::radians(45.0f),
                                       (float)width() / (float)height(),
                                       0.1f, 1000.0f);

m_program->setUniformValue("view", view);
m_program->setUniformValue("projection", projection);

  4. 绘制星星：

    cpp 复制代码 
    m_starVAO.bind();
m_program->setUniformValue("color", QColor(Qt::white));
glPointSize(3.0f);
glDrawArrays(GL_POINTS, 0, m_starCount);

  5. 绘制月亮：

    cpp 复制代码 
    m_moonVAO.bind();
m_program->setUniformValue("color", QColor(Qt::white));
glDrawArrays(GL_LINE_LOOP, 0, m_moonData.size() / 3);

  6. 解绑着色器程序：

    cpp 复制代码 
    m_program->release();

步骤6：实现resizeGL()方法

  1. 处理窗口大小变化：

    cpp 复制代码 
    void StarfieldWidget::resizeGL(int width, int height)
{
    glViewport(0, 0, width, height);
}

步骤7：生成星星和月亮的数据

  1. 生成星星数据：

    cpp 复制代码 
    void StarfieldWidget::generateStarData()
{
    m_starData.resize(m_starCount * 3);
    for (int i = 0; i < m_starCount; ++i) {
        m_starData[i * 3] = (rand() % 100 - 50) / 10.0f;
        m_starData[i * 3 + 1] = (rand() % 100 - 50) / 10.0f;
        m_starData[i * 3 + 2] = (rand() % 100 - 50) / 10.0f;
    }
}

  2. 生成月亮数据：

    cpp 复制代码 
    void StarfieldWidget::generateMoonData()
{
    const GLfloat radius = 20.0f;
    const GLint segments = 100;
    m_moonData.resize(segments * 3);
    for ( GLint i = 0; i < segments; i++ ) {
        GLfloat angle = 2.0f * M_PI * i / segments;
        GLfloat x = radius * cos(angle);
        GLfloat y = radius * sin(angle);
        m_moonData[i * 3] = x;
        m_moonData[i * 3 + 1] = y;
        m_moonData[i * 3 + 2] = 0.0f;
    }
}

步骤8：实现顶点和片段着色器

  1. 顶点着色器（vertexShaderSource）：

    glsl 复制代码 
    #version 330 core
layout(location = 0) in vec3 position;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main() {
    gl_Position = projection * view * model * vec4(position, 1.0f);
}

  2. 片段着色器（fragmentShaderSource）：

    glsl 复制代码 
    #version 330 core
out vec4 FragColor;
uniform vec4 color;
void main() {
    FragColor = color;
}

步骤9：在主窗口中使用自定义的QOpenGLWidget

  1. 主窗口类（mainwindow.h）：

    cpp 复制代码 
    #ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "StarfieldWidget.h"

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    StarfieldWidget *m_starfieldWidget;
};

#endif // MAINWINDOW_H

  2. 主窗口实现（mainwindow.cpp）：

    cpp 复制代码 
    #include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    m_starfieldWidget = new StarfieldWidget(this);
    setCentralWidget(m_starfieldWidget);
}

MainWindow::~MainWindow()
{
}

步骤10：构建并运行项目

  1. 在Qt Creator中点击"构建"按钮，生成可执行文件。
  2. 点击"运行"按钮，启动应用程序，查看绘制的星空和满月效果。

6、注意事项

  1. 依赖项管理：

    • 确保系统上安装了必要的OpenGL开发库和Qt的OpenGL模块。

  2. 错误处理：

    • 在代码中添加错误检查，确保着色器编译和链接成功。

  3. 性能优化：

    • 考虑使用更高效的图形渲染技术，如批处理和缓冲区对象更新，以提高渲染性能。

  4. 资源管理：

    • 确保在类析构函数中正确释放OpenGL资源，避免内存泄漏。

7、结论

通过以上步骤，您可以在C++的QtOpenGL环境中使用着色器技术，实现一个包含星空和满月的简单图形程序。这个项目不仅展示了QtOpenGL的强大功能，还帮助您理解如何在Qt框架下结合OpenGL进行高效的图形渲染。希望本文能够为您的学习和开发提供有价值的参考。

相关推荐
雾江流2 小时前
高德地图车机版 8.5 | 全新的简洁巡航模式，搭配蓝天白云皮肤，红绿灯读秒，颜值高又实用
软件工程
Predestination王瀞潞2 小时前
Python oct() 函数
开发语言·python
生物小卡拉3 小时前
R脚本--PCA分析系列1_v1.0
开发语言·r语言
生物小卡拉3 小时前
R脚本——LefSE分析与可视化-v1
开发语言·r语言
qiuiuiu4133 小时前
CPrimer Plus第十六章C预处理器和C库总结2-qsort函数
java·c语言·算法
fl1768313 小时前
基于python+tkinter实现的自动组卷评卷考试系统python源码+课程设计+项目说明
开发语言·python·课程设计
张较瘦_3 小时前
应用型本科计算机类专业毕业设计与论文选题指南
java·开发语言·课程设计
Dxy12393102163 小时前
Python自动连接已保存WiFi
开发语言·python
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02GitHub 镜像站点03PHP htmlspecialchars()函数详解04UV安装并设置国内源05BongoCat - 跨平台键盘猫动画工具06两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答07jdk21下载、安装（Windows、Linux、macOS）08Linux下V2Ray安装配置指南0946个Nano-banana 精选提示词，持续更新中10零基础搭建赛博朋克个人主页：蓝耘Claude Code完整实战教程