小白学opengl 第六课：纹理映射

作者: 技术喵 | 来源:发表于2019-07-10 07:32 被阅读0次

小白学opengl 第六课：纹理映射
OpenGL纹理坐标&&隧道案例（二）
OpenGL笔记八：2D纹理坐标解析
第七课：纹理滤波、光源和键盘控制
OpenGL ES学习笔记（三）：纹理相关概念
OpenGL之纹理映射Mipmap
OpenGL ES学习之纹理贴图
GLKit常用API解析
OpenGL ES GLKit 􏰼􏰜常用API解析
OpenGL ES基础知识回顾

终于我们可以把图片贴到我们的图形上了

0_1526631569328_QQ截图20180518161627.png

纹理坐标

当我们把图片贴到我们的正方形上，需要指定四个角的对应关系，这就是纹理坐标，通常，我们希望图片左下角对应正方形左下角，图片右上角对应正方形右上角，如果对应错了，图片就会上下颠倒，左右颠倒

0_1526631721822_cube1.png

把原来顶点颜色数组改为，顶点纹理坐标数组

//VAO数据，顶点与颜色
    VertexData1 vcs[] = {
        //正面
        {QVector3D(-0.5f, 0.0f, 0.5f), QVector2D(0.0f, 0.0f)},     //1
        {QVector3D(0.5f, 0.0f, 0.5f), QVector2D(1.0f, 0.0f)},      //2
        {QVector3D(0.5f, 1.0f, 0.5f), QVector2D(1.0f, 1.0f)},      //3
        {QVector3D(-0.5f, 1.0f, 0.5f), QVector2D(0.0f, 1.0f)},     //4
}

索引

//索引
    GLuint indices[] = { // 起始于0!
        0, 1, 2, 3,// face 1
}

常用步骤

//1 使用glGenBuffers函数生成一个缓冲ID    
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glGenBuffers(1, &EBO);
    //2 绑定vao
    glBindVertexArray(VAO);
    //3 使用glBindBuffer函数把新创建的缓冲绑定到GL_ARRAY_BUFFER缓冲类型上
    glBindBuffer(GL_ARRAY_BUFFER, VBO); //（绑定和解绑的顺序很重要，勿更改）
    //4 把用户定的义数据复制到当前绑定缓冲的函数
    glBufferData(GL_ARRAY_BUFFER, sizeof(vcs), vcs, GL_STATIC_DRAW);

    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

    //5 链接顶点属性
    //indx: 属性名
    //size: 顶点大小
    //type: 数据类型
    //normalized：数据被标准化
    //stride: 步长
    //ptr: 数据在缓冲中起始位置的偏移量
    glVertexAttribPointer(m_posAttr, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData1), (GLvoid*)0);
    glVertexAttribPointer(m_texcoordLocation, 2, GL_FLOAT, GL_FALSE, sizeof(VertexData1), (GLvoid*)(sizeof(QVector3D)));
//(GLvoid*)(sizeof(QVector3D)
    //6 解绑缓存着色器（绑定和解绑的顺序很重要，勿更改）
    glBindBuffer(GL_ARRAY_BUFFER, 0);

    //7 解绑VAO
    glBindVertexArray(0);

创建纹理

用一张图片生成纹理，我们使用QOpenGLTexture来很方便的实现

//使用图片的垂直镜像来创建纹理
    m_texture = new QOpenGLTexture(QImage(":/cube1.png").mirrored());

    //设置纹理过滤器的滤波方式
    //当图片缩小的比原始纹理小的时候 滤波方式为 mip层之间使用线性插值和使用线性过滤
    m_texture->setMinificationFilter(QOpenGLTexture::LinearMipMapLinear);
    //当图片放大的比原始纹理大的时候 滤波方式为 mip基层上使用线性过滤
    m_texture->setMagnificationFilter(QOpenGLTexture::Linear);

    //设置图片格式
    m_texture->setFormat(QOpenGLTexture::RGBFormat);
    //纹理绑定
    m_texture->bind();

    //使用纹理单元
    m_program->setUniformValue("texture", 0);

绘制

//纹理绑定
    m_texture->bind();

    //1 绑定vao
    glBindVertexArray(VAO);

    //2 开启顶点属性
    glEnableVertexAttribArray(0);
    //颜色值
    glEnableVertexAttribArray(2);

    //3 绘制四边形
    //24个索引值
//    glDrawArrays(GL_QUADS, 0, 24);
    glDrawElements(GL_QUADS, 24, GL_UNSIGNED_INT, (GLvoid*)0);

    //4 停用对应的顶点属性数组
    glDisableVertexAttribArray(2);
    glDisableVertexAttribArray(0);

    //5 解绑VAO
    glBindVertexArray(0);

    //纹理释放
    m_texture->release();

注意

启用2D纹理映射，否则显示白色

//启用2D纹理映射
    glEnable(GL_TEXTURE_2D);

