中秋特别篇：使用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进行高效的图形渲染。希望本文能够为您的学习和开发提供有价值的参考。

相关推荐
开发者小天1 分钟前
调整为 dart-sass 支持的语法，将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
老猿讲编程1 小时前
C++中的奇异递归模板模式CRTP
开发语言·c++
.格子衫.2 小时前
022数据结构之树状数组——算法备赛
数据结构·算法·1024程序员节
黑科技Python2 小时前
生活中的“小智慧”——认识算法
学习·算法·生活
Yupureki2 小时前
从零开始的C++学习生活 16:C++11新特性全解析
c语言·数据结构·c++·学习·visual studio
lapiii3582 小时前
14天极限复习软考-day5 软件工程 、UML
软件工程·uml
紫荆鱼3 小时前
设计模式-迭代器模式（Iterator）
c++·后端·设计模式·迭代器模式
汤姆yu3 小时前
基于python的化妆品销售分析系统
开发语言·python·化妆品销售分析
ScilogyHunter3 小时前
C语言标准库完全指南
c语言·开发语言
sali-tec3 小时前
C# 基于halcon的视觉工作流-章52-生成标定板
开发语言·图像处理·人工智能·算法·计算机视觉
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06Labelme从安装到标注：零基础完整指南07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08jdk21下载、安装（Windows、Linux、macOS）09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）