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);
// 渲染Shader
vao.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;
};
运行下看看是不是连续旋转起来了,还平移了呢。