七、OpenGL中Texture(纹理)的理论与应用

原创

已于 2025-03-19 08:51:21 修改 · 1.8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#OpenGL #c++

于 2025-03-18 21:53:15 首次发布

文章目录

一、纹理的基本概念

在 OpenGL 中，纹理通常是一个 2D 图像（但也可以是 1D、3D、立方体贴图等）。它会被映射到 3D 物体的表面，而每个顶点都通过纹理坐标（Texture Coordinates）来确定如何从纹理图像上取颜色。

常见的 OpenGL 纹理类型：
在这里插入图片描述

二、什么是纹理坐标

在 OpenGL 中，纹理坐标（Texture Coordinates）用于在 3D 模型上正确映射 2D 纹理图像。它们定义了纹理图片的哪一部分应该映射到一个 3D 物体的某个顶点上。

1. 纹理坐标的表示
纹理坐标通常使用归一化坐标系（Normalized Coordinates），即 (s, t) 或 (u, v)，它们的取值范围通常是 [0,1]，但 OpenGL 也支持超出 [0,1] 的坐标（用于平铺或重复纹理）。

s 或 u：表示纹理的水平方向（X 轴）

t 或 v：表示纹理的垂直方向（Y 轴）

例如：

(0,0) 表示纹理的左下角

(1,0) 表示纹理的右下角

(0,1) 表示纹理的左上角

(1,1) 表示纹理的右上角

2. 纹理坐标与顶点关联
在 OpenGL 中，纹理坐标通常与顶点一起传递给着色器。例如，一个包含四个顶点的四边形（Quad），可以设置如下的纹理坐标：

float vertices[] = {
   
   
    // 位置（x, y）     // 纹理坐标（s, t）
    -0.5f, -0.5f,       0.0f, 0.0f,  // 左下角
     0.5f, -0.5f,       1.0f, 0.0f,  // 右下角
     0.5f,  0.5f,       1.0f, 1.0f,  // 右上角
    -0.5f,  0.5f,       0.0f, 1.0f   // 左上角
};

3. 纹理坐标在着色器中的使用
在 OpenGL 着色器中，片段着色器（Fragment Shader）会使用纹理坐标从纹理图片中采样颜色：

#version 330 core
in vec2 TexCoord;      // 从顶点着色器传入的纹理坐标
uniform sampler2D ourTexture;  // 纹理对象
out vec4 FragColor;

void main()
{
   
   
    FragColor = texture(ourTexture, TexCoord);  // 采样纹理颜色
}

4. 纹理坐标的超出范围处理
如果纹理坐标超出了 [0,1]，OpenGL 提供了多种纹理环绕模式（Wrapping Mode）：

GL_REPEAT（默认）：重复纹理

GL_MIRRORED_REPEAT：镜像重复

GL_CLAMP_TO_EDGE：拉伸边缘

GL_CLAMP_TO_BORDER：使用边界颜色填充

示例代码：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

5. 纹理坐标的变换
如果希望对纹理进行旋转、缩放或偏移，可以使用纹理矩阵（Texture Matrix）或在着色器中对 TexCoord 进行变换。例如：

vec2 newTexCoord = TexCoord * 2.0;  // 放大两倍

三、为什么要引入纹理坐标

在 OpenGL 中，纹理坐标（Texture Coordinates）的引入是为了在 3D 模型表面正确映射 2D 纹理，从而实现更真实的渲染效果。

1. 解决 2D 纹理映射到 3D 物体的问题
在 3D 渲染中，我们的模型通常由顶点（Vertex）组成，而纹理（Texture）是一个 2D 图像。要让 2D 纹理正确地贴在 3D 物体上，就需要知道哪个像素应该出现在模型的哪个位置。引入纹理坐标 (s, t)（或 u, v），就是为了建立 3D 空间顶点与 2D 纹理像素之间的映射关系。

示例：假设有一个四边形（Quad），我们想把一个 100×120的图片贴到它上面：

没有纹理坐标 ➝ OpenGL 不知道如何匹配四边形上的顶点和纹理上的像素

有纹理坐标 ➝ 每个顶点都能对应到纹理上的某个点，形成正确的纹理映射

在这里插入图片描述

纹理其实就是贴图系统，遵循UV坐标

如何将左边的图片的像素拷贝到右边的三角形内部呢？首先定义三角形会先定义其三个顶点，如图所示三角形的三个顶点的UV坐标分别是(0,0)、(0.5, 1)、(1, 0)。然后通过差值计算能够得到三角形内部的任意像素点的UV坐标。然后通过UV坐标再乘以左边图像的长或宽就能锁定到该图像上的某一个像素点。然后把这个像素点的颜色拷贝到右边的三角形内部的像素点上，然后就得到了三角形的每个像素点的颜色。

2. 允许更灵活的贴图方式
通过调整纹理坐标，可以实现不同的纹理效果：

缩放（Scaling）：通过 TexCoord * scale 调整纹理大小

旋转（Rotation）：应用变换矩阵实现纹理旋转

平移（Translation）：通过 TexCoord + offset 让纹理滑动

示例：

vec2 newTexCoord = TexCoord * 2.0;  // 纹理缩放 2 倍

3. 允许不同类型的纹理映射
纹理坐标的引入让我们可以定义多种不同的纹理映射方式：

