当前位置：首页 > news >正文

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

news 2025/10/7 6:17:34

1、引言

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

2、OpenGL基础概念

顶点和顶点着色器：
- 顶点是构成3D模型的基本单位。每个顶点包含位置、颜色、纹理坐标等信息。
- 顶点着色器用于处理每个顶点的数据，决定其在屏幕上的位置。顶点着色器可以修改顶点的位置、颜色等属性。
片段和片段着色器：
- 片段是渲染过程中最小的可渲染单位，通常对应屏幕上的一个像素。
- 片段着色器用于计算每个片段的颜色，决定最终的图像颜色。
着色器程序：
- 着色器程序由顶点着色器和片段着色器组成，用于控制图形的渲染过程。
- 着色器程序需要经过编译和链接，才能在OpenGL中使用。

3、QtOpenGL简介

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

4、项目目标

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

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

5、实现步骤

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

打开Qt Creator，选择“新建项目” -> “Qt Widgets应用程序”。
在项目设置中，确保选择了合适的Qt版本，并添加对“opengl”模块的支持。
在项目文件（.pro）中添加以下行，以确保链接OpenGL库：
```
QT += opengl
```

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

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

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

#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：实现自定义类的构造函数和析构函数

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

StarfieldWidget::StarfieldWidget(QWidget *parent): QOpenGLWidget(parent)
{m_program = nullptr;m_starCount = 1000;generateStarData();generateMoonData();
}StarfieldWidget::~StarfieldWidget()
{cleanup();
}

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

void StarfieldWidget::cleanup()
{delete m_program;m_program = nullptr;m_starVAO.destroy();m_moonVAO.destroy();m_starVBO.destroy();m_moonVBO.destroy();
}

步骤4：实现initializeGL()方法

初始化OpenGL函数：

void StarfieldWidget::initializeGL()
{initializeOpenGLFunctions();
}

初始化着色器程序：

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();
}

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

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);

设置OpenGL状态：

glEnable(GL_DEPTH_TEST);
glEnable(GL_POINT_SMOOTH);

步骤5：实现paintGL()方法

清理屏幕：

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

使用着色器程序：
```
m_program->bind();
```

设置视图和投影矩阵：

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);

绘制星星：

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

绘制月亮：

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

解绑着色器程序：
```
m_program->release();
```

步骤6：实现resizeGL()方法

处理窗口大小变化：

void StarfieldWidget::resizeGL(int width, int height)
{glViewport(0, 0, width, height);
}

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

生成星星数据：

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;}
}

生成月亮数据：

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：实现顶点和片段着色器

顶点着色器（vertexShaderSource）：

#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);
}

片段着色器（fragmentShaderSource）：

#version 330 core
out vec4 FragColor;
uniform vec4 color;
void main() {FragColor = color;
}

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

主窗口类（mainwindow.h）：

#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

主窗口实现（mainwindow.cpp）：

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{m_starfieldWidget = new StarfieldWidget(this);setCentralWidget(m_starfieldWidget);
}MainWindow::~MainWindow()
{
}