QT+OpenGL创建一个三角形并动态改变三角形颜色

QT+OpenGL基础:

1. QT+OpenGL创建一个三角形并动态改变三角形颜色
2. OpenGL中的VAO、VBO、EBO
3. QT+OpenGL 使用VAO、VBO、EBO结合绘制一个正方形
4. QT+OpenGL使用一组顶点绘制两个三角形
5. QT+OpenGL通过两个VAO来管理两个三角形
6. QT+Opengl使用两个Shader绘制两个不同颜色的三角形
7. QT+OpenGL从顶点着色器传递颜色数据给片元着色器
8. QT+OpenGL简单纹理贴图
9. QT+OpenGL纹理与颜色混合
10. Qt+OpenGL混合两个纹理，并可以改变纹理透明度

 

一、概述

　　需求：

　　　　1.使用QT+OpenGL创建一个三角形

　　　　2.默认三角形为黑色

　　　　3.可以通过点击按钮改变三角形颜色值（红绿蓝）

　　　　4.如下图所示

　　　　ps:这一篇用的是QT封装好的opengl相关帮助类，下一篇会用原生的来写。

　　　　

 

二、代码示例

　　1.让窗口继承QOpenGLWidget、QOpenGLFunctions、并重写initializeGL()、resizeGL(w,h)、paintGL()

class GLTriangleWindow : public QOpenGLWidget,protected QOpenGLFunctions
{
    Q_OBJECT

public:
    GLTriangleWindow(QWidget* parent = nullptr);
    ~GLTriangleWindow();
    
protected:
    virtual void initializeGL();//初始化OpenGL
    virtual void resizeGL(int w, int h);//ResizeWindow大小
    virtual void paintGL();//绘制OpenGL

 

　　2.使用QT创建一个窗口并放置三个QPushButton，并给QPushButton设置点击事件（信号槽）

this->resize(QSize(480, 480));
this->setWindowTitle("三角形");
this->setWindowIcon(QIcon("images/opencv.png"));
QHBoxLayout* hLayout = new QHBoxLayout(this);
QPushButton* btnRed = new QPushButton(this);
btnRed->setText("红色");
QPushButton* btnGreen = new QPushButton(this);
btnGreen->setText("绿色");
QPushButton* btnBlue = new QPushButton(this);
btnBlue->setText("蓝色");
hLayout->addWidget(btnRed);
hLayout->addWidget(btnGreen);
hLayout->addWidget(btnBlue);
hLayout->setAlignment(Qt::AlignTop);

connect(btnRed, &QPushButton::clicked, [=]() {
    changeTriangleColor(RED);
    });

connect(btnGreen, &QPushButton::clicked, [=]() {
    changeTriangleColor(GREEN);
    });

connect(btnBlue, &QPushButton::clicked, [=]() {
    changeTriangleColor(BLUE);
    });

　　3.

void GLTriangleWindow::initializeGL() {
    initializeOpenGLFunctions();

    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);//设置清屏颜色为红色
    glClear(GL_COLOR_BUFFER_BIT);

    //第一个
    shaderProgram.create();
    shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/QtForOpenCV4Tool/shader/triangle.vert");
    shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/QtForOpenCV4Tool/shader/triangle.frag");
    shaderProgram.link();

    //第二个
    shaderProgram2.create();
    shaderProgram2.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/QtForOpenCV4Tool/shader/triangle.vert");
    shaderProgram2.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/QtForOpenCV4Tool/shader/triangle.frag");
    shaderProgram2.link();

    //开启着色器属性pos属性
    shaderProgram.enableAttributeArray("pos");
    shaderProgram2.enableAttributeArray("pos");
}


void GLTriangleWindow::resizeGL(int w, int h) {
    glViewport(0, 0, w, h);
}
void GLTriangleWindow::paintGL() {
    shaderProgram.bind();
    //设置三角形的顶点
    GLfloat vertices[] = {
        0.0f, 0.5f, 0.0f,
        0.5f, -0.5f, 0.0f,
        -0.5f, -0.5f, 0.0f,
    };
    //设置顶点数据的来源
    shaderProgram.setAttributeArray("pos", vertices, 3);
    glDrawArrays(GL_TRIANGLES, 0, 3);

    //绘制第二个三角形
    shaderProgram2.bind();
    //设置三角形的顶点
    GLfloat vertices2[] = {
        0.5f, -0.5f, 0.0f,
        0.5f, -1.0f, 0.0f,
        1.0f, -0.5f, 0.0f,
    };
    //设置顶点数据的来源
    shaderProgram2.setAttributeArray("pos", vertices2, 3);
    glDrawArrays(GL_TRIANGLES, 0, 3);

}
void GLTriangleWindow::changeTriangleColor(TriColor mColor) {
    //makeCurrent();
    switch (mColor) {
    case RED:
        shaderProgram.bind();
        shaderProgram.setUniformValue("ourColor", 1.0f, 0.0f, 0.0f, 1.0f);
        shaderProgram2.bind();
        shaderProgram2.setUniformValue("ourColor", 1.0f, 0.0f, 0.0f, 1.0f);
        break;
    case GREEN:
        shaderProgram.bind();
        shaderProgram.setUniformValue("ourColor", 0.0f, 1.0f, 0.0f, 1.0f);
        shaderProgram2.bind();
        shaderProgram2.setUniformValue("ourColor", 0.0f, 1.0f, 0.0f, 1.0f);
        break;
    case BLUE:
        shaderProgram.bind();
        shaderProgram.setUniformValue("ourColor", 0.0f, 0.0f, 1.0f, 1.0f);
        shaderProgram2.bind();
        shaderProgram2.setUniformValue("ourColor", 0.0f, 0.0f, 1.0f, 1.0f);
        break;
    }
    glDrawArrays(GL_TRIANGLES, 0, 3);
    update();//opengl的渲染流程是一个巨大的状态机。这里调用update，会更新状态机
    //doneCurrent();
}