QT之OpenGL 2D纹理使用

愤怒的小黄鸭

已于 2023-03-01 10:56:42 修改

阅读量1.1k

点赞数

分类专栏： # OpenGL 文章标签： qt c++ OpenGL

于 2022-09-25 18:38:07 首次发布

本文链接：https://blog.csdn.net/weixin_41111116/article/details/127040669

版权

OpenGL 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

QT之OpenGL 2D纹理使用

1. 基础概念
2. 纹理加载
3. 纹理环绕方式
4. 纹理过滤
- 4.1 多级渐远过滤
5. demo效果演示
6. 源码
参考：

1. 基础概念

纹理通常用来给物体添加细节，它可以是2D图片(甚至也有1D和3D的纹理)。

1.1 纹理坐标

纹理坐标是用来表述纹理位置的坐标，它的范围是(0,0)到(1,1)。示例如下：

float texCoords[] = {
    0.0f, 0.0f, // 左下角
    1.0f, 0.0f, // 右下角
    0.5f, 1.0f // 上中
};

这个纹理坐标是对应的原始纹理为：
在这里插入图片描述
根据纹理坐标采样后的输出如下：

注:

在实际过程中，纹理坐标的设置范围可以超过(0,0)到(1,1)，而超过的部分则会使用到纹理环绕方式处理稍后说明

1.2 纹理像素

纹理像素与屏幕物理像素并不是一一对应的关系，如下所示：
在这里插入图片描述
将其放大如下：

当一个纹理产生后，其纹理像素就固定了，上面的图片其纹理像素是342*78

1.3 纹理单元

纹理单元是用来给shader中设置多个纹理使用的。在shader中用uniform来声明一个sampler2D类型变量，这就表示在shader中给纹理采样器(sampler2D)分配了一个位置，这个位置就是纹理单元。

OpenGL至少保证有16个纹理单元供你使用，也就是说你可以激活从GL_TEXTURE0到GL_TEXTRUE15。它们都是按顺序定义的，所以我们也可以通过GL_TEXTURE0 + 8的方式获得GL_TEXTURE8，这在当我们需要循环一些纹理单元的时候会很有用。

2. 纹理加载

在QT中对OpenGL的纹理有一个QOpenGLTexture类。可以使用QOpenGLTexture对纹理进行加载，其使用步骤如下：

加载纹理单元
设置shader中采样器的纹理单元
绑定纹理单元
解绑纹理单元

代码示例如下：

// 设置纹理，并将y轴进行镜像
m_texture = std::make_unique<QOpenGLTexture>(QImage(":/images/images/small.png").mirrored());

// 设置纹理单元
m_shaderProgram.bind();
m_shaderProgram.setUniformValue("texture", 0);
m_shaderProgram.release();

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

// 解绑纹理单元
m_texture->release();

3. 纹理环绕方式

纹理环绕方式的产生是在纹理坐标超过(0,0)到(1,1)时，对超出范围的处理方式，主要由以下四种方式：

GL_REPEAT 对纹理的默认行为。重复纹理图像。
GL_MIRRORED_REPEAT 和GL_REPEAT一样，但每次重复图片是镜像放置的。
GL_CLAMP_TO_EDGE 纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。
GL_CLAMP_TO_BORDER 超出的坐标为用户指定的边缘颜色。

4. 纹理过滤

从拉伸或者压缩的纹理图片中采样出来像素颜色的过程叫做纹理过滤
纹理过滤是用来处理放大或缩小时，不同纹理像素之间最终显示的一种方式。
最长常见的是GL_NEAREST（也叫邻近过滤，Nearest Neighbor Filtering）和
GL_LINEAR（也叫线性过滤，(Bi)linear Filtering），两者的区别如下

GL_NEAREST是其就近的值作为最终的显示值。
在这里插入图片描述
GL_LINEAR是对采样点附近的值进行混合处理，最终输出一个混合后的值，使得颜色过渡更柔和

两者产生的效果如下：

4.1 多级渐远过滤

多级渐远纹理(Mipmap)，它简单来说就是一系列的纹理图像，后一个纹理图像是前一个的二分之一。多级渐远纹理背后的理念很简单：距观察者的距离超过一定的阈值，OpenGL会使用不同的多级渐远纹理，即最适合物体的距离的那个。由于距离远，解析度不高也不会被用户注意到。同时，多级渐远纹理另一加分之处是它的性能非常好。

示例图：
在这里插入图片描述
多级渐远过滤的方式：