平面映射（Planar Mapping）：适用于地板、墙壁等

球面映射（Spherical Mapping）：适用于球体

立方体映射（Cube Mapping）：适用于天空盒（Skybox）和环境贴图（Environment Mapping）

UV 展开（UV Unwrapping）：用于复杂 3D 模型（例如角色建模）

例如，一个 3D 角色模型，使用 UV 展开后，每个部分都可以被正确映射到纹理上，而不会导致拉伸或变形。

4. 提高渲染效率
如果没有纹理坐标，每个像素可能都需要进行复杂的计算来决定它应该显示哪部分纹理。而引入纹理坐标后，GPU 可以高效地进行纹理采样，提高渲染效率。
OpenGL 直接使用 texture() 函数，从纹理坐标查找对应的颜色值：

vec4 color = texture(myTexture, TexCoord);

这样可以充分利用 GPU 的纹理缓存和优化，加速渲染。

5. 处理超出范围的纹理映射
如果没有纹理坐标，纹理无法正确处理超出 [0,1] 范围的情况。而 OpenGL 提供了多种环绕模式（Wrapping Mode）让我们控制超出的纹理：

GL_REPEAT：纹理重复

GL_MIRRORED_REPEAT：镜像重复

GL_CLAMP_TO_EDGE：拉伸到边缘

GL_CLAMP_TO_BORDER：使用边界颜色填充

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

这些功能都依赖于纹理坐标的定义。

四、纹理的过滤模式

如果经过uwidth以及vheight计算出来坐标为（12.3,15.8）那么就要有一种方式进行取整，从而能够采样到图片上面的一个像素点的颜色信息。
在这里插入图片描述
在 OpenGL 中，GL_NEAREST（最近邻采样）是一种纹理过滤模式，用于决定在纹理映射过程中如何从纹理中获取颜色值。当使用 GL_NEAREST 模式时，OpenGL 会选择距离纹理坐标最近的那个纹理像素（texel）的颜色值，直接作为片段的颜色输出。

特点：

性能高：由于仅需简单地选择最接近的像素，无需进行复杂的计算，因此这种方式处理速度快。

像素化效果：在放大纹理时，可能会出现明显的锯齿状边缘或马赛克效果。

适用场景：适用于需要保留像素化风格的场景，如某些复古风格的游戏或应用。

设置方法：
可以通过以下代码为纹理设置放大和缩小时使用 GL_NEAREST 过滤模式：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); // 放大过滤
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); // 缩小过滤

需要注意的是，GL_NEAREST 过滤模式在放大纹理时可能会导致图像出现明显的像素化效果。如果希望获得更平滑的图像效果，可以考虑使用 GL_LINEAR（线性过滤）模式。

在这里插入图片描述
在 OpenGL 中，GL_LINEAR（线性插值）是一种常用的纹理过滤模式，用于在纹理映射过程中，通过对采样点周围的多个纹理像素（texel）进行加权平均计算，来获取更平滑的颜色过渡效果。

工作原理：
当需要从纹理中采样颜色时，GL_LINEAR 模式会考虑采样点周围最近的四个纹理像素，并对这四个像素的颜色值进行加权平均，以得到平滑过渡的颜色。具体而言，距离采样点越近的像素，其颜色对最终结果的贡献越大。

特点：

平滑过渡：由于采用了加权平均的方式，GL_LINEAR 能够有效减少锯齿和像素化现象，使纹理在放大或缩小时呈现出更平滑的过渡效果。

计算开销：相比于 GL_NEAREST（最近邻采样），GL_LINEAR 需要对多个像素进行插值计算，因此在性能上可能略有影响，但在现代硬件上，这种开销通常可以忽略不计。

适用场景：
GL_LINEAR 适用于对视觉质量要求较高的应用场景，例如高清图形渲染、照片编辑软件、3D 建模等。对于需要平滑过渡、细节丰富的纹理，GL_LINEAR 通常能提供更好的视觉效果。

设置方法：
可以通过以下代码为纹理设置放大和缩小时使用 GL_LINEAR 过滤模式：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); // 放大过滤
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); // 缩小过滤

注意事项：
虽然 GL_LINEAR 能够提供更平滑的纹理效果，但在某些情况下，可能会引入轻微的模糊，特别是在大幅度缩放时。这种模糊是由于插值过程混合了多个像素的颜色造成的。因此，需要根据具体应用场景选择合适的过滤模式，以在性能和视觉效果之间取得平衡。

在这里插入图片描述

五、纹理接口预览

在C++当中创建Texture，并且绑定到系统当中进行渲染以及数据传递。
在这里插入图片描述
在FragmentShader当中进行调取，并且利用纹理坐标找到像素，对输出颜色赋值

其实OpenGL给我们提供了很多的纹理Texture锚定点，比如GL_TEXTURE0-GL_TEXTURE15。
为什么我们需要这么多的Texture锚定点呢？请看下图：
在这里插入图片描述
在 OpenGL 中使用纹理（Texture）通常包括以下几个关键步骤：
1. 创建纹理对象
首先，需要生成一个纹理对象并获取其ID。

GLuint textureID;
glGenTextures(1, &textureID);

最低0.47元/天解锁文章