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

最新推荐文章于 2023-10-22 08:00:00 发布
最新推荐文章于 2023-10-22 08:00:00 发布
阅读量688 收藏 5
点赞数
分类专栏： qt 文章标签： opengl qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_227/article/details/107220514
版权

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

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

chen_227
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
opengl纹理映射
06-11
这是一篇关于用opengl对六面体进行纹理映射的代码
opengl纹理映射（下）
04-04
注重讲解opengl纹理映射原理及实现细节，适合初学者攻读的文档
OpenGL（QT平台）学习与实战（十一）
m0_38144614的博客
10-18 900
纹理过滤 纹理坐标不依赖于分辨率(Resolution)，它可以是任意浮点值，所以OpenGL需要知道怎样将纹理像素映射到纹理坐标。当你有一个很大的物体但是纹理的分辨率很低的时候这就变得很重要了。OpenGL也有对于纹理过滤(Texture Filtering)的选项。纹理过滤有很多个选项，但是现在我们只讨论最重要的两种：GL_NEAREST和GL_LINEAR。 Texture Pixel也叫Texel，你可以想象你打开一张.jpg格式图片，不断放大你会发现它是由无数像素点组成的，这个点就是纹理像素；注
QT中学习Opengl---（旋转、平移、缩放）
比卡丘不皮的博客
02-17 3793
前言： 本文的代码是 LearnOpenGL 中对应代码，这里提供学习，大家喜欢的可去官方网站去看看: LearnOpenGL-CNhttps://learnopengl-cn.readthedocs.io/zh/latest/本章简单记录，使用旋转、平移、缩放。矩阵相关计算是基础东西，记得以前还问老师，学习高代有啥用。哈哈，一切都会用的。 缩放： 基本的矩阵变换： 这样，对应的x y z 对应放大对应倍数。 平移 基本的矩阵变换： 这样就是平移对应位置了。 旋转 沿...
OpenGL使用
pzs0221的专栏
12-10 848
一、qt使用opengl 1、创建widget //.h #include <QOpenGLWidget> #include <QOpenGLFuctions> #include <QOpenGLShaderProgram> #include <QOpenGLTexture> #include <QBasicTimer> class MainWidget : public QOpenglWidget, protected QOpenglFunct
OpenGL 鼠标拾取模型
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
06-23 2494
在我们的场景中，使用鼠标光标点击或“挑选”一个3d对象是很有用的。一种方法是从鼠标投射3d光线，通过相机，进入场景，然后检查光线是否与任何物体相交。这通常被称为光线投射。我们不是从局部空间中的网格开始，而是从视口空间中的2d鼠标光标位置开始。我们用逆矩阵来逆向进行变换，得到世界空间中的一条射线。首先在局部空间中有一个局部坐标(0.5,1,0)然后乘以model矩阵变换到世界空间坐标(10.5,1,-20,1)，这里增加了齐次坐标w=1。
OpenGL第十一讲——纹理映射
weixin_47524903的博客
01-14 7967
openGL纹理
NeHe OpenGL教程 （六）
Welcom to zougangx's blog
08-04 1060
第06课      纹理映射:在这一课里，我将教会你如何把纹理映射到立方体的六个面。    学习 texture map 纹理映射(贴图)有很多好处。比方说您想让一颗导弹飞过屏幕。根据前几课的知识，我们最可行的办法可能是很多个多边形来构建导弹的轮廓并加上有趣的颜色。使用纹理映射，您可以使用真实的导弹图像并让它飞过屏幕。您觉得哪个更好看？照片还是一大堆三角形和四边形？使用纹理
OpenGl 编程指南笔记 第九章：纹理映射 (texture mapping)
hitxiaya的专栏
10-26 4637
<br />本章你将学到纹理映射基础知识 纹理坐标 纹理对象及绑定 纹理过滤 mipmap和自动生成mipmap 纹理参数, 外包模式, 细节级别 纹理环境和纹理函数 Table of Contents1 概述2 预备知识： 纹理坐标3 使用纹理映射3.1 纹理对象3.2 纹理绑定3.3 删除纹理对象3.4 驻留纹理3.5 纹理优先级4 指定纹理4.1 2D 纹理4.2 1D 纹理4.3 3D 纹理4.4 Cube Map 纹理5 纹理过滤6 简单例程1 概述<br />概括的说， 纹理映射机制允许你将一个
OpenGL纹理映射
weixin_34223655的博客
01-08 203
GLfloat xrot; // X 旋转量GLfloat yrot; // Y 旋转量GLfloat zrot; // Z 旋转量GLuint text...
OpenGL 纹理映射
痞子龙3D编程
02-26 2330
原 文：Lesson 6: Texture Mapping译 者：CKER　　学习Texture Map纹理映射（贴图）有很多好处。比方说您想让一颗导弹飞过屏幕。根据前几课的知识，我们最可行的办法可能是很多个多边形来构建导弹的轮廓并加上有趣的颜色。使用纹理映射，您可以使用真实的导弹图像并让它飞过屏幕。您觉得哪个更好看？照片还是一大堆三角形和四边形？使用纹理映射的好处还不止是更好看，而且您的程序
openglexercise01_opengl_基础openGL图形坐标变换、纹理映射_
10-04
简单的opengl窗口，绘制了一个矩形并增添了纹理和坐标变换的操作选择。
opengl.rar_Opengl纹理_openGL机器人_opengl 机器人_opengl 运动_纹理映射
09-14
openGL实现机器人，可以自动运动，并且实现了纹理映射和光照
opengl纹理映射（上）
04-04
注重讲解opengl纹理映射原理及实现细节，适合初学者攻读
java实现OpenGL ES纹理映射的方法
09-03
主要介绍了java实现OpenGL ES纹理映射的方法,以实例形式较为详细的分析了纹理映射的实现技巧,需要的朋友可以参考下
OpenGL 混合
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
06-19 862
混合(Blending)通常是实现物体透明度的一种技术。透明就是说一个物体（或者其中的一部分）不是纯色(Solid Color)的，它的颜色是物体本身的颜色和它背后其它物体的颜色的不同强度结合。
Qt学习：使用OpenGL绘制3D图形
最新发布
XCJandLL的博客
10-22 3533
OpenGL是一个跨平台的、用来渲染3D图形的标准API,Qt对OpenGL提供了强大的支持。Qt4时代的QtOpenGL模块在Qt5中已经不再建议使用，OpenGL相关的类被移到了QtGUI模块。QtWidgets模块中的QOpenGLWidget类提供了一个可以渲染OpenGL图形的部件，通过该部件可以轻松地将OpenGL图形整合到Qt应用程序中。
纹理映射
08-06 963
做纹理的时候主要涉及到几方面的问题。一是加载外部的图片文件，我用OleLoadPicture。另外是通过纹理坐标得到纹理的颜色值，我用的是双线性插值。还有就是计算交点处的UV值了。等这些都完了后，用材质本身的颜色调制一下得到最终的颜色值。本文属Span Zhang（张友邦）原创，转载请注明出处。中国原创分形艺术、中国原创分形软件第一站
用OpenGL写一个纹理映射代码
03-31
下面是一个简单的用OpenGL实现纹理映射的代码： ```c++ #include <GL/glut.h> GLuint texture; // 纹理对象 void init() { // 加载纹理图片 texture = SOIL_load_OGL_texture( "texture.jpg", SOIL_LOAD_AUTO, SOIL_CREATE_NEW_ID, SOIL_FLAG_INVERT_Y ); // 设置纹理过滤方式 glBindTexture(GL_TEXTURE_2D, texture); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); // 启用纹理功能 glEnable(GL_TEXTURE_2D); } void display() { glClear(GL_COLOR_BUFFER_BIT); // 绘制一个矩形，并映射纹理 glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-1.0f, -1.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(1.0f, -1.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(1.0f, 1.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-1.0f, 1.0f); glEnd(); glutSwapBuffers(); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA); glutInitWindowSize(800, 600); glutCreateWindow("Texture Mapping"); init(); glutDisplayFunc(display); glutMainLoop(); return 0; } ``` 这段代码加载了一张名为"texture.jpg"的纹理图片，并在窗口中绘制了一个矩形，将纹理映射到矩形上。在初始化函数中，首先使用SOIL库加载纹理图片，并设置了纹理过滤方式。在绘制函数中，使用glTexCoord2f函数映射纹理坐标，glVertex2f函数绘制矩形顶点，最后调用glEnd函数结束绘制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值