拖了半个多月的博客，这次学习如何使用纹理（Texture）贴图来实现更多的细节。
生成纹理对象
和创建VAO、VBO方法类似，调用glGenTextures函数。
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);
调用四次glTexParameter函数：
- 2D纹理坐标的横坐标和纵坐标范围都在[0, 1]，当设置的横坐标超出这个范围，则以GL_REPEAT的形式显示纹理；
- 同理，当设置的纵坐标范围超出[0, 1]范围，同样以GL_REPEAT的形式显示纹理。不同选项下纹理的显示效果如下：
- 当纹理被缩小时，一个屏幕像素对应多个纹理像素，采用GL_LINEAR即线性过滤进行采样；
- 当纹理被放大时，一个纹理像素对应多个屏幕像素，同样采用线性过滤进行采样。可选择的过滤方式还有GL_NEAREST，GL_NEAREST_MIPMAP_NEAREST，GL_LINEAR_MIPMAP_NEAREST，GL_NEAREST_MIPMAP_LINEAR和GL_LINEAR_MIPMAP_LINEAR，需要注意的是，后四种过滤方式只能使用在纹理被缩小的情况下。
加载纹理图像
首先添加库stb_image.h。
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"
调用库函数stbi_load加载图片，五个参数分别设置图片的路径，输出图片的宽度，高度，默认颜色通道数和自定义颜色通道数。这里设置自定义颜色通道数为0，表示输出图片默认的颜色通道数。
unsigned char *imageData = stbi_load("/path1/xxx.jpg", &width, &height, &nrChannel, 0);
若图片加载成功，调用glTexImage2D函数使用被加载的图片参数生成2D纹理图像。注意第三和第七个参数虽然都设置成GL_RGB，但含义不同。第三个参数设置OpenGL存储纹理数据的格式，而第七个参数表示图片被加载时生成的数据格式。
之后调用glGenerateMipmap函数根据纹理图像生成Mipmap。
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, imageData);
glGenerateMipmap(GL_TEXTURE_2D);
最后释放内存并解绑纹理对象。
stbi_image_free(imageData);
glBindTexture(GL_TEXTURE_2D, 0);
配置顶点属性指针
在顶点数据中添加纹理坐标，四个顶点的纹理坐标分别为（2.0f, 2.0f），（0.0f, 2.0f），（2.0f, 0.0f）和（0.0f, 0.0f）：
float vertices[] = {0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 2.0f, 2.0f,
-0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 2.0f,
0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 2.0f, 0.0f,
-0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f};
配置顶点属性指针的函数调用和参数说明参见《绘制三角形》：
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8*sizeof(float), (void*)(6*sizeof(float))); //配置纹理坐标
glEnableVertexAttribArray(2); //使能属性位置2
编写Shader
首先是Vertex Shader，Tex的属性位置为2，表示纹理坐标：
#version 330 core
layout (location = 0) in vec3 Pos;
layout (location = 1) in vec3 Col;
layout (location = 2) in vec2 Tex;
out vec4 Color;
out vec2 texCoord;
void main()
{
gl_Position = vec4(Pos, 1.0f);
Color = vec4(Col, 1.0f);
texCoord = Tex;
}
添加sampler2D类型的变量，使Fragment Shader能够访问之前创建的纹理对象：
#version 330 core
out vec4 FragColor;
in vec4 Color;
in vec2 texCoord;
uniform sampler2D texSampler;
void main()
{
FragColor = texture(texSampler, texCoord) * Color;
}
渲染循环
ourShader.use();
glBindVertexArray(VAO);
glBindTexture(GL_TEXTURE_2D, texture);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
Texture Unit
那么该如何同时生成并使用两个纹理呢？
在编写Fragment Shader时，定义了uniform sampler2D类型的变量，可以调用glGetUniformLocation函数和glUniform函数对它进行赋值，来设置纹理的位置信息，即Texture Unit。通过glActiveTexture函数激活不同的Texture Unit，并绑定不同的纹理对象，在Fragment Shader中就可以同时对不同的纹理图像进行采样，混合并输出颜色。
首先绑定并配置另一个纹理对象：
glBindTexture(GL_TEXTURE_2D, texture[1]);
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);
调用库函数stbi_load加载另一张图片，根据图片参数生成纹理图像和Mipmap：
imageData = stbi_load("/path2/xxx.png", &width, &height, &nrChannel, 0);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData); //因为我这里加载的图片有alpha通道，所以第七个参数设置成GL_RGBA
glGenerateMipmap(GL_TEXTURE_2D);
stbi_image_free(imageData);
glBindTexture(GL_TEXTURE_2D, 0);
修改Fragment Shader，定义两个sampler2D变量，并调用mix函数进行颜色混合，即第一个纹理采样颜色的80%和第二个纹理采样颜色的20%：
#version 330 core
out vec4 FragColor;
in vec4 Color;
in vec2 texCoord;
uniform sampler2D texSampler1;
uniform sampler2D texSampler2;
void main()
{
FragColor = mix(texture(texSampler1, texCoord)*Color, texture(texSampler2, texCoord), 0.2);
}
在main函数中对Fragment Shader中的uniform进行赋值，分别设置位置信息即Texture Unit为0和1：
ourShader.use();
glUniform1i(glGetUniformLocation(ourShader.ID, "texSampler1"), 0);
glUniform1i(glGetUniformLocation(ourShader.ID, "texSampler2"), 1);
在渲染循环中激活Texture Unit，并绑定对应的纹理对象：
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture[0]);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture[1]);
执行结果：
完整代码如下：
#include "shader.h"
#include <GLFW/glfw3.h>
#include <cmath>
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"
using namespace std;
/*
void frambuffer_size_callback(GLFWwindow *window, int width, int height)
{
glViewport(0, 0, width, height);
}
*/
void processInput(GLFWwindow* window)
{
//check if ESCAPE is pressed
if(glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
glfwSetWindowShouldClose(window, true);
}
int main()
{
//initialize GLFW
if(!glfwInit())
return -1;
//configure GLFW
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE,GLFW_OPENGL_CORE_PROFILE);
//creat a window object
const unsigned int window_width = 800;
const unsigned int window_height = 600;
GLFWwindow *window = glfwCreateWindow(window_width, window_height, "OpenGL_Demo", NULL, NULL);
if (window == NULL){
cout << "Failed to create GLFW window" << endl;
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
//initialize GLAD to manage function pointers for OpenGL
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){
cout << "Failed to initialize GLAD" << endl;
return -1;
}
//set width and height of Viewport
glViewport(0, 0, window_width, window_height);
Shader ourShader;
ourShader.shader("/home/yi/Test/GL_test/vShader.vs", "/home/yi/Test/GL_test/fShader.fs");
//glfwSetFramebufferSizeCallback(window, frambuffer_size_callback);
//coordnate (x,y,z) of vertices
float vertices[] = {0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 2.0f, 2.0f,
-0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 2.0f,
0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 2.0f, 0.0f,
-0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f};
//indices of vertices
unsigned int indices[] = {0, 1, 2, 1, 2, 3};
//vertex buffer object(VBO)
unsigned int VBO;
//element buffuer object(EBO)
unsigned int EBO;
//vertex array object(VAO)
unsigned int VAO;
//texture object
unsigned int texture[2];
//generate VAO, VBO, EBO, texture
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glGenBuffers(1, &EBO);
glGenTextures(2, texture);
//bind and configure VAO, VBO and EBO
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
//configure texture1
glBindTexture(GL_TEXTURE_2D, texture[0]);
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);
stbi_set_flip_vertically_on_load(true);
int width, height, nrChannel;
unsigned char *imageData = stbi_load("/path1/xxx.jpg", &width, &height, &nrChannel, 0);
if(imageData){
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, imageData);
glGenerateMipmap(GL_TEXTURE_2D);
cout << "Successful to load texture1" << endl;
}
else{
cout << "Failed to load texture1" << endl;
return -1;
}
stbi_image_free(imageData);
glBindTexture(GL_TEXTURE_2D, 0);
//configure texture2
glBindTexture(GL_TEXTURE_2D, texture[1]);
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);
imageData = stbi_load("/path2/xxx.png", &width, &height, &nrChannel, 0);
if(imageData){
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
glGenerateMipmap(GL_TEXTURE_2D);
cout << "Successful to load texture2" << endl;
}
else{
cout << "Failed to load texture2" << endl;
return -1;
}
stbi_image_free(imageData);
glBindTexture(GL_TEXTURE_2D, 0);
//set which texture unit each sampler in fragment shader belongs to
ourShader.use();
glUniform1i(glGetUniformLocation(ourShader.ID, "texSampler1"), 0);
glUniform1i(glGetUniformLocation(ourShader.ID, "texSampler2"), 1);
//link vertex attributes
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);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
//render loop
while(!glfwWindowShouldClose(window)){
processInput(window);
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
ourShader.use();
glBindVertexArray(VAO);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture[0]);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture[1]);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glfwSwapBuffers(window);
glfwPollEvents();
}
//clear resource
glfwTerminate();
return 0;
}