Qt+OpenGL入门教程（三）——绘制三角形

通过前两篇文章的学习，我想大家应该有了基本的理解，我们接下来实操一下。

创建Qt OpenGL窗口

QOpenGLWidget

QGLWidget是传统QtOpenGL模块的一部分，与其他QGL类一样，应该在新的应用程序中避免使用。相反，从Qt5.4开始，Qt推荐使用QOpenGLWidget和QOpenGL类。
QOpenGLWidget提供显示集成到Qt应用程序中的OpenGL图形的功能，使用起来非常简单。让类继承它，并像其他QWidget一样使用子类，额外可以选择使用QPainer和标准的OpenGL渲染命令。

QOpenGLWidget提供了三个方便的虚拟函数，可以在子类中重新实现这些函数来执行典型的OpenGL任务：

• initializeGL()：设置OpenGL呈现上下文，定义显示列表等。在第一次调用resizeGL()或paintGL()之前调用一次。
• resizeGL()：设置OpenGL视区、投影等。每当调整了大小时都会调用该视区（并且当它第一次显示时也会调用，因为所有新创建的小部件都会自动获得一个调整大小的事件）。
• paintGL()：渲染OpenGL场景。每当需要更新小部件时调用。

QOpenGLExtraFunctions

QOpenGLExtraFunctions类继承于QOpenGLFunctions，相较于QOpenGLFunctions，额外提供了对OpenGL ES 3.0、3.1和3.2 API的跨平台访问，如果我们需要在类中使用opengl函数，只需要使类继承于QOpenGLExtraFunctions，就能在内部通过this指针访问到OpenGL函数

QOpenGLShaderProgram

QOpenGLShaderProgram是Qt中用于管理OpenGL着色器程序的类。它封装了OpenGL的着色器对象（Shader Object）和着色器程序对象（Shader Program Object），提供了一种方便的方式来管理和使用着色器。

标准化设备坐标(Normalized Device Coordinates, NDC)

顶点着色器中处理过后，就应该是标准化设备坐标了，x、y和z的值在-1.0到1.0的一小段空间(立方体)。落在范围外的坐标都会被裁剪。下面代码中顶点数据的坐标就是使用该坐标。

源码

CMakeLists.txt

cmake_minimum_required(VERSION 3.5)project(Day01 VERSION 0.1 LANGUAGES CXX)set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)// 注意添加OpenGL模块
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Widgets OpenGL)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets OpenGL)set(PROJECT_SOURCESmain.cppwidget.cppwidget.h
)add_executable(Day01${PROJECT_SOURCES}shader.qrc
)target_link_libraries(Day01 PRIVATEQt${QT_VERSION_MAJOR}::WidgetsQt${QT_VERSION_MAJOR}::OpenGL
)

widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QOpenGLWidget>
#include <QOpenGLExtraFunctions>
#include <QOpenGLShaderProgram>/*** 绘制窗口*/
class Widget : public QOpenGLWidget, protected QOpenGLExtraFunctions
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();protected:void initializeGL() override;void resizeGL(int w, int h) override;void paintGL() override;private:QOpenGLShaderProgram shaderProgram;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"Widget::Widget(QWidget *parent): QOpenGLWidget(parent)
{
}Widget::~Widget()
{
}void Widget::initializeGL()
{initializeOpenGLFunctions();glClearColor(0.0f, 0.0f, 0.0f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);shaderProgram.create();shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/gl.vert");shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/gl.frag");shaderProgram.link();// 开启着色器程序的pos属性shaderProgram.enableAttributeArray("pos");
}void Widget::resizeGL(int w, int h)
{glViewport(0, 0, w, h);
}void Widget::paintGL()
{shaderProgram.bind();GLfloat vertices[] = {0.0f, 0.5f, 0.0f,0.5f, -0.5f, 0.0f,-0.5f, -0.5f, 0.0f,};// 设置顶点数据的数据来源，从vertices数组中读取，且每三个数据作为一个顶点数据（vec3）shaderProgram.setAttributeArray("pos", vertices, 3);glDrawArrays(GL_TRIANGLES, 0, 3);
}

gl.vert

in vec3 pos;void main(void)
{gl_Position = vec4(pos, 1.0);
}

gl.frag

void main(void)
{gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

结果展示：

在此我们就绘制成功啦！赶紧动手试试吧，不用太在意里面的细节，后面会更详细的讲解。