前面我们可以通过顶点属性（颜色+位置）和着色器来增加图形的细节，但这样做的话会产生额外开销（添加更多顶点）。纹理（Texture）便派上用场。

本文将简要提一下纹理的工作方式，以及如何在OpenGL中使用纹理。

纹理

纹理通常是一个2D图片，它不仅用来添加物体的细节，也可以用来存储大量的数据（以发送到着色器上）。

接下来，我们尝试将之前的三角形贴上一张砖墙图片：

纹理映射

为了能够把纹理映射(Map)到三角形上，需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样。之后在图形的其它片段上进行片段插值(Fragment Interpolation)。

纹理坐标(s, t, r)对应(x, y, z)，但范围均在[0, 1]之间。接下来将纹理坐标映射到三角形上：

这样就得到了三个顶点的纹理坐标：

float texCoords[] = {
    1.0f, 0.0f,	// 右下
    0.0f, 0.0f, // 左下
    0.5f, 1.0f	// 顶部
}

接下来顶点坐标会被传递至顶点着色器中，然后被传至片段着色器中，进行插值。

纹理环绕方式

如果将纹理坐标设置为其范围之外，OpenGL默认的行为是重复这个纹理图像，但还有其他选择：

它们的效果如图：

可以通过glTexParameter*来进行相关配置：

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

第一个参数指定了纹理类型；第二个参数需要指定设置什么选项，并应用于哪个轴；第三个参数就是上边提到的环绕方式。

PS：如果选项是GL_TEXTURE_BORDER_COLOR，还需要指定一个边缘颜色，且使用fv函数后缀：

float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);

纹理过滤方式

嗨嗨嗨，学过GAMES101的有福了，这里很容易理解。

纹理过小

物体很大纹理分辨率过小，会产生严重的走样现象。OpenGL给出了纹理过滤（Texture Filtering）的解决方法，有很多个选项，这里讨论最重要的两种：GL_NEAREST和GL_LINEAR：

• GL_NEAREST：邻近过滤(Nearest Neighbor Filtering)，是OpenGL的默认纹理过滤方式。OpenGL会选择最接近像素中心的纹素作为结果。

• GL_LINEAR：线性过滤((Bi)linear Filtering)，基于像素中心坐标附近的纹素，利用双线性插值的方法计算出混合后的结果。

它俩的效果如下：

可以通过glTexParameter*来进行相关配置：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

纹理过大

对于纹理过大的情况，如果物体离我们太远（3D），那么很小的像素就不知道要取那块纹素的值了，造成走样现象，且浪费资源。

OpenGL使用一种叫做 多级渐远纹理(Mipmap) 的方法来解决这一问题，OpenGL会根据观察者离物体的距离选用最合适的Mipmap。一张Mipmap如下：

不用担心是否要手搓Mipmap，因为OpenGL的glGenerateMipmaps函数会在创建完一个纹理后帮我们自动生成。

level间处理

在切换Mipmap的渲染级别(level)时，会产生突兀的边界，因此得要缓解这种情况。OpenGL一共提供了4种解决方法：

可以通过glTexParameteri设置过滤方式：

// 纹理过大，要缩小
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
// 纹理过小，要放大
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

注意上方的对应关系，例如要放大(MAG_FILTER)却选择了缩小的操作(LINEAR_MIPMAP_LINEAR)，就会报错：GL_INVALID_ENUM。

加载纹理

可以用stb_image.h库进行图像加载。首先在这里获取到头文件，加入工程。然后创建一个新的C++文件，输入以下代码：

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

通过预定义，这个头文件已经变成了一个.cpp文件了。

接下来，使用stbi_load()加载下图：

// 加载纹理图片
int texWidth, texHeight, texNrCHannels;
unsigned char* data = stbi_load("./images/container.jpg", &texWidth, &texHeight, &texNrCHannels, 0);

该函数接受一个图像文件的位置作为输入，然后读取它的宽度、高度和颜色通道的个数，填充到后三个变量中。

生成纹理

纹理也是使用ID引用的，创建一个纹理对象的代码如下：

unsigned int texture;
glGenTextures(1, &texture);

glGenTextures()第一个参数是生成纹理的数量，第二个参数是纹理id(数组)。

接下来使用glBindTexture()函数进行纹理绑定：

glBindTexture(GL_TEXTURE_2D, texture);

然后为该纹理对象配置环绕和过滤的方式：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);   
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

然后使用glTexImage2D()函数将前面读取的图片生成纹理：

// 生成纹理和Mipmap
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texWidth, texHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

对于glTexImage2D()函数，它的参数列表如下：

• 1：要处理的纹理目标(Target)，这里是绑定好的GL_TEXTURE_2D。
• 2：为纹理手动指定Mipmap级别。0为基本级别。
• 3：希望把纹理存储为什么格式。图像只有RGB值，因此储存为RGB。
• 4，5：纹理的宽度，高度。
• 6：必须设为0，历史遗留问题。
• 7，8：源图的格式和数据类型。用RGB值加载这个图像，将它们存储为char(byte)数组。
• 9：真正的图像数据data

当前的纹理对象的Mipmap只有基本级别（Base-Level），如果要使用Mipmap，得用glGenerateMipmap()来自动生成需要的Mipmap。

用完data后，记得使用如下代码释放图像内存：

stbi_image_free(data);

应用纹理

这里直接将前面矩形的顶点数据搬过来了，顺便进行纹理映射，给顶点数据加上纹理坐标：

