QT + opengl 让2d贴图动起来

1 qt+opengl 实现纹理贴图，平移旋转，绘制三角形，方形-CSDN博客

在上篇文章里面我已经学会了给贴图，并且旋转，那我们如何动态的显示2D的图片呢，那我们在qt里面是如何实现呢，定时器连续更新。

上代码在第一篇的代码上加上定时器，看看效果

static const char *vertexShaderSource ="#version 330\n""layout (location = 0) in vec3 aPos;\n"     // 位置变量的属性位置值为0"layout (location = 1) in vec3 aColor;\n"     // 颜色变量的属性位置值为1"layout (location = 2) in vec2 aTexCoord;\n"  //纹理变量的属性位置值为2"out vec3 ourColor;\n"                     // 为片段着色器指定一个颜色输出"out vec2 TexCoord;\n"                     // 为片段着色器指定一个纹理输出"uniform mat4 transform;\n""void main(){\n""gl_Position =  transform * vec4(aPos, 1.0);\n"    //顶点信息为4个值向量   // 注意我们如何把一个vec3作为vec4的构造器的参数"ourColor = aColor;\n"        // 输出颜色变量==输入颜色"TexCoord = aTexCoord;\n"    // 输出纹理变量==输入纹理"}\n";static const char *fragmentShaderSource ="#version 330\n""out vec4 FragColor;\n"     //输出颜色"in vec3 ourColor;\n"      //输入的颜色== vertexShaderSource（这里面的输入颜色）"in vec2 TexCoord;\n"      //输入的纹理== vertexShaderSource（这里面的输入纹理）"uniform sampler2D texture1;\n"  //得到输入的纹理"uniform sampler2D texture2;\n"  //得到输入的纹理"void main()""{\n""FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.7)* vec4(ourColor, 1.0);\n""}\n";myGlWidget::myGlWidget(QWidget *parent):QOpenGLWidget(parent), m_ebo(QOpenGLBuffer::IndexBuffer), vbo(QOpenGLBuffer::VertexBuffer)
{timer = new QTimer;timer->setInterval(50);connect(timer,&QTimer::timeout,this,[=]{m_angle +=30;m_x+=0.01;if(m_angle==360){m_angle = 0;}if(m_x>1){m_x=-0.6f;}update();qDebug()<<"1233"<<m_angle;});timer->start();
}myGlWidget::~myGlWidget()
{}
void myGlWidget::resizeGL(int w, int h)
{this->glViewport(0,0,w,h);                //定义视口区域
}
void myGlWidget::paintGL()
{this->glClearColor(0.1f,0.5f,0.7f,1.0f);  //设置清屏颜色this->glClear(GL_COLOR_BUFFER_BIT);QMatrix4x4 matrix;matrix.setToIdentity();matrix.translate(m_x,0.0,0.0);matrix.rotate(m_angle,0,0,1);matrix.scale(0.5);//    QMatrix4x4 matrix;
//    matrix.setToIdentity();
//    //matrix.translate(0, 0, 0);      // x往左移动0.5 y往上移动0.5(opengl中的y方向和屏幕方向是反的)
//    matrix.rotate(45, 0, 0, 1);
//    matrix.scale(0.5);// 渲染Shadervao.bind();//m_texture->bind();program->setUniformValue("texture1", 0);m_texture->bind(0);program->setUniformValue("texture2", 1);m_texture2->bind(1);program->setUniformValue("transform", matrix);//glDrawElements(GL_TRIANGLES, 4, GL_UNSIGNED_INT, 0);glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);//绘制纹理    //绘制3个定点,样式为三角形
}void myGlWidget::initializeGL()
{// 为当前环境初始化OpenGL函数initializeOpenGLFunctions();glClearColor(1.0f, 1.0f, 1.0f, 1.0f);    //设置背景色为白色//初始化纹理对象m_texture  = new QOpenGLTexture(QOpenGLTexture::Target2D);m_texture->setData(QImage(":/cube1.png").mirrored()); //加载砖块图片m_texture->setMinMagFilters(QOpenGLTexture::LinearMipMapLinear,QOpenGLTexture::Nearest);//设置缩小和放大的方式,缩小图片采用LinearMipMapLinear线性过滤,并使用多级渐远纹理邻近过滤,放大图片采用:Nearest邻近过滤m_texture->setWrapMode(QOpenGLTexture::DirectionS,QOpenGLTexture::Repeat);m_texture->setWrapMode(QOpenGLTexture::DirectionT,QOpenGLTexture::Repeat);//m_texture->allocateStorage();//   //初始化纹理对象m_texture2  = new QOpenGLTexture(QOpenGLTexture::Target2D);m_texture2->setData(QImage(":/0.png").mirrored()); //返回图片的镜像,设置为Y轴反向,因为在opengl的Y坐标中,0.0对应的是图片底部m_texture2->setMinMagFilters(QOpenGLTexture::LinearMipMapLinear,QOpenGLTexture::Nearest);//设置缩小和放大的方式,缩小图片采用LinearMipMapLinear线性过滤,并使用多级渐远纹理邻近过滤,放大图片采用:Nearest邻近过滤m_texture2->setWrapMode(QOpenGLTexture::DirectionS,QOpenGLTexture::Repeat);m_texture2->setWrapMode(QOpenGLTexture::DirectionT,QOpenGLTexture::Repeat);//m_texture2->allocateStorage();//创建着色器程序program = new QOpenGLShaderProgram;program->addShaderFromSourceCode(QOpenGLShader::Vertex,vertexShaderSource);program->addShaderFromSourceCode(QOpenGLShader::Fragment,fragmentShaderSource);program->link();program->bind();//激活Program对象//初始化VBO,将顶点数据存储到buffer中,等待VAO激活后才能释放
//   float vertices[] = {
//           // 位置              // 颜色             //纹理
//           // positions          // colors           // texture coords
//           0.5f,  0.5f, 0.0f,   1.0f, 0.0f, 0.0f,   1.0f, 1.0f, // top right
//           0.5f, -0.5f, 0.0f,   0.0f, 1.0f, 0.0f,   1.0f, 0.0f, // bottom right
//           -0.5f, -0.5f, 0.0f,   0.0f, 0.0f, 1.0f,   0.0f, 0.0f, // bottom left
//           -0.5f,  0.5f, 0.0f,   1.0f, 1.0f, 0.0f,   0.0f, 1.0f  // top left
//       };float vertices[] = {//     ---- 位置 ----       ---- 颜色 ----     - 纹理坐标 --1.0f,  -1.0f, 1.0f, 1.0f, 0.0f, 0.0f,   0.0f, 1.0f,   // 右上1.0f, -1.0f, 1.0f,   0.0f, 1.0f, 0.0f,   1.0f, 1.0f,   // 右下-1.0f, 1.0f, 1.0f,    0.0f, 0.0f, 1.0f,   0.0f, 0.0f,   // 左下1.0f,  1.0f, 1.0f,    1.0f, 1.0f, 0.0f,   1.0f, 0.0f    // 左上};vbo.create();vbo.bind();              //绑定到当前的OpenGL上下文,vbo.allocate(vertices, sizeof(vertices));vbo.setUsagePattern(QOpenGLBuffer::StaticDraw);  //设置为一次修改，多次使用//初始化VAO,设置顶点数据状态(顶点，法线，纹理坐标等)vao.create();vao.bind();// void setAttributeBuffer(int location, GLenum type, int offset, int tupleSize, int stride = 0);program->setAttributeBuffer(0, GL_FLOAT, 0,                  3, 8 * sizeof(float));   //设置aPos顶点属性program->setAttributeBuffer(1, GL_FLOAT, 3 * sizeof(float),  3, 8 * sizeof(float));   //设置aColor顶点颜色program->setAttributeBuffer(2, GL_FLOAT, 6 * sizeof(float),  2, 8 * sizeof(float));   //设置aColor顶点颜色//offset:第一个数据的偏移量//tupleSize:一个数据有多少个元素,比如位置为xyz,颜色为rgb,所以是3//stride:步长,下个数据距离当前数据的之间距离,比如右下位置和左下位置之间间隔了:3个xyz值+3个rgb值,所以填入 6 * sizeof(float)program->enableAttributeArray(0); //使能aPos顶点属性program->enableAttributeArray(1); //使能aColor顶点颜色program->enableAttributeArray(2); //使能aColor顶点颜色//解绑所有对象vao.release();vbo.release();}

class myGlWidget : public QOpenGLWidget,public QOpenGLExtraFunctions
{
public:myGlWidget(QWidget *parent);~myGlWidget();
protected:virtual void initializeGL() override;virtual void resizeGL(int w,int h) override;virtual void paintGL() override;QVector<float> vertices;QOpenGLShaderProgram* program;QOpenGLBuffer vbo;QOpenGLVertexArrayObject vao;QOpenGLTexture* m_texture;QOpenGLTexture* m_texture2;QOpenGLBuffer m_ebo;QTimer* timer;float m_angle= 0.0f;float m_x=0.0f;float m_y=0.0f;
};

运行下看看是不是连续旋转起来了，还平移了呢。