纹理
纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节。
为了能够把纹理映射到三角形上，我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样。之后在图形的其它片段上进行片段插值(Fragment Interpolation)。
纹理坐标在x和y轴上，范围为0到1之间。纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1)，即纹理图片的右上角。
纹理环绕方式
当我们把纹理坐标设置在范围( [ 0 , 1 ] 2 [0,1]^2 [0,1]2)之外时,OpenGL默认的行为时重复这个纹理图像，但我们需要告诉OpenGL是怎么重复的，即环绕方式。
| 环绕方式 | 描述 |
|---|---|
| GL_REPEAT | 对纹理的默认行为。重复纹理图像。 |
| GL_MIRRORED_REPEAT | 和GL_REPEAT一样，但每次重复图片是镜像放置的。 |
| GL_CLAMP_TO_EDGE | 纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。 |
| GL_CLAMP_TO_BORDER | 超出的坐标为用户指定的边缘颜色。 |
纹理过滤
纹理坐标不依赖于分辨率(Resolution)，它可以是任意浮点值，所以OpenGL需要知道怎样将纹理像素(Texture Pixel，也叫Texe)映射到纹理坐标。
纹理过滤用于纹理分辨率小而物体分辨率大的情况，主要有以下两种方式。
| 类型 | 鸟叔 |
|---|---|
| GL_NEAREST | 选择中心点最接近纹理坐标的那个像素 |
| GL_LINEAR | 基于纹理坐标附近的纹理像素，计算出一个插值，近似出这些纹理像素之间的颜色。 |
当纹理分辨率大而物体分辨率小时，就要使用多级渐进纹理(Mipmap)。
| 过滤方式 | 描述 |
|---|---|
| GL_NEAREST_MIPMAP_NEAREST | 使用最邻近的多级渐远纹理来匹配像素大小，并使用邻近插值进行纹理采样 |
| GL_LINEAR_MIPMAP_NEAREST | 使用最邻近的多级渐远纹理级别，并使用线性插值进行采样 |
| GL_NEAREST_MIPMAP_LINEAR | 在两个最匹配像素大小的多级渐远纹理之间进行线性插值，使用邻近插值进行采样 |
| GL_LINEAR_MIPMAP_LINEAR | 在两个邻近的多级渐远纹理之间使用线性插值，并使用线性插值进行采样 |
纹理单元
我们可以给纹理采样器分配一个位置值，这样的话我们能够在一个片段着色器中设置多个纹理。一个纹理的位置值通常称为一个纹理单元(Texture Unit)。一个纹理的默认纹理单元是0，它是默认的激活纹理单元。
纹理单元的主要目的是让我们在着色器中可以使用多于一个的纹理。通过把纹理单元赋值给采样器，我们可以一次绑定多个纹理，只要我们首先激活对应的纹理单元。
code
物体坐标和纹理坐标的对应关系是自行定义的，只需定义顶点的对应关系即可。
应用纹理
#define STB_IMAGE_IMPLEMENTATION
#include "../env/std_image.h"
#include <iostream>
#include "../env/glad.h"
#include "../env/glfw3.h"
#include <fstream>
#define WIDTH 800
#define HEIGHT 600
GLFWwindow *initialize(int width, int height);
GLuint complieVertexShader(const std::string &filename);
GLuint complieFragmentShader(const std::string &filename);
GLuint getShaderProgram(GLuint vertexShader, GLuint fragmentShader);
void framebuffer_size_callback(GLFWwindow *window, int width, int height);
void processInput(GLFWwindow *window);
std::string getShaderSource(const std::string &filename);
int main()
{
GLFWwindow *window = initialize(WIDTH, HEIGHT);
GLuint vertexShader = complieVertexShader("4-vertex.glsl");
GLuint fragmentShader = complieFragmentShader("4-fragment.glsl");
GLuint shaderProgram = getShaderProgram(vertexShader, fragmentShader);
GLuint myVAO;
glGenVertexArrays(1, &myVAO);
glBindVertexArray(myVAO);
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 // 左上
};
GLuint indices[] = {
0, 1, 3,
2, 1, 3};
unsigned int myVBO;
glGenBuffers(1, &myVBO);
glBindBuffer(GL_ARRAY_BUFFER, myVBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *)0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *)(3 * sizeof(float)));
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *)(6 * sizeof(float)));
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(1);
glEnableVertexAttribArray(2);
GLuint myEBO;
glGenBuffers(1, &myEBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, myEBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 加载图片
int width, height, channel;
unsigned char *data = stbi_load("../images/container.jpg", &width, &height, &channel, 0);
std::cout << width << " " << height << " " << channel << std::endl;
// 生成纹理
GLuint 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);
// 根据加载的图片生成纹理
// 当前绑定的纹理对象就会被附加上纹理图像。
// 参数1：指定生成纹理的目标
// 参数2：指定Mipmap的级别
// 参数3：纹理的存储格式
// 参数4：纹理的宽度
// 参数5：纹理的高度
// 参数6：0
// 参数7：纹理的存储格式
// 参数8：纹理的数据类型
// 参数9：纹理的数据
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
// 为当前绑定的纹理自动生成所有需要的多级渐远纹理。
glGenerateMipmap(GL_TEXTURE_2D);
// 释放内存
stbi_image_free(data);
while (!glfwWindowShouldClose(window))
{
glUseProgram(shaderProgram);
glBindTexture(GL_TEXTURE_2D, texture);
glBindVertexArray(myVAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
processInput(window);
glfwSwapBuffers(window);
glfwPollEvents();
glClearColor(0.2, 0.3, 0.3, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
}
glfwTerminate();
return 0;
}
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)
{
glfwSetWindowShouldClose(window, true);
}
}
GLFWwindow *initialize(int width, int height)
{
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
GLFWwindow *window = glfwCreateWindow(WIDTH, HEIGHT, "2", nullptr, nullptr);
if (!window)
{
exit(-1);
}
glfwMakeContextCurrent(window);
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
exit(-1);
}
glViewport(0, 0, width, height);
glfwSetWindowSizeCallback(window, framebuffer_size_callback);
return window;
}
std::string getShaderSource(const std::string &filename)
{
std::ifstream in;
in.open(filename, std::ios::in);
if (!in.is_open())
{
exit(-1);
}
std::string ans, line;
while (!in.eof())
{
getline(in, line);
ans += line;
ans.push_back('\n');
}
return ans;
}
GLuint complieVertexShader(const std::string &filename)
{
const char *charPtr = nullptr;
unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
std::string vertexShaderSource = getShaderSource(filename);
if (vertexShaderSource.empty())
exit(-1);
charPtr = vertexShaderSource.c_str();
// 把这个着色器源码附加到着色器对象上，然后编译
glShaderSource(vertexShader, 1, &charPtr, nullptr);
glCompileShader(vertexShader);
// 获取顶点着色器编译信息
int success;
char info[512];
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(vertexShader, 512, nullptr, info);
std::cout << "Complie vertex shader error: " << info << std::endl;
exit(-1);
}
return vertexShader;
}
GLuint complieFragmentShader(const std::string &filename)
{
const char *charPtr = nullptr;
// 编译片段着色器
unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
std::string fragmentShaderSource = getShaderSource(filename);
if (fragmentShaderSource.empty())
{
exit(-1);
}
charPtr = fragmentShaderSource.c_str();
glShaderSource(fragmentShader, 1, &charPtr, nullptr);
glCompileShader(fragmentShader);
int success;
char info[512];
glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(fragmentShader, 512, nullptr, info);
std::cout << "Complie fragment shader error: " << info << std::endl;
exit(-1);
}
return fragmentShader;
}
GLuint getShaderProgram(GLuint vertexShader, GLuint fragmentShader)
{
// 创建着色器程序对象
GLuint shaderProgram;
shaderProgram = glCreateProgram();
// 链接着色器到程序对象
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);
// 删除着色器对象
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
return shaderProgram;
}
#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 ourTexCoord;
void main() {
gl_Position = vec4(aPos, 1.0f);
ourColor = aColor;
ourTexCoord = aTexCoord;
}
#version 330 core
out vec4 FragColor;
in vec3 ourColor;
in vec2 ourTexCoord;
uniform sampler2D ourTexture;
void main() {
FragColor = texture(ourTexture, ourTexCoord) * vec4(ourColor, 1.0f);
}
纹理单元的应用（多个纹理）
#define STB_IMAGE_IMPLEMENTATION
#include "../env/std_image.h"
#include <iostream>
#include "../env/glad.h"
#include "../env/glfw3.h"
#include <fstream>
#define WIDTH 800
#define HEIGHT 600
GLFWwindow *initialize(int width, int height);
GLuint complieVertexShader(const std::string &filename);
GLuint complieFragmentShader(const std::string &filename);
GLuint getShaderProgram(GLuint vertexShader, GLuint fragmentShader);
void framebuffer_size_callback(GLFWwindow *window, int width, int height);
void processInput(GLFWwindow *window);
std::string getShaderSource(const std::string &filename);
int main()
{
GLFWwindow *window = initialize(WIDTH, HEIGHT);
GLuint vertexShader = complieVertexShader("4.1-vertex.glsl");
GLuint fragmentShader = complieFragmentShader("4.1-fragment.glsl");
GLuint shaderProgram = getShaderProgram(vertexShader, fragmentShader);
GLuint myVAO;
glGenVertexArrays(1, &myVAO);
glBindVertexArray(myVAO);
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 // 左上
};
GLuint indices[] = {
0, 1, 3,
2, 1, 3};
unsigned int myVBO;
glGenBuffers(1, &myVBO);
glBindBuffer(GL_ARRAY_BUFFER, myVBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *)0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *)(3 * sizeof(float)));
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *)(6 * sizeof(float)));
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(1);
glEnableVertexAttribArray(2);
GLuint myEBO;
glGenBuffers(1, &myEBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, myEBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
int width, height, channel;
unsigned char *data = stbi_load("../images/container.jpg", &width, &height, &channel, 0);
GLuint texture1;
glGenTextures(1, &texture1);
glBindTexture(GL_TEXTURE_2D, texture1);
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(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
stbi_image_free(data);
stbi_set_flip_vertically_on_load(true);
data = stbi_load("../images/awesomeface.png", &width, &height, &channel, 0);
GLuint texture2;
glGenTextures(1, &texture2);
glBindTexture(GL_TEXTURE_2D, texture2);
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(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
stbi_image_free(data);
// 激活不同的纹理单元
glUseProgram(shaderProgram);
GLint texture1Location = glGetUniformLocation(shaderProgram, "texture1");
glUniform1i(texture1Location, 0);
GLint texture2Location = glGetUniformLocation(shaderProgram, "texture2");
glUniform1i(texture2Location, 1);
while (!glfwWindowShouldClose(window))
{
glUseProgram(shaderProgram);
// 激活不同的纹理单元
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture2);
glBindVertexArray(myVAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
processInput(window);
glfwSwapBuffers(window);
glfwPollEvents();
glClearColor(0.2, 0.3, 0.3, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
}
glfwTerminate();
return 0;
}
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)
{
glfwSetWindowShouldClose(window, true);
}
}
GLFWwindow *initialize(int width, int height)
{
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
GLFWwindow *window = glfwCreateWindow(WIDTH, HEIGHT, "2", nullptr, nullptr);
if (!window)
{
exit(-1);
}
glfwMakeContextCurrent(window);
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
exit(-1);
}
glViewport(0, 0, width, height);
glfwSetWindowSizeCallback(window, framebuffer_size_callback);
return window;
}
std::string getShaderSource(const std::string &filename)
{
std::ifstream in;
in.open(filename, std::ios::in);
if (!in.is_open())
{
exit(-1);
}
std::string ans, line;
while (!in.eof())
{
getline(in, line);
ans += line;
ans.push_back('\n');
}
return ans;
}
GLuint complieVertexShader(const std::string &filename)
{
const char *charPtr = nullptr;
unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
std::string vertexShaderSource = getShaderSource(filename);
if (vertexShaderSource.empty())
exit(-1);
charPtr = vertexShaderSource.c_str();
// 把这个着色器源码附加到着色器对象上，然后编译
glShaderSource(vertexShader, 1, &charPtr, nullptr);
glCompileShader(vertexShader);
// 获取顶点着色器编译信息
int success;
char info[512];
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(vertexShader, 512, nullptr, info);
std::cout << "Complie vertex shader error: " << info << std::endl;
exit(-1);
}
return vertexShader;
}
GLuint complieFragmentShader(const std::string &filename)
{
const char *charPtr = nullptr;
// 编译片段着色器
unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
std::string fragmentShaderSource = getShaderSource(filename);
if (fragmentShaderSource.empty())
{
exit(-1);
}
charPtr = fragmentShaderSource.c_str();
glShaderSource(fragmentShader, 1, &charPtr, nullptr);
glCompileShader(fragmentShader);
int success;
char info[512];
glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(fragmentShader, 512, nullptr, info);
std::cout << "Complie fragment shader error: " << info << std::endl;
exit(-1);
}
return fragmentShader;
}
GLuint getShaderProgram(GLuint vertexShader, GLuint fragmentShader)
{
// 创建着色器程序对象
GLuint shaderProgram;
shaderProgram = glCreateProgram();
// 链接着色器到程序对象
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);
// 删除着色器对象
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
return shaderProgram;
}
#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 ourTexCoord;
void main() {
gl_Position = vec4(aPos, 1.0f);
ourColor = aColor;
ourTexCoord = aTexCoord;
}
#version 330 core
out vec4 FragColor;
in vec3 ourColor;
in vec2 ourTexCoord;
uniform sampler2D texture1;
uniform sampler2D texture2;
void main() {
FragColor = mix(texture(texture1, ourTexCoord),texture(texture2, ourTexCoord), 0.2);
}