qt+opengl 实现纹理贴图,平移旋转,绘制三角形,方形

1 首先qt 已经封装了opengl,那么我们就可以直接用了,这里面有三个函数需要继承

virtual void initializeGL() override;
virtual void resizeGL(int w,int h) override;
virtual void paintGL() override;

这三个函数是实现opengl的重要函数。

2 我们需要写GLSL语句

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"                     // 为片段着色器指定一个纹理输出  
    "void main(){\n"
      "gl_Position =  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"  //得到输入的纹理     
      "void main()"
      "{\n"
         "FragColor = texture(texture1, TexCoord);\n" 
      "}\n";

上面的语句不懂的可以查询,或者私信问我。

3 我们设置点顶点,颜色和纹理

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     
    };                                                                        

这里面位置颜色是什么意思呢,举例 

                                              图1 

第一行位置: 0.5f,  0.5f, 0.0f  这是以窗口中心为0,0点,所绘制的图形在紫色位置,-x ==-1,  x ==1, -y ==-1, y==1。点在一半的位置

第一行颜色:1.0f, 0.0f, 0.0f ,意思是RGB,只显示红色。

第一行纹理:1.0f, 1.0f 是什么意思呢,看下面图说明

                                                                         图2 

图3

第一个图是位置,第二个是纹理,纹理坐标和顶点坐标大不相同,它的中心点(0,0)位于纹理图案的左下角,所以它的范围是(0-1)的,这里会取1,是因为希望得到完整的图案,取0.5也可以,最终结果的图案为原图长的一半,宽的一半。

到此我们在看图1 里面的紫色的点的纹理是什么呢?是不是就是1,1点呢??答案是的。

4 我们开始一步步写三角形

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;
};
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();




   //创建着色器程序

   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); //使能顶点纹理


   //解绑所有对象
   //vao.release();
   //vbo.release();


}
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);
 


   // 渲染Shader
   //vao.bind();
   //m_texture->bind();
   program->setUniformValue("texture1", 0);
   m_texture->bind(0);  

   //glDrawElements(GL_TRIANGLES, 4, GL_UNSIGNED_INT, 0);

   glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);//绘制纹理    //绘制3个定点,样式为三角形

}

这样我们就绘制了一个带纹理的图形

5 那如果我们想旋转怎么做呢?

我们修改下glsl语句,这里我们增加一个矩阵

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";

我们在修改响应的代码

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(0.4f,0.0,0.0);
    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("transform", matrix);

   //glDrawElements(GL_TRIANGLES, 4, GL_UNSIGNED_INT, 0);

   glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);//绘制纹理    //绘制3个定点,样式为三角形

}

这样我们纹理图就旋转了45°。

6 如果我们想绘制一个混合贴图需要怎么做呢?

我们继续修改glsl语句

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";

修改对应的代码

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)
{

}

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(0.4f,0.0,0.0);
    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();


}

这样我们就可以看到两个混合的贴图。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值