// 定义顶点和索引信息
float vertices[] = {
    // 位置              // 颜色            // 纹理坐标
    0.5f,  0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  1.0f, 1.0f,  // 右上
    0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  1.0f, 0.0f,  // 右下
   -0.5f, -0.5f, 0.0f,  0.0f, 0.0f, 1.0f,  0.0f, 0.0f,  // 左下
   -0.0f,  0.5f, 0.0f,  1.0f, 1.0f, 0.0f   0.0f, 1.0f   // 顶部
};
unsigned int indices[] = {
    // 注意索引从0开始! 
    0, 1, 3,
    1, 2, 3
};

顶点属性的内存分布如图，因此我们得改变顶点属性的解析方式了：

// 解析顶点位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 解析顶点颜色属性
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
// 解析顶点纹理坐标属性
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
glEnableVertexAttribArray(2);

接下来，需要调整顶点着色器，接收顶点坐标，并将其传给片段着色器：

#version 330 core

layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
layout (location = 2) in vec2 aTexCoord;

out vec3 ourColor;
out vec2 TexCoord;

void main()
{
   gl_Position = vec4(aPos, 1.0);
   ourColor = aColor;
   TexCoord = aTexCoord;
}

然后交给片段着色器处理，片段着色器有个叫做 采样器(Sampler) 的内建数据类型，供纹理对象使用。因此可以简单声明一个uniform sampler2D把纹理添加到其中，然后在Cpp代码中给他赋值：

#version 330 core

out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D ourTexture;

void main()
{
   FragColor = texture(ourTexture, TexCoord);
}

GLSL内建的 texture() 函数用来采样纹理的颜色，第一个参数是纹理采样器，第二个参数是对应的纹理坐标。

最后，在cpp代码中给纹理绑定即可：

// 画三角形
glBindTexture(GL_TEXTURE_2D, texture);      // 绑定纹理
glBindVertexArray(VAO);                     // 绑定要画的VAO
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

得到的效果如图：

还能将得到的纹理颜色和顶点颜色混合，得到更选炫酷的效果：

FragColor = texture(ourTexture, TexCoord) * vec4(ourColor, 1.0);

纹理单元(Texture Unit)

为什么纹理采样器是个uniform变量，却不用glUniform*给它赋值？因为有 纹理单元(Texture Unit) 的存在，一个纹理的位置值通常称为一个纹理单元，一个纹理的默认单元是0，它(GL_TEXTURE0)默认被激活。

使用纹理单元的主要目的是 让我们在着色器中可以使用多于一个的纹理。激活对应的纹理单元，就能使用对应的纹理，可以使用glActiveTexture()激活纹理单元：

glActiveTexture(GL_TEXTURE0);           // 先激活纹理单元
glBindTexture(GL_TEXTURE_2D, texture);  // 再绑定纹理

OpenGL至少保证有16个纹理单元使用，可以通过GL_TEXTURE0 + 数字的形式获取GL_TEXTURE数字+1。

在片段着色器里再声明一个采样器，以接收第二个纹理：

#version 330 core

out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D texture1;
uniform sampler2D texture2;

void main()
{
   FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);
}

最终输出的颜色是两个纹理的结合。GLSL内建的mix()接收两个值作为参数，并根据第三个参数进行线性插值。例如0.2会返回80%的第一个颜色+20%的第二个颜色。

将这张图片作为第二个纹理进行创建和生成（注意，这张png有透明度，类型得是GL_RGBA，而不是GL_RGB）：

最终效果如图：

可以发现笑脸反了，这是因为OpenGL要求y轴0.0坐标在图片底部，而图片y轴的0.0坐标通常在顶部。可以在加载图像前让y轴翻转：

stbi_set_flip_vertically_on_load(true);

然后就正常了：

练习题

练习1

修改片段着色器，仅让笑脸图案朝另一个方向看.

可以修改texture2的TexCoord：

FragColor = mix(texture(texture1, TexCoord), texture(texture2, vec2(-TexCoord.x, TexCoord.y)), 0.2);

练习2

尝试用不同的纹理环绕方式，设定一个从0.0f到2.0f范围内的（而不是原来的0.0f到1.0f）纹理坐标。试试看能不能在箱子的角落放置4个笑脸，目标结果如下：

首先，将顶点属性的纹理坐标范围改为(0.0f - 2.0f)，我们得到结果如下，可以发现离目标进了一步：

接下来，我们修改container纹理的环绕方式，将其修改为GL_CLAMP_TO_EDGE，结果如下：

不知道为啥有一点黑色背景，可能是笑脸图片有问题。

练习3

尝试在矩形上只显示纹理图像的中间一部分，修改纹理坐标，达到能看见单个的像素的效果。尝试使用GL_NEAREST的纹理过滤方式让像素显示得更清晰.

首先将纹理坐标放缩，然后通过调整纹理过滤方式康康显示结果的区别：

过滤方式	显示结果
GL_NEAREST
GL_LINEAR

练习4

使用一个uniform变量作为mix函数的第三个参数来改变两个纹理可见度，使用上和下键来改变箱子或笑脸的可见度.

在片段着色器中，引入uniform变量：

#version 330 core

out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D texture1;
uniform sampler2D texture2;
uniform float mixNum;

void main()
{
   FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), mixNum);
}

在cpp文件的按键控制函数中，利用ourShader.setFloat()来设置这个变量：

// 按上下键切换混合度（提前设置一个全局变量）
if (glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS)
{
    if (mixNum < 1.0f)
        mixNum += 0.1f;
}
if (glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS)
{
    if (mixNum > 0.0f)
        mixNum -= 0.1f;
}

最终效果如图：

参考资料

• 纹理 - LearnOpenGL CN (learnopengl-cn.github.io)