已知，我们是对每个顶点去添加对应颜色，如果想要图像更加细节真实，就必须有足够多的点，点的密度要很大，而每个点都有个颜色属性，这样很浪费资源。
这时候我们就可以引入纹理，它可以用来添加图像的细节，类似于皮肤。每个顶点对应一个纹理坐标(表明从纹理图像的哪个位置采样，即获得颜色)，其他片段进行插值采样(非顶点位置的颜色也是从纹理图像中采样获得)，让物体非常精细又不需要指定额外的顶点。
纹理环绕方式
纹理坐标的范围0到1，如果是2D纹理图像，纹理坐标起始于左下角(0,0)，终止于右上角(1,1)。如果超出这个范围，openGL使用纹理环绕方式进行填充。环绕方式分为以下四种：
1）GL_REPEAT：重复纹理图像，默认行为；
2）GL_MIRRORED_REPEAT：和GL_REPEAT一样，但是重复的图片是镜像放置的；
3）GL_CLAMP_TO_EDGE：重复纹理坐标的边缘，产生一种边缘被拉伸的效果；
4）GL_CLAMP_TO_BORDER：用户指定的颜色填充超出部分
使用glTexParameteri函数对单个坐标轴设置环绕方式(s,t,r对应x,y,z)
/*第一个参数指定了纹理目标；我们使用的是2D纹理，因此纹理目标是GL_TEXTURE_2D； 第二个参数需要我们指定设置的选项与应用的纹理轴。我们打算配置的是WRAP选项，并且指定S和T轴； 最后一个参数需要我们传递一个环绕方式 */ 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选项，还需要使用glTexParameterfv指定一个边缘的颜色 //float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f }; //glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);
纹理过滤
因为纹理坐标范围是0到1的浮点值，不依赖于分辨率，所有怎么将纹理像素映射到纹理坐标呢？OpenGL使用纹理过滤，其中最重要的两种是GL_NEAREST和GL_LINEAR：
1）GL_NEAREST：邻近过滤，默认的过滤方式，其选择中心点最接近纹理坐标的那个像素。产生的是颗粒状的图案，能够清晰看到组成纹理的像素，一般在纹理被缩小时使用。
2）GL_LINEAR：线性过滤，基于纹理坐标附近的纹理像素，计算一个插值，相当于临近像素的混合色，距离越近的纹理像素影响越大。产生的是平滑的图案，很难看出单个的纹理像素，一般在纹理被放大时使用。
使用glTexParameteri函数对放大和缩小两种情况设置过滤方式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);//被缩小时的选项 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);//被放大时的选项
多级渐远纹理
物体有远近之分，远处的物体看起来小，产生的片段少。为了节约内存且让小物体更真实，OpenGL使用不同的多级渐远纹理（就是一系列的纹理图像，后一个纹理是前一个纹理的二分之一），根据不同的距离选择不同的纹理图像取样。
在使用多级渐远纹理的时候，不同级别的纹理层之间会产生不真实的生硬边界，这时候可以使用纹理过滤方式，指定不同多级渐远纹理级别之间的过滤方式有4种：
1）GL_NEAREST_MIPMAP_NEAREST：使用最邻近的多级渐远纹理来匹配像素大小，并使用邻近插值进行纹理采样；
2）GL_LINEAR_MIPMAP_NEAREST：使用最邻近的多级渐远纹理级别，并使用线性插值进行采样；
3）GL_NEAREST_MIPMAP_LINEAR：在两个最匹配像素大小的多级渐远纹理之间进行线性插值，使用邻近插值进行采样；
4）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);
注意：对放大的设置选项不能是多级渐远纹理的选项之一，否则会产生GL_INVALID_ENUM错误代码，因为多级渐远纹理是使用在纹理被缩小的情况下。
使用纹理
使用stb_image.h库(下载地址stb/stb_image.h at master · nothings/stb · GitHub)，下载这个头文件，将它以stb_image.h的名字加入工程，并另创建一个新的C++文件，输入以下代码：
#define STB_IMAGE_IMPLEMENTATION #include "stb_image.h"
通过定义STB_IMAGE_IMPLEMENTATION，预处理器会修改头文件，让其只包含相关的函数定义源码，等于是将这个头文件变为一个 .cpp 文件了。现在只需要在程序中包含stb_image.h并编译就可以了。
使用纹理的方式也是需要先创建一个纹理对象，然后绑定它进行配置，如下所示：
//创建纹理，和之前生成的OpenGL对象一样，纹理也是使用ID引用的 unsigned int texture; glGenTextures(1, &texture);//生成纹理的数量1，然后把它们储存在第二个参数的unsigned int数组中 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("container.jpg", &width, &height, &nrChannels, 0); if (data) { //生成纹理，当调用glTexImage2D时，当前绑定的纹理对象就会被附加上纹理图像 /* 第一个参数指定了纹理目标(Target)。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理（任何绑定到GL_TEXTURE_1D和GL_TEXTURE_3D的纹理不会受到影响）。 第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的话。这里我们填0，也就是基本级别。 第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。 第四个和第五个参数设置最终的纹理的宽度和高度。我们之前加载图像的时候储存了它们，所以我们使用对应的变量。 下个参数应该总是被设为0（历史遗留的问题）。 第七第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char(byte)数组，我们将会传入对应值。 最后一个参数是真正的图像数据。 */ 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);
OpenGL如何采样纹理呢？
首先在顶点着色器传入顶点的纹理坐标
texture_triangle.vs
//vertex shader source #version 330 core layout(location = 0) in vec3 position; //位置X,Y,Z layout(location = 1) in vec3 color; //颜色R,G,B layout(location = 2) in vec2 texture; //纹理S,T out vec3 vertexColor; //顶点颜色 out vec2 textureCoord; //顶点对应纹理坐标 void main() { gl_Position = vec4(position, 1.0); //顶点坐标 vertexColor = color; //从顶点数据那里得到的输入颜色 textureCoord = texture; //从顶点数据那里得到的对应纹理坐标 }
然后片段着色器使用采样器(Sampler)进行采样，这个采样器是uniform类型，因为它是用于程序把纹理对象传给片段着色器的。最后使用GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。
texture_triangle.fs
//fragment shader source #version 330 core in vec3 vertexColor; //顶点颜色 in vec2 textureCoord; //顶点对应纹理坐标 out vec4 fragColor; //像素的最终颜色 uniform sampler2D ourTexture; //纹理采样器，通过源码中绑定纹理glBindTexture赋值 void main() { fragColor = texture(ourTexture, textureCoord); }
完整示例
//GLAD的头文件包含了正确的OpenGL头文件（例如GL/gl.h），所以需要在其它依赖于OpenGL的头文件之前包含GLAD #include <glad/glad.h> #include <GLFW/glfw3.h> #include <iostream> #include "shader.h" #include "stb_image.h" //改变窗口大小 void framebuffer_size_callback(GLFWwindow* window, int width, int height) { glViewport(0, 0, width, height); } //输入 void processInput(GLFWwindow *window) { if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)//点击ESC键退出绘制 glfwSetWindowShouldClose(window, true); } GLFWwindow* init_window() { ///窗口初始化 glfwInit(); glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//主版本号，当API以不兼容的方式更改时，该值会增加。 glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//次版本号，当特性被添加到API中时，它会增加，但是它保持向后兼容。 glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//使用核心模式,不兼容已废弃函数 //创建glfw窗口 GLFWwindow* window = glfwCreateWindow(800, 600, "ping-window", NULL, NULL); if (window == NULL) { std::cout << "failed to create GLFW window" << std::endl; glfwTerminate();//释放/删除之前的分配的所有资源 return nullptr; } glfwMakeContextCurrent(window);//将窗口的上下文设置为当前线程的主上下文 glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);//注册为调整窗口回调函数 //GLAD是用来管理OpenGL的函数指针的，在调用任何OpenGL的函数之前初始化GLAD if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))//给GLAD传入了用来加载系统相关的OpenGL函数指针地址的函数 { std::cout << "failed to intialize GLAD" << std::endl; return nullptr; } glViewport(0, 0, 800, 600);//处理过的OpenGL坐标范围只为-1到1，因此我们事实上将(-1到1)范围内的坐标映射到(0, 800)和(0, 600) return window; } int texture_triangle() { ///初始化窗口 GLFWwindow* window = init_window(); ///定义着色器 CShader shader("texture_triangle.vs", "texture_triangle.fs"); ///定义顶点对象 float vertices[] = { // 顶点坐标X,Y,Z // 顶点颜色R,G,B // 纹理坐标S,T 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 // 左上 }; unsigned int indices[] = { 0, 1, 3, // 第一个三角形 1, 2, 3 // 第二个三角形 }; unsigned int VBO, VAO, EBO; glGenVertexArrays(1, &VAO); glGenBuffers(1, &VBO); glGenBuffers(1, &EBO); glBindVertexArray(VAO); glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); // 顶点坐标属性 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); //创建纹理，和之前生成的OpenGL对象一样，纹理也是使用ID引用的 unsigned int texture; glGenTextures(1, &texture);//生成纹理的数量1，然后把它们储存在第二个参数的unsigned int数组中 glBindTexture(GL_TEXTURE_2D, texture);//绑定纹理 //为当前绑定的纹理对象设置环绕、过滤方式 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);//X轴环绕方式 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);//Y轴环绕方式 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);//被缩小时的过滤选项 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);//被放大时的过滤选项 //加载纹理图像 int width, height, nrChannels; unsigned char* data = stbi_load("container.jpg", &width, &height, &nrChannels, 0); if (data) { //生成纹理，当调用glTexImage2D时，当前绑定的纹理对象就会被附加上纹理图像 /* 第一个参数指定了纹理目标(Target)。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理（任何绑定到GL_TEXTURE_1D和GL_TEXTURE_3D的纹理不会受到影响）。 第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的话。这里我们填0，也就是基本级别。 第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。 第四个和第五个参数设置最终的纹理的宽度和高度。我们之前加载图像的时候储存了它们，所以我们使用对应的变量。 下个参数应该总是被设为0（历史遗留的问题）。 第七第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char(byte)数组，我们将会传入对应值。 最后一个参数是真正的图像数据。 */ 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); while (!glfwWindowShouldClose(window)) { processInput(window); //清空屏幕 glClearColor(0.2f, 0.3f, 0.3f, 1.0f); glClear(GL_COLOR_BUFFER_BIT); ///绘制物体 shader.run(); glBindVertexArray(VAO); //使用VEO绘制 glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);//绘制图元为三角形，绘制顶点数量6，索引类型uint，偏移量0 glfwSwapBuffers(window);//交换颜色缓冲（它是一个储存着GLFW窗口每一个像素颜色值的大缓冲） glfwPollEvents();//检查有没有触发什么事件 } //释放资源 glDeleteVertexArrays(1, &VAO); glDeleteBuffers(1, &VBO); glDeleteBuffers(1, &EBO); glfwTerminate();//释放/删除之前的分配的所有资源 return 0; } int main() { texture_triangle(); return 0; }
运行效果
附上纹理图像下载地址container.jpg (512×512) (learnopengl-cn.github.io)
