13. OPenGL与QT界面元素交互控制图形渲染

1. 说明：

前面文章中讲到的 OPenGL 渲染都是在页面加载完成即立刻渲染的，如果向控制图形渲染的时间，可以在QT界面中添加一些元素来进行控制。此时需要用到OPenGL当中的makeCurrent(),update(),doneCurrent()函数。
效果展示：

opengl与qt交互

2. 步骤一：

在myopenglwidget.h文件中添加一个枚举，放置要绘制的图形类型，同时声明三个函数，分别为drawShape()，clearGraphic()，setWireFrame()，方便主界面上的元素调用，相应代码如下：
myopenglwidget.h：

#ifndef MYOPENGLWIDGET_H
#define MYOPENGLWIDGET_H#include <QObject>
#include <QWidget>#include <QOpenGLWidget>
#include <QOpenGLFunctions_3_3_Core>class MyOpenGLWidget : public QOpenGLWidget,QOpenGLFunctions_3_3_Core
{Q_OBJECT
public://添加图形类型枚举enum Shape{None,Rect,Circle,Triangle};explicit MyOpenGLWidget(QWidget *parent = nullptr);//添加三个辅助函数void drawShape(Shape shape);void clearGraphic();void setWireFrame(bool wireFrame);protected:virtual void initializeGL() override;virtual void resizeGL(int w, int h) override;virtual void paintGL() override;signals:private://定义一个中间变量Shape m_shape;
};
#endif // MYOPENGLWIDGET_H

3. 步骤二：

对上面的三个辅助函数进行设计，其中每触发一个函数，都应该让OPenGL重新绘制，此时应调用 update() 函数，而在更新视图之前，需要记录当前的视图是什么样的，所以还需要在此之前调用 makeCurrent() 函数，视图更新结束后，需要告知OPenGL已经绘制完毕，此时需要调用 doneCurrent() 函数，相应代码如下：
myopenglwidget.cpp：

#include "myopenglwidget.h"unsigned int VBO,VAO;
//添加一个索引控制器
unsigned int EBO;//定义一个全局的着色器控制器
unsigned int shaderProgram;float vertices[] = {-0.5f,-0.5f,0.0f,0.5f,-0.5f,0.0f,0.0f,0.5f,0.0f
};//使用4个顶点数据绘制两个三角形
float vertices2[] = {0.5f,0.5f,0.0f,0.5f,-0.5f,0.0f,-0.5f,-0.5f,0.0f,-0.5f,0.5f,0.0f
};//添加索引数据
unsigned int indices[]={0,1,3,1,2,3
};MyOpenGLWidget::MyOpenGLWidget(QWidget *parent) :  QOpenGLWidget(parent)
{}
//绘制图形辅助函数
void MyOpenGLWidget::drawShape(MyOpenGLWidget::Shape shape)
{makeCurrent();//记录当前视图m_shape = shape;update();//视图更新doneCurrent();//结束视图更新
}
//清空函数
void MyOpenGLWidget::clearGraphic()
{makeCurrent();drawShape(MyOpenGLWidget::None);makeCurrent();glPolygonMode(GL_FRONT_AND_BACK,GL_FILL);update();doneCurrent();
}
//设置线框模式函数
void MyOpenGLWidget::setWireFrame(bool wireFrame)
{makeCurrent();if(wireFrame){glPolygonMode(GL_FRONT_AND_BACK,GL_LINE);//以线框模式绘制图形}else{glPolygonMode(GL_FRONT_AND_BACK,GL_FILL);//以填充模式绘制图形}update();doneCurrent();
}void MyOpenGLWidget::initializeGL()
{initializeOpenGLFunctions();shaderProgram = glCreateProgram();//void glGenVertexArrays(GLsizei n, GLuint *arrays)生成顶点数组对象名称// n: 要产生的VAO对象的数量// arrays: 存放产生的VAO对象的名称glGenVertexArrays(1,&VAO);// void glGenBuffers(GLsizei n,GLuint *buffers)生成顶点缓冲对象// n: 要产生的VBO对象的数量// arrays: 存放产生的VBO对象的名称glGenBuffers(1,&VBO);//初始化索引器glGenBuffers(1,&EBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,EBO);glBufferData(GL_ELEMENT_ARRAY_BUFFER,sizeof (indices),indices,GL_STATIC_DRAW);//绑定VAO和VBOglBindVertexArray(VAO);glBindBuffer(GL_ARRAY_BUFFER,VBO);//在VBO中存入顶点数据glBufferData(GL_ARRAY_BUFFER,sizeof (vertices2),vertices2,GL_STATIC_DRAW);//告诉VAO怎么在VBO中拿数据glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,3*sizeof (float),(void*)0);//开启第一个VAOglEnableVertexAttribArray(0);//用完之后解除绑定(信息已经被记录下来了)glBindBuffer(GL_ARRAY_BUFFER,0);glBindVertexArray(0);
}void MyOpenGLWidget::resizeGL(int w, int h)
{Q_UNUSED(w);Q_UNUSED(h);}void MyOpenGLWidget::paintGL()
{glClearColor(0.5f,0.9f,0.4f,1.0f);glClear(GL_COLOR_BUFFER_BIT);//在渲染前只需开启对应的VAO即可glBindVertexArray(VAO);//switch判断 m_shape 的类型，进行不同图形的绘制switch (m_shape) {case Rect:glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,&indices);break;default:break;}
}

4. 步骤三：

在主界面中添加三个按钮，分别用来绘制，清空，设置线框模式，并相应其clicked信号，调用对应的函数即可，相应代码如下：
myopenglwidget.h：

#ifndef LEARNOPENGL_H
#define LEARNOPENGL_H#include <QMainWindow>QT_BEGIN_NAMESPACE
namespace Ui { class LearnOpenGL; }
QT_END_NAMESPACEclass LearnOpenGL : public QMainWindow
{Q_OBJECTpublic:LearnOpenGL(QMainWindow *parent = nullptr);~LearnOpenGL();private slots://三个按钮的槽函数void on_btn_drawRect_clicked();void on_btn_Clear_clicked();void on_btn_setFrame_clicked();private:Ui::LearnOpenGL *ui;
};
#endif // LEARNOPENGL_H

myopenglwidget.cpp：

#include "learnopengl.h"
#include "ui_learnopengl.h"LearnOpenGL::LearnOpenGL(QMainWindow *parent): QMainWindow(parent), ui(new Ui::LearnOpenGL)
{ui->setupUi(this);setCentralWidget(ui->openGLWidget);}LearnOpenGL::~LearnOpenGL()
{delete ui;
}void LearnOpenGL::on_btn_drawRect_clicked()
{ui->openGLWidget->drawShape(MyOpenGLWidget::Rect);//调用绘制图形
}void LearnOpenGL::on_btn_Clear_clicked()
{ui->openGLWidget->clearGraphic();//调用清空图形
}bool frame = true;
void LearnOpenGL::on_btn_setFrame_clicked()
{ui->openGLWidget->setWireFrame(frame);//调用线框模式frame = !frame;
}