OpenGL（5）Texture - 箱子

1. 下载stb_image.h

编写格式（在main.cpp中）：

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

2.修改着色器

• vertexSource.txt

#version 330 core               
layout (location = 7) in vec3 aPos; 
layout (location = 8) in vec3 aColor; 
layout (location = 9) in vec2 aTexCoord; 
out vec4 vertexColor;    
out vec2 TexCoord;
void main(){ 
 gl_Position  = vec4(aPos.x, aPos.y, aPos.z, 1.0);   
 vertexColor = vec4(aColor.x,aColor.y,aColor.z,1.0); 
 TexCoord = aTexCoord;
} 

加入了layout (location = 9) in vec2 aTexCoord;这一项，紧接着向片段着色器中输出一个纹理颜色TexCoord，TexCoord使用的值为aTexCoord。

• fragmentSource.txt

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

片段着色器中进入了一个由顶点着色器扔进来的TexCoord，定义新项uniform sampler2D ourTexture;，使用纹理颜色的形式为：FragColor = texture(ourTexture,TexCoord)

texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。texture函数会使用之前设置的纹理参数对相应的颜色值进行采样。这个片段着色器的输出就是纹理的（插值）纹理坐标上的(过滤后的)颜色。

3. 创建

使用教程里给的顶点信息，其中新加了uv纹理坐标，范围为（0，1）

//现在直接在顶点数据里加入颜色信息以及纹理u、v坐标

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    // 左上
};

与位置、颜色一样，纹理坐标也必须被指定，glVertexAttribPointer：指定渲染时索引值为 index 的顶点属性数组的数据格式和位置。

	glVertexAttribPointer(9, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));  
	glEnableVertexAttribArray(9);

- 生成纹理

unsigned int 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);
// 加载并生成纹理
int width, height, nrChannels;
unsigned char *data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
if (data)
{
    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);

glGenTextures
第一个参数是需要输入生成纹理的数量，然后把它们储存在第二个参数的unsigned int数组中

glTexImage2D
第一个参数指定了纹理目标(Target)。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理。

第二个参数为纹理指定多级渐远纹理的级别，这里我们填0，也就是基本级别。

第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。

第四个和第五个参数设置最终的纹理的宽度和高度。我们之前加载图像的时候储存了它们，所以我们使用对应的变量。

第六个参数应该总是被设为0（历史遗留的问题）。

第七第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char(byte)数组，我们将会传入对应值。

最后一个参数是真正的图像数据

- 调用glDrawElements之前绑定纹理

		glBindTexture(GL_TEXTURE_2D, TexBuffer);
		glBindVertexArray(VAO);
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);

其中：
stbi_load的四个参数分别为宽、高、颜色通道数、以及我们所期望的通道数

4. 结果

纹理颜色与顶点颜色混合：FragColor = texture(ourTexture,TexCoord) * vertexColor

完整代码如下：

#define GLEW_STATIC
#define STB_IMAGE_IMPLEMENTATION
#include<iostream>

#include<GL/glew.h>
//#include<glad/glad.h>
#include<GLFW/glfw3.h>
#include"Shader.h"
#include "stb_image.h"


//现在直接在顶点数据里加入颜色信息以及纹理u、v坐标

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    // 左上
};

unsigned int indices[] = {0,1,2,2,3,0};//按照顶点顺序绘制

//着色器部分可以从外部读入了，因此下面部分可以删除不用了

/*
const char* vertexShadersource =
"#version 330 core               \n"
"layout (location = 7) in vec3 aPos; \n"
"void main(){ \n"
" gl_Position  = vec4(aPos.x, aPos.y, aPos.z, 1.0);} \n";

const char* fragmentShadersource =
"#version 330 core               \n"
"out vec4 FragColor; \n"
"void main(){ \n"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);} \n";
*/




//shader的编译

//顶点着色器

