OpenGL学习笔记(3) 纹理

关于纹理

一般游戏里的物体不一定都是纯色的物体，物体上面会有一些图片贴在上面，比如墙壁，箱子，地板，可以看到砖头、木板和大理石组成的图片，要把图片贴到计算机里的几何图形的话，就要把图片的颜色采样贴到几何图形上，采样是计算机经常干的工作，计算机要处理自然中的数据就需要对数据进行采样，比如说对声音采样就是采集声音的频率和频幅，分别代表声音的音色和声量，当然，采集到的是一个模拟量，然而计算机无法处理模拟量，所以需要将模拟量量化为数字量，也就是二进制数进行存储，同理，颜色也是一样，现代计算机中颜色一般以RGB的形式，分别代表Red，Green，Blud三种颜色在这个颜色中的占比，一般使用3个字节存储，也就是说颜色的数量可以达到2^24种，已经足够用了，想要把采集到的颜色贴到物体上的话，我们需要指定顶点的纹理坐标，告诉着色器要从纹理的哪个点开始采样, 纹理坐标的范围是0到1

项目的代码

learnOpenGL里的图解

纹理环绕

纹理坐标的范围是0到1，假如超出这个范围的话，在OpenGL里会有几种方式来贴图，这些方式叫做纹理环绕方式

GL_REPEAT对纹理的默认行为。重复纹理图像。
GL_MIRRORED_REPEAT和GL_REPEAT一样，但每次重复图片是镜像放置的。
GL_CLAMP_TO_EDGE纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。
GL_CLAMP_TO_BORDER超出的坐标为用户指定的边缘颜色。

在我的工程里有用来测试的函数SurroundTest，把环绕方式和过滤模式封装成枚举方便调试

//环绕模式
enum class SurroundMode
{
Repeat = GL_REPEAT,//重复纹理图像
MirroredRepeat = GL_MIRRORED_REPEAT,//镜像重复纹理图像
ClampToEdge = GL_CLAMP_TO_EDGE,//将边缘拉伸
ClampToBoreder = GL_CLAMP_TO_BORDER//超出的部分为指定边缘颜色
};
//过滤方式
enum class FilteringMode
{
Nearest = GL_NEAREST,
Linear = GL_LINEAR,
};

将纹理坐标的分量值设置到[0,1]之外，进行测试

float vertices[] = {
//     ---- 位置 ----     - 纹理坐标 -
 0.5f,  0.5f, 0.0f,  2.0f, 2.0f,    // 右上
 0.5f, -0.5f, 0.0f,  2.0f, -1.0f,   // 右下
-0.5f, -0.5f, 0.0f,  -1.0f, -1.0f,  // 左下
-0.5f,  0.5f, 0.0f,  -1.0f, 2.0f    // 左上
};

测试结果

过滤模式

可以看到环绕方式测试的图片是有一丢丢模糊的(其实是用错过滤模式了)，这是因为用了线性过滤模式(Linear)，使用线性过滤模式采样的时候，每个像素的颜色会和周围的颜色进行混合算出一个插值，这个插值近似于这些像素

而采用 邻近过滤(Nearest) 的话，那么像素的颜色就是采样器采到的颜色，如果分辨率小的图片贴到大的物体上的话，就会出现颗粒状的图案，但使用线性过滤模式的话这些颗粒就会变得比较平滑

测试一下

是不是可以很明显地看出Linear方式采样的珂朵莉的眼神比较温柔啊，这就是经过平滑处理过的图片。在这里顺便说下unity的三种过滤模式

Point 点像素过滤，纹理像素会在附近变为块状。
Bilinear 双线性过滤，平均纹理样本
Trilinear 三线性过滤，平均纹理样本，同时也在多级渐远纹理级别之间混合

测试代码

首先是读取图片用的代码，对 learnOpenGL 里的代码进行了一次封装，针对不同位深度的图片进行处理，位深度就是图片记录每个像素点的位数，24位表示3个float，也就是RGB值，32位则是4个float，即RGBA，读取图片用了官方介绍的stb_image库

//加载纹理
template <typename S1 = std::string>
void LoadTexture(unsigned int &texture, S1&& pic)
{
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;
stbi_set_flip_vertically_on_load(true);
unsigned char *data = stbi_load((TEXTURE_PATH + std::forward<std::string>(pic)).c_str(), &width, &height, &nrChannels, 0);
std::cout << "nrChannels = " << nrChannels << endl;
if (data)
{
//位深度为24，3个通道(jpg
if (nrChannels == 3)
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
//位深度为32，4个通道(png
else if (nrChannels == 4)
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
}
else
{
std::cout << "Failed to load texture" << std::endl;
}
stbi_image_free(data);
data = nullptr;
}

着色器代码

顶点着色器

vertex_3.vs

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoord;out vec2 TexCoord;void main()
{
    gl_Position = vec4(aPos, 1.0);
    TexCoord = aTexCoord;
}

位置0是顶点的坐标，位置1是输入的纹理坐标，要通过顶点着色器将纹理坐标输出到片段着色器

片段着色器

fragment_3.fs

#version 330 core
out vec4 FragColor;in vec2 TexCoord;uniform sampler2D ourTexture;void main()
{
    FragColor = texture(ourTexture, TexCoord);
}

TexCoord是从顶点着色器接收的纹理坐标，使用texture函数来采样，第一个参数是采样器(Sampler)，第二个参数是纹理坐标，着色器输出过滤后的颜色值FragColor

接下来是就是正常的测试代码了

void NormalTest()
{
float vertices[] = {
//     ---- 位置 ----     - 纹理坐标 -
 0.9f,  0.9f, 0.0f,  1.0f, 1.0f,   // 右上
 0.9f, -0.9f, 0.0f,  1.0f, 0.0f,   // 右下
-0.9f, -0.9f, 0.0f,  0.0f, 0.0f,   // 左下
-0.9f,  0.9f, 0.0f,  0.0f, 1.0f    // 左上
};
//索引
unsigned int indices[] = {
0,1,3,
1,2,3
};
//编译着色器
Shader ourShader("vertex_3.vs", "fragment_3.fs");
ourShader.use();//glUseProgram(shaderProgram);
unsigned int VAO, VBO, EBO;//顶点数组
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);//绑定顶点数组缓存
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//索引缓存
glGenBuffers(1, &EBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);//生成纹理
unsigned int texture1;
LoadTexture(texture1, std::move("picture4.png"));//加载纹理
glBindTexture(GL_TEXTURE_2D, texture1);//绑定纹理// 位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 纹理属性
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));//最后一个参数是数据的起点
glEnableVertexAttribArray(1);while (!glfwWindowShouldClose(glWindow))
{
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
//draw
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glBindVertexArray(0);
glfwPollEvents();
glfwSwapBuffers(glWindow);
}
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
glfwTerminate();
}

测试结果

珂朵莉好可爱~

关于纹理

纹理环绕

过滤模式

测试代码

测试结果

个人收藏笔记记录

开通VIP