启用纹理对应的属性，否则显示白色

glEnableVertexAttribArray(2);

六面纹理-单一

思考了一下，每个面对应一个图片，如果用索引，只有8个点，死活对应不上，只好放弃索引，重新使用24个点

struct VertexData
{
    QVector3D position;
    QVector3D color;
    QVector3D texture;
};
VertexData vc[] = {
        //正面
        {QVector3D(-0.5f, 0.0f, 0.5f), QVector3D(1.0f, 0.0f, 0.0f), QVector2D(0.0f, 0.0f)},     //1
        {QVector3D(0.5f, 0.0f, 0.5f),  QVector3D(0.0f, 1.0f, 0.0f), QVector2D(1.0f, 0.0f)},      //2
        {QVector3D(0.5f, 1.0f, 0.5f),  QVector3D(0.0f, 0.0f, 1.0f), QVector2D(1.0f, 1.0f)},      //3
        {QVector3D(-0.5f, 1.0f, 0.5f), QVector3D(1.0f, 1.0f, 1.0f), QVector2D(0.0f, 1.0f)},     //4

        //右面
        {QVector3D(0.5f, 0.0f, 0.5f),  QVector3D(0.0f, 1.0f, 0.0f), QVector2D(0.0f, 0.0f)},     //2
        {QVector3D(0.5f, 0.0f, -0.5f), QVector3D(1.0f, 1.0f, 0.0f), QVector2D(1.0f, 0.0f)},     //5
        {QVector3D(0.5f, 1.0f, -0.5f), QVector3D(0.0f, 1.0f, 1.0f), QVector2D(1.0f, 1.0f)},     //6
        {QVector3D(0.5f, 1.0f, 0.5f),  QVector3D(0.0f, 0.0f, 1.0f), QVector2D(0.0f, 1.0f)},     //3

        //左面
        {QVector3D(-0.5f, 0.0f, -0.5f),QVector3D(1.0f, 0.0f, 1.0f), QVector2D(0.0f, 0.0f)},     //8
        {QVector3D(-0.5f, 0.0f, 0.5f), QVector3D(1.0f, 0.0f, 0.0f), QVector2D(1.0f, 0.0f)},     //1
        {QVector3D(-0.5f, 1.0f, 0.5f), QVector3D(1.0f, 1.0f, 1.0f), QVector2D(1.0f, 1.0f)},     //4
        {QVector3D(-0.5f, 1.0f, -0.5f),QVector3D(1.0f, 0.6f, 0.0f), QVector2D(0.0f, 1.0f)},     //7

        //背面
        {QVector3D(0.5f, 0.0f, -0.5f),   QVector3D(1.0f, 1.0f, 0.0f), QVector2D(0.0f, 0.0f)},   //5
        {QVector3D(-0.5f, 0.0f, -0.5f),  QVector3D(1.0f, 0.0f, 1.0f), QVector2D(1.0f, 0.0f)},   //8
        {QVector3D(-0.5f, 1.0f, -0.5f),  QVector3D(1.0f, 0.6f, 0.0f), QVector2D(1.0f, 1.0f)},   //7
        {QVector3D(0.5f, 1.0f, -0.5f),   QVector3D(0.0f, 1.0f, 1.0f), QVector2D(0.0f, 1.0f)},   //6

        //顶面
        {QVector3D(-0.5f, 1.0f, 0.5f),   QVector3D(1.0f, 1.0f, 1.0f), QVector2D(0.0f, 0.0f)},   //4
        {QVector3D(0.5f, 1.0f, 0.5f),    QVector3D(0.0f, 0.0f, 1.0f), QVector2D(1.0f, 0.0f)},   //3
        {QVector3D(0.5f, 1.0f, -0.5f),   QVector3D(0.0f, 1.0f, 1.0f), QVector2D(1.0f, 1.0f)},   //6
        {QVector3D(-0.5f, 1.0f, -0.5f),  QVector3D(1.0f, 0.6f, 0.0f), QVector2D(0.0f, 1.0f)},   //7

        //底面        
        {QVector3D(-0.5f, 0.0f, -0.5f),  QVector3D(1.0f, 0.0f, 1.0f), QVector2D(0.0f, 0.0f)},   //8
        {QVector3D(0.5f, 0.0f, -0.5f),   QVector3D(1.0f, 1.0f, 0.0f), QVector2D(1.0f, 0.0f)},   //5
        {QVector3D(0.5f, 0.0f, 0.5f),    QVector3D(0.0f, 1.0f, 0.0f), QVector2D(1.0f, 1.0f)},   //2
        {QVector3D(-0.5f, 0.0f, 0.5f),   QVector3D(1.0f, 0.0f, 0.0f), QVector2D(0.0f, 1.0f)},   //1
    };

纹理坐标链接时候注意要跳过两个QVector3D大小