//const char* vertexShadersource =
//"#version 330 core               \n"
//"layout (location = 7) in vec3 aPos; \n"
//"layout (location = 8) in vec3 aColor; \n" //加入颜色属性位置是8;
//"out vec4 vertexColor;    \n"   //在 vertexShadersource 中定义并输出到fragmentShadersource中的FragColor来使用
//"void main(){ \n"
//" gl_Position  = vec4(aPos.x, aPos.y, aPos.z, 1.0);   \n"
//" vertexColor = vec4(aColor.x,aColor.y,aColor.z,1.0); \n"
//"} \n";
//
片段着色器
//const char* fragmentShadersource =
//"#version 330 core            \n   "
//"in vec4 vertexColor;    \n        "
//"uniform vec4 ourColor; \n"
//"out vec4 FragColor; \n           "
//"void main(){ \n                  "
//" FragColor = vertexColor;} \n    ";



//定义一个键盘输入
void processInput(GLFWwindow *window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)//如果键盘输入为esc，则设置关闭功能为真
		glfwSetWindowShouldClose(window, true);
}


int main() {

	//读取文件



	glfwInit();
	//告诉版本号
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);

	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);


	GLFWwindow* window = glfwCreateWindow(800, 600, "My Opengl", NULL, NULL);
	if (window == NULL)
	{
		printf("OPen Window failed");
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);//通知GLFW将窗口的上下文设置为当前线程的主上下文了。

	//init glew 得初始化glew 不然会出现异常问题
	glewExperimental = true;

	if (glewInit() != GLEW_OK)
	{
		printf("init glew failed");
		glfwTerminate();
		return -1;
	}

	glViewport(0, 0, 800, 600);//glViewport函数前两个参数控制 程序 （不是opengl的窗口）窗口左下角的位置。第三个和第四个参数控制渲染窗口的宽度和高度（像素）


	//进行面的剔除
	//glEnable(GL_CULL_FACE);//打开面剔除功能
	//glCullFace(GL_BACK);//进行背面的剔除，（猜测：如果三角形的法向量是朝屏幕里面的 应该就是背面）


	//线框模式绘制
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

	Shader* testShader = new Shader("vertexSource.txt", "fragmentSource.txt");

	unsigned int VAO;
	glGenVertexArrays(1, &VAO);
	glBindVertexArray(VAO);



	unsigned int VBO;
	glGenBuffers(1, &VBO);
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);





	unsigned int EBO;
	glGenBuffers(1, &EBO);
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);


	//顶点
	glVertexAttribPointer(7, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);//第一个参数是layout(location = 0)中的0,
	glEnableVertexAttribArray(7);//layout(location = 0)中的0
	
	//颜色							 
	glVertexAttribPointer(8, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float))); 
	glEnableVertexAttribArray(8);

	//u、v坐标（纹理）
	glVertexAttribPointer(9, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));  
	glEnableVertexAttribArray(9);



	unsigned int TexBuffer;
	glGenTextures(1, &TexBuffer);
	glBindTexture(GL_TEXTURE_2D, TexBuffer);

	int width, height, nrChannel;
	unsigned char *data = stbi_load("container.jpg", &width, &height, &nrChannel, 0);
	if (data)
	{
		glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
		glGenerateMipmap(GL_TEXTURE_2D);
	}
	else
	{
		printf("load image failed.");
	}
	stbi_image_free(data);



	while (!glfwWindowShouldClose(window))
	{
		//输入
		processInput(window);
		//渲染部分
		//设置opengl的窗口背景的颜色
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		glBindTexture(GL_TEXTURE_2D, TexBuffer);
		glBindVertexArray(VAO);
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
 
		testShader->use();
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

		glfwSwapBuffers(window);//glfwWindowShouldClose函数在我们每次循环的开始前检查一次GLFW是否被要求退出，如果是的话该函数返回true然后渲染循环便结束了，之后为我们就可以关闭应用程序了
		glfwPollEvents();//glfwPollEvents函数检查有没有触发什么事件（比如键盘输入、鼠标移动等）、更新窗口状态，并调用对应的回调函数
	}

	glfwTerminate();//清除释放分配的资源
	return 0;
}

参考教程：
learnOpenGL CN
傅老师OpenGL教学