OpenGL自制3D游戏引擎入门VII
Texture 纹理
一、概述
为了能够纹理映射(Map)到三角形上，我们需要指定三角形的每个顶点对应纹理的哪个部分，这样每个顶点都会关联着一个纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样，之后在图形的其它片段上进行片段插值(Fragment Interpolation)
使用纹理坐标获取纹理颜色叫做采样(Sample)，纹理坐标起始于(0,0)，终止于(1,1)
给顶点着色器传递这个三个纹理坐标，接下来它们会被传到片段着色器中，它会为每个片段进行纹理坐标的插值
float textCoords[] = { 0.0f, 0.0f, 1.0f, 0.0f, 0.5f, 1.0f };
二、纹理环绕方式
纹理采样的解释非常宽松，它可以采用不同的插值方式，我们需要自己告诉OpenGL该怎样对纹理采样
纹理坐标的范围一般是从(0,0)到(1,1)，如果把纹理坐标设置在这个范围之外，OpenGL默认重复这个纹理图像，当然OpenGL提供了更多选择
- GL_REPEAT 默认设置，重复纹理图像
- GL_MIRRORED_REPEAT 与GL_REPEAT相似，但每次重复图片时镜像放置的
- GL_CLAMP_TO_EDGE 纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果
- GL_CLAMP_TO_BORDER 超出的坐标为用户指定的边缘颜色
也可以使用 glTexParameter* 函数对单独的一个坐标轴设置(s,t,r或是x,y,z)，第一个参数指定纹理目标，第二个参数需要我们指定设置的选项与应用的纹理轴，最后一个参数需要我们指定一个环绕方式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT);如果使用 GL_CLAMP_TO_BORDER 则需要额外指定边缘颜色，这需要使用 glTexParameter 函数的fv后缀形式，用 GL_TEXTURE_BORDER_COLOR 作为它的选项，并且传递一个float数组作为边缘的颜色值
float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f }; glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
三、纹理过滤
GL_NEAREST(邻近过滤)是OpenGL默认的纹理过滤方式，当设置为GL_NEARSET时，OpenGL会选择中心点最接近纹理坐标的那个像素
GL_LINEAR(线性过滤)会基于纹理坐标附近的纹理像素计算出一个插值，近似出这些纹理像素之间的颜色，一个纹理像素的中心距离纹理坐标越近，那么这个纹理像素所占的权重也就越大
对比两种插值方式得出的图像，GL_NEARST产生的图像具有颗粒感，但是更具有8-bit风格，而GL_LINEAR产生图像更平滑的图案，得到更加真实的输出
当进行放大和缩放操作的时候可以设置纹理过滤的选项，比如你可以在纹理被缩小的时候使用邻近过滤，被放大的时候使用线性过滤，我们需要使用 glTexParameter* 函数为缩放分别制定不同的过滤方式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
四、多级渐远纹理
当一个纹理重复应用在同一个场景中但其具体应用的位置远近各不同，如果不做处理，远处的纹理和近处的纹理使用相同的分辨率，必然导致不真实感以及内存浪费，OpenGL应用多级渐远纹理(Mipmap)的概念来解决这个问题，简单来说就是一系列的纹理图像，后一个纹理图像是前一个的二分之一
原理：当观察者的距离超过一定的阈值，OpenGL会使用不同的多级渐远纹理，即最适合物体距离的那一个，保证图像质量的同时保证性能最佳
在渲染中切换多级渐远纹理级别时，OpenGL在两个不同级别的多级渐远纹理层之间会产生不真实的生硬边界，就像普通的纹理过滤一样，我们在这里也可以使用纹理过滤
- GL_NEAREST_MIPMAP_NEAREST 使用最邻近的多级渐远纹理来匹配像素大小，并使用邻近插值进行纹理采样
- GL_LINEAR_MIPMAP_NEAREST 使用最邻近的多级渐远纹理级别，并使用线性插值进行采样
- GL_NEAREST_MIPMAP_LINEAR 在两个最匹配像素大小的多级渐远纹理之间进行线性插值，使用邻近插值进行采样
- GL_LINEAR_MIPMAP_LINEAR 在两个邻近的多级渐远纹理之间使用线性插值，并使用线性插值进行采样
设置方式同上
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);Tips：不能将放大过滤选项设置为Mipmap的过滤选项，这样没有任何效果，因为多级渐远纹理主要是使用在纹理被缩小的情况下的，同时这样做还会产生 GL_INVALID_ENUM 错误代码
五、加载纹理
在使用纹理之前要先将纹理图像加载到应用中，但是图像格式各式各样，可以自己写一个图像加载器，但确实很麻烦，所以我们直接选择图像加载库 $stb_image.h$
stb_image.h是Sean Barrett的一个非常流行的单头文件加载库，可以加载大部分流行的文件格式并整合进工程中。下载头文件后以 stb_image.h 的名字加入工程，在使用本库时需加入
#define STB_IMAGE_IMPLEMENTATION #include "stb_image.h"图像加载函数stbi_load，第一个参数为图像文件的位置，接下来需要三个int作为它的二、三、四个参数，stb_image.h将会用图像的宽度、高度和颜色通道的个数填充这三个变量，我们之后生成纹理的时候会用到图像的宽度和高度
int width, height, nrChannels; unsigned char *data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);以及记得释放图像内存
stbi_image_free(data);OpenGL要求y轴0.0坐标是在图片的底部的，但是图片的y轴一般是在顶部，所以需要在加载图像时翻转y轴，在加载任何图像前加入以下语句即可
stbi_set_flip_vertically_on_load(true);
六、 应用纹理
更新顶点数据
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.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f // 左上 };因为添加了纹理坐标，需要告诉OpenGL新的顶点格式
// 纹理属性 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; }片段着色器也可以访问纹理对象，GLSL有一个供纹理对象使用的内建数据类型，叫做采样器(Sampler)，它以纹理类型作为后缀。我们使用GLSL内建的 texture 函数采样纹理颜色，第一个参数是纹理采样器，第二个参数是对应的纹理坐标
#version 330 core out vec4 FragColor; in vec3 ourColor; in vec2 TexCoord; uniform sampler2D ourTexture; void main() { FragColor = texture(ourTexture, TexCoord); }最后调用 glDrawElements 函数绑定纹理即可，它自动将纹理赋值给片段着色器的采样器
stbi_set_flip_vertically_on_load(true); unsigned int texture; glGenTextures(1, &texture); 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); // 加载并生成纹理 int width, height, nrChannels; unsigned char* data = stbi_load("pic.jpg", &width, &height, &nrChannels, 0); if (data) { glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data); glGenerateMipmap(GL_TEXTURE_2D); } else { std::cout << "Failed to load texture" << std::endl; } stbi_image_free(data); glBindTexture(GL_TEXTURE_2D, texture); glBindVertexArray(VAO); glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
七、纹理单元
可以看到片段着色器中 sampler2D 变量是 uniform 变量，但并没有使用 glUniform 给它赋值。使用 glUniform1i，我们可以给纹理采样器分配一个位置值，这样的话我们能够在一个片段着色器中设置多个纹理，一个纹理的位置值通常称之为一个**纹理单元(Texture Unit)**。一个纹理的默认纹理单元为0，它是默认的激活纹理单元
纹理单元的主要目的是能够在一个着色器中使用多个纹理，通过把纹理单元赋值给采样器，我们可以一次绑定多个纹理，但在绑定之前需要先激活纹理单元
glActiveTexture(GL_TEXTURE0); // 在绑定纹理之前先激活纹理单元 glBindTexture(GL_TEXTURE_2D, texture);GLSL提供的内建 mix 函数需要接受两个值作为参数，并根据第三个参数进行线性插值，如果第三个值是0.0，它会返回第一个输入，如果第三个值是1.0，它会返回第二个输入，如果输入0.2，它会返回80%第一个输入颜色20%第二个输入颜色，即返回两个纹理的混合色
当然也需要修改渲染流程，先绑定两个纹理到对应的纹理单元，然后定义哪个uniform采样器对应哪个纹理单元
glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texture1); glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texture2); glBindVertexArray(VAO); glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);我们还要通过使用 glUniform1i 设置每个采样器的方式告诉OpenGL每个采样器属于哪个纹理单元，只需要设置一次即可，所以放在渲染循环前面
ourShader.use(); // 不要忘记在设置uniform变量之前激活着色器程序！ glUniform1i(glGetUniformLocation(ourShader.ID, "texture1"), 0); // 手动设置 ourShader.setInt("texture2", 1); // 或者使用着色器类设置 while(...) { [...] }
(下接 OpenGL入门VIII)