//5 链接顶点属性
    //indx: 属性名
    //size: 顶点大小
    //type: 数据类型
    //normalized：数据被标准化
    //stride: 步长
    //ptr: 数据在缓冲中起始位置的偏移量
    glVertexAttribPointer(m_posAttr, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData), (GLvoid*)0);    //(GLvoid*)0
    glVertexAttribPointer(m_texcoordLocation, 2, GL_FLOAT, GL_FALSE, sizeof(VertexData), (GLvoid*)(sizeof(QVector3D)*2));

使用 glDrawArrays(GL_QUADS, 0, 24);绘制

0_1526634110381_240b60a8-fed1-4579-9a2c-058fd780e40a-image.png

下次我们做个骰子出来

先说一个坑

同样的代码拿回家就不好用，研究发现，绘制时候没启用颜色顶点，所以一直是黑屏

//颜色值
    glEnableVertexAttribArray(1);

骰子的六面

要贴6次纹理，所以用指针数组, 管理全部纹理

声明数组

//纹理对象 数组
    QVector<QOpenGLTexture *> m_vTexture;

创建数组

for(int i=0; i<6; i++)
    {
        //使用图片的垂直镜像来创建纹理
        QString path = QString(":/cube%1.png").arg(QString::number(i+1));
        QOpenGLTexture *_texture = new QOpenGLTexture(QImage(path).mirrored());
        //设置纹理过滤器的滤波方式
        //当图片缩小的比原始纹理小的时候 滤波方式为 mip层之间使用线性插值和使用线性过滤
        _texture->setMinificationFilter(QOpenGLTexture::LinearMipMapLinear);
        //当图片放大的比原始纹理大的时候 滤波方式为 mip基层上使用线性过滤
        _texture->setMagnificationFilter(QOpenGLTexture::Linear);

        m_vTexture.append(_texture);
    }

绘制注意问题

开启顶点属性

//2 开启顶点属性
    glEnableVertexAttribArray(0);
    //颜色值
    glEnableVertexAttribArray(1);
    //纹理
    glEnableVertexAttribArray(2);

6个面要依次绘制一遍，绘制的起点也要依次往后移动

//纹理绑定
    for(int i=0; i<6; i++)
    {
        m_vTexture.at(i)->bind();
        //3 绘制四边形
        //24个索引值
        glDrawArrays(GL_QUADS, i*4, 4);
        //    glDrawElements(GL_QUADS, 24, GL_UNSIGNED_INT, (GLvoid*)0);

        m_vTexture.at(i)->release();
    }

停用顶点属性

//4 停用对应的顶点属性数组
    glDisableVertexAttribArray(2);
    glDisableVertexAttribArray(1);
    glDisableVertexAttribArray(0);

0_1526684517642_fcb07104-1ebe-4306-bcf9-3c21aa8793cb-image.png

同时显示颜色和纹理

gl_FragColor = col*texture2D(texture, v_texcoord);

0_1526684652591_a7df691b-cf8d-42df-a6eb-2cfbaf93e898-image.png

源代码

https://gitee.com/chen227/opengl_OpenGLFunctions6

小白学opengl 第六课：纹理映射
终于我们可以把图片贴到我们的图形上了纹理坐标当我们把图片贴到我们的正方形上，需要指定四个角的对应关系，这就是纹...
OpenGL纹理坐标&&隧道案例（二）
一.隧道案例效果二.纹理坐标纹理坐标主要是把图形映射到OpenGL中去，图形中每个顶点关联到对应的纹理坐标下，...
OpenGL笔记八：2D纹理坐标解析
前言期待您移步上篇：OpenGL笔记七：纹理常用API(二) 纹理采样为了能够把纹理映射(Map)到三角形上，...
第七课：纹理滤波、光源和键盘控制
纹理滤波在纹理映射的过程中，如果图元的大小不等于纹理的大小，OpenGL便会对纹理进行缩放以适应图元的尺寸。我们...
OpenGL ES学习笔记（三）：纹理相关概念
纹理映射到转换后的顶点纹理概念：纹理是一个用来保存图像颜色元素值的OpenGL ES缓存。应该尽量使用最小的...
OpenGL之纹理映射Mipmap
一、Mipmapping 1、Mipmapping是一个功能强大的纹理技术，它可以提高渲染的性能以及提升场景的视觉...
OpenGL ES学习之纹理贴图
OpenGL ES学习之纹理贴图基本原理启用纹理映射功能后，如果想把一副纹理应用到相应的几何图元，就必须告知渲...
GLKit常用API解析
GLKTextureInfo 创建OpenGL纹理信息 name: OpenGL上下文中纹理名称 target: ...
OpenGL ES GLKit 􏰼􏰜常用API解析
GLKTextureInfo创建OpenGL纹理信息 name : OpenGL上下文中纹理名称 target :...
OpenGL ES基础知识回顾
OpenGL ES基础知识回顾 GLSL着色器语言语言基础绘制方式纹理映射一、GLSL着色器语言渲染管线...