关于纹理

一般游戏里的物体不一定都是纯色的物体，物体上面会有一些图片贴在上面，比如墙壁，箱子，地板，可以看到砖头、木板和大理石组成的图片，要把图片贴到计算机里的几何图形的话，就要把图片的颜色采样贴到几何图形上，采样是计算机经常干的工作，计算机要处理自然中的数据就需要对数据进行采样，比如说对声音采样就是采集声音的频率和频幅，分别代表声音的音色和声量，当然，采集到的是一个模拟量，然而计算机无法处理模拟量，所以需要将模拟量量化为数字量，也就是二进制数进行存储，同理，颜色也是一样，现代计算机中颜色一般以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();

}

测试结果

珂朵莉好可爱~