南邮 | 计算机图形学第一次小作业：实现两个纹理交替变化

教完纹理，老师布置了第一个小作业：生成两个物体，在其中至少一个物体上实现两个纹理交替变化。

一、思路

首先，要先做出生成两个物体。这里我是用两个 VAO 、 VBO 实现的。

其次，你要传两个纹理进去。

然后，其中一个物体的纹理固定，另一个物体上的纹理，用一个 循环 就行了，每隔一段时间换一个纹理就行。

二、代码

main.cpp

#include <iostream>

//GLEW
#define GLEW_STATIC
#include <GL/glew.h>

//GLFW
#include <GLFW/glfw3.h>

#include "Shader.h"

//SOIL2
//Linux 用的是 \, 但是 / 在 Windows 和 Linux 下都可以用
#include "SOIL2/SOIL2.h" 
#include "SOIL2/stb_image.h"

const GLint WIDTH = 800, HEIGHT = 600;  //新建窗口 
int i = 1;
//the date should be transfered to the memory on the Graphics Card,传到显存
GLuint VAO, VBO, VAO1, VBO1;  //VAO:Vertex Array Object, 顶点数组对象 VBO:Vertex Buffer Object, 顶点缓冲对象 传数据
//transfer the index
GLuint EBO, EBO1;  //创建索引缓冲对象

/* void transfer(GLuint VAO, GLuint VBO, GLfloat vertices[], int m, unsigned int indices[], int n) { glGenVertexArrays(1, &VAO); //创建 VAO glGenBuffers(1, &VBO); glBindVertexArray(VAO); //设当前直线 glBindBuffer(GL_ARRAY_BUFFER, VBO); //VAO 和 VBO 成对出现 // transfer the data：传数据 glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); //静态访问，几乎不修改 //set the attribute glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid *)0); //0:对应调色器里 location 的值；3:对应 vec3 三个量；GL_FLOAT:浮点型；GL_FALSE:；5*sizeof(GLfloat):对应 Buffer 里传的数据；(GLvoid*)0:从第 0 个位置开始 glEnableVertexAttribArray(0); glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat))); //1:对应调色器里 color 的值；2:对应纹理 vec2 两个量；GL_FLOAT:浮点型；GL_FALSE:；5*sizeof(GLfloat):每次跨越 5 个；(GLvoid*) (3 * sizeof(GLfloat)):从第 0 个位置开始 glEnableVertexAttribArray(1); } */

void transfer() {
	//set the attribute
	//设置顶点属性指针
	//第一个参数指定我们要配置的顶点属性。location 的值。
	//第二个参数指定顶点属性的大小。
	//第三个参数指定数据的类型，这里是 GL_FLOAT。
	//第四个参数：是否希望数据被标准化，即所有数据都会被映射到 0 到 1 之间。
	//第五个参数叫做步长，即连续的顶点属性组之间的间隔。
	//最后一个参数：位置数据在缓冲中起始位置的偏移量。
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
		8 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat)));  //0:对应调色器里 location 的值；3:对应 vec3 三个量；GL_FLOAT:vec 都是浮点型；8*sizeof(GLfloat):步长为 8，每次跨越 8 个；(GLvoid *)(3 * sizeof(GLfloat)):从第 3 个位置开始
	glEnableVertexAttribArray(0);
	//设置纹理属性指针
	glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE,
		8 * sizeof(GLfloat), (GLvoid *)(6 * sizeof(GLfloat)));
	glEnableVertexAttribArray(1);
	//设置颜色属性指针
	glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE,
		8 * sizeof(GLfloat), (GLvoid *)0);
	glEnableVertexAttribArray(2);
}

void transfer1() {
	//set the attribute
	//设置顶点属性指针
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
		5 * sizeof(GLfloat), (GLvoid *)0);
	glEnableVertexAttribArray(0);
	//设置纹理属性指针
	glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE,
		5 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat)));
	glEnableVertexAttribArray(1);
}

//二维:S T 三维:S T R
//i:整型 f:浮点型
//纹理环绕方式
void parameter() {
	//第一个参数指定了纹理目标：我们使用的是 2D 纹理，因此纹理目标是 GL_TEXTURE_2D。
	//第二个参数需要我们指定设置的选项与应用的纹理轴。我们打算配置的是WRAP选项，并且指定S和T轴。
	//最后一个参数需要我们传递一个环绕方式。
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);  //2D 纹理，横向坐标，环绕方式
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);  //2D 纹理，纵向坐标，环绕方式
	//纹理过滤
    //GL_NEAREST:选取靠的最近的点，关注点清晰度可以，但边缘会模糊。
	//GL_LINEAR:整体看效果稍微模糊。
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);  //缩小的情况指定纹理
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  //放大的情况指定纹理
}

int main()
{
	glfwInit();  //初始化
	//OpenGL 版本, 用的是新版的 OpenGL 3.3
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	//窗口设置
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);  //我们使用的是核心模式 (Core-profile)
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // must for Mac
	glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);  //改为 GL_TRUE，改变窗口，纵横比会变
	//创建一个窗口对象
	GLFWwindow *window = glfwCreateWindow(WIDTH, HEIGHT, "Learn OpenGL B16xxxxxx", nullptr,
		nullptr);  //窗口名字改成自己的学号, 最后两个参数暂时忽略
	if (nullptr == window)
	{
		std::cout << "Failed to create GLFW window" << std::endl;
		glfwTerminate();
		return -1;
	}

	// next two lines are for mac retina display，获取实际像素
	//为 glViewport 获取窗口的大小
	int screenWidth, screenHeight;
	glfwGetFramebufferSize(window, &screenWidth, &screenHeight);  //获取窗口大小

	//设置当前的窗口上下文
	glfwMakeContextCurrent(window);  //可以新建很多 window

	//初始化 GLEW
	glewExperimental = GL_TRUE;
	if (GLEW_OK != glewInit())
	{
		std::cout << "Failed to initialise GLEW" << std::endl;
		return -1;
	}

	//调用 glViewport 函数来设置窗口维度
	glViewport(0, 0, screenWidth, screenHeight);  //从（0,0）开始画点，直到 WIDTH 和 HEIGHT

	//vs 是顶点调色器，frag 是边缘调色器
	Shader ourShader = Shader("core1.vs", "core1.frag");  //文件相对路径

    //使用纹理坐标更新顶点数据
	GLfloat vertices[] = {
		//color //position //texture
		-0.1f, 0.5f, 0.0f,   -0.1f, 0.5f, 0.0f,      1.0f, 1.0f,  //右上角
		-0.1f, -0.5f, 0.0f,  -0.1f, -0.5f, 0.0f,     1.0f, 0.0f,  //右下角
		-0.9f, -0.5f, 0.0f,  -0.9f, -0.5f, 0.0f,     0.0f, 0.0f,  //左下角
		-0.9f, 0.5f, 0.0f,    -0.9f, 0.5f, 0.0f,      0.0f, 1.0f   //左上角
	};
	//索引数组
	unsigned int indices[] = {
		0,1,3,  //第一个三角形
		1,2,3  //第二个三角形
	};

	GLfloat vertices1[] = {
		//position //texture
		0.9f, 0.5f, 0.0f,      1.0f, 1.0f,  //右上角
		0.9f, -0.5f, 0.0f,     1.0f, 0.0f,  //右下角
		0.1f, -0.5f, 0.0f,     0.0f, 0.0f,  //左下角
		0.1f, 0.5f, 0.0f,      0.0f, 1.0f   //左上角
	};

	//the date should be transfered to the memory on the Graphics Card,传到显存
	glGenVertexArrays(1, &VAO);  //创建 VAO, 顶点数组对象
	glGenBuffers(1, &VBO);  //创建 VBO, 顶点缓冲对象
	glBindVertexArray(VAO);  //绑定VAO
	glBindBuffer(GL_ARRAY_BUFFER, VBO);  //把新创建的缓冲绑定到 GL_ARRAY_BUFFER 目标上
	// transfer the data：传数据, 把用户定义的顶点数据复制到缓冲的内存中
	//第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到 GL_ARRAY_BUFFER 目标上。
	//第二个参数指定传输数据的大小 (以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。
	//第三个参数是我们希望发送的实际数据。
	//第四个参数指定了我们希望显卡如何管理给定的数据。
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);  //静态访问，数据几乎不修改
	//set the attribute
	//设置顶点属性指针,设置顶点属性指针
	transfer();
	//transfer(VAO, VBO, vertices, 20, indices, 6);

	//第 2 个
	glGenVertexArrays(1, &VAO1);  //创建 VAO1, 顶点数组对象
	glGenBuffers(1, &VBO1);  //创建 VBO1, 顶点缓冲对象
	glBindVertexArray(VAO1);  //绑定VAO1
	glBindBuffer(GL_ARRAY_BUFFER, VBO1);  //把新创建的缓冲绑定到 GL_ARRAY_BUFFER 目标上
	// transfer the data：传数据, 把用户定义的顶点数据复制到缓冲的内存中
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices1), vertices1, GL_STATIC_DRAW);  //静态访问，几乎不修改
	//set the attribute
	//设置顶点属性指针,设置顶点属性指针
	transfer1();
	//transfer(VAO1, VBO1, vertices1, 20, indices1, 6);

	//transfer the index
	glGenBuffers(1, &EBO);
	//把索引复制到缓冲里供 OpenGL 使用
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
	//把用户定义的数据复制到当前绑定缓冲中
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

	glBindBuffer(GL_ARRAY_BUFFER, 0);  //解绑 VBO
	glBindVertexArray(0);  //解绑 VAO

	glGenBuffers(1, &EBO1);
	//把索引复制到缓冲里供 OpenGL 使用
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO1);
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

	glBindBuffer(GL_ARRAY_BUFFER, 0);  //解绑 VBO1
	glBindVertexArray(0);  //解绑 VAO1

	GLuint texture, texture1;
	int width, height;

	glGenTextures(1, &texture);  //生成纹理
	glBindTexture(GL_TEXTURE_2D, texture); //绑定 2D 纹理

	//纹理环绕方式
	parameter();

	unsigned char* image = SOIL_load_image("1.jpg",
		&width, &height, 0, SOIL_LOAD_RGBA);  //读取它的 RGBA 信息，0 不知道是什么意思
	//第一个参数指定了纹理目标。
	//第二个参数为纹理指定多级渐远纹理的级别。第 0 层。
	//第三个参数告诉 OpenGL 我们希望把纹理储存为何种格式。
	//第四个和第五个参数设置最终的纹理的宽度和高度。
	//下个参数应该总是被设为 0 。
	//第七第八个参数定义了源图的格式和数据类型。
	//最后一个参数是真正的图像数据。
	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA,
		GL_UNSIGNED_BYTE, image);  //专门贴纹理, 指定传多大的文件空间, 第一个 0 表示第 0 层, 按照 RGBA 的顺序, 第二个 0 不用管, 存成 unsigned_byte 的格式
	glGenerateMipmap(GL_TEXTURE_2D);  //Mipmap:图片金字塔，1/4。
	glBindTexture(GL_TEXTURE_2D, 0);  //解绑纹理

	//第 2 个
	glGenTextures(1, &texture1);  //生成
	glBindTexture(GL_TEXTURE_2D, texture1); //绑定 2D 纹理

	unsigned char* image1 = SOIL_load_image("6.jpg",
		&width, &height, 0, SOIL_LOAD_RGBA);  //读取它的 RGBA 信息
	
	//纹理环绕方式
	parameter();

	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA,
		GL_UNSIGNED_BYTE, image1);  //专门贴纹理, 指定传多大的文件空间, 第一个 0 表示第 0 层, 按照 RGBA 的顺序, 第二个 0 不用管, 存成 unsigned_byte 的格式
	glGenerateMipmap(GL_TEXTURE_2D);  //Mipmap:图片金字塔
	glBindTexture(GL_TEXTURE_2D, 0);  //解绑纹理

	//画图
	while (!glfwWindowShouldClose(window) && (i++))
	{
		glfwPollEvents();  //把所有事件系统都取过来：键盘/鼠标等操作
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);  //设置清空屏幕所用的颜色：RGB，最后一个是透明度
		glClear(GL_COLOR_BUFFER_BIT);  //使用清空屏幕所用的颜色

		//Bind the shader，使用着色器程序
		ourShader.Use();

		glActiveTexture(GL_TEXTURE0);  //第 0 个位置,对应的就是 frag 里面的 uniform, 运行过程中传
		glBindTexture(GL_TEXTURE_2D, texture);  //绑定纹理
		//设置每个着色器采样器属于哪个纹理单元
		glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture0"), 0);  //对应 frag 里面的 ourTexture0, 在 Program 中找 ourTexture0
		//Draw the rectangle
		glBindVertexArray(VAO);  //使用 VAO，直接绑定
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);  //绑定索引
		//第一个参数指定了我们绘制的模式。
		//第二个参数是我们打算绘制顶点的个数。6 个索引。
		//第三个参数是索引的类型。
		//最后一个参数里我们可以指定 EBO 中的偏移量。索引是从 0 开始。
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);  //应用纹理，自动把纹理赋值给片段着色器的采样器
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0); //解绑 EBO
		glBindVertexArray(0);  //解绑 VAO

		//第 2 个
		glActiveTexture(GL_TEXTURE0);  //第 0 个位置,对应的就是 frag 里面的 uniform, 运行过程中传
		
		//纹理变换
		if (i % 1000 < 500) {
			glBindTexture(GL_TEXTURE_2D, texture);  //绑定纹理
			//每个着色器采样器属于哪个纹理单元
			glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture0"), 0);  //对应 frag 里面的 ourTexture0, 在 Program 中找 ourTexture0
		}
		else {
			glBindTexture(GL_TEXTURE_2D, texture1);  //绑定纹理
			//每个着色器采样器属于哪个纹理单元
			glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture1"), 0);  //对应 frag 里面的 ourTexture0, 在 Program 中找 ourTexture0
		}

		//Draw the rectangle
		glBindVertexArray(VAO1);  //使用 VAO1，直接绑定
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO1);  //绑定索引，传递了 GL_ELEMENT_ARRAY_BUFFER 当作缓冲目标
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);  //应用纹理, 自动把纹理赋值给片段着色器的采样器
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);  //解绑定
		glBindVertexArray(0);

		glfwSwapBuffers(window);  //调用双面进行画,显示一个,另一个在画,画面更流畅
	}
	glDeleteVertexArrays(1, &VAO);  //销毁 VAO
	glDeleteBuffers(1, &VBO);
	glDeleteBuffers(1, &EBO);
	glDeleteTextures(1, &texture);

	glDeleteVertexArrays(1, &VAO1);
	glDeleteBuffers(1, &VBO1);
	glDeleteBuffers(1, &EBO1);
	glDeleteTextures(1, &texture1);

	glfwTerminate();  //清理所有的资源并正确地退出应用程序
	return 0;
}

Shader.h

#pragma once
//#ifndef shader_hpp
//#define shader_hpp
//#endif /* shader_hpp */
#include<string>
#include<fstream> //可以打开文件
#include<sstream>
#include<iostream>
#include<GL/glew.h>

class Shader {
	GLuint vertex, fragment;
public:
	GLuint Program;
	Shader(const GLchar * vertexPath, const GLchar * fragmentPath)
	{
		std::string vertexCode;
		std::string fragmentCode;
		std::ifstream vShaderFile;
		std::ifstream fShaderFile;
		vShaderFile.exceptions(std::ifstream::badbit);
		fShaderFile.exceptions(std::ifstream::badbit);

		try {
			vShaderFile.open(vertexPath);
			fShaderFile.open(fragmentPath);

			std::stringstream vShaderStream, fShaderStream;

			vShaderStream << vShaderFile.rdbuf();
			fShaderStream << fShaderFile.rdbuf();

			//文件关闭顺序，先 v 再 f
			vShaderFile.close();
			fShaderFile.close();

			vertexCode = vShaderStream.str();
			fragmentCode = fShaderStream.str();
		}
		catch (std::ifstream::failure a) {
			std::cout <<
				"ERROR::SHADER::FILE_NOT_SUCCESSFULLY_READ"
				<< std::endl;
		}
		//类型转换
		const GLchar *vShaderCode = vertexCode.c_str();
		const GLchar *fShaderCode = fragmentCode.c_str();

		//import and compile the shader
		vertex = glCreateShader(GL_VERTEX_SHADER);  //不用重新定义
		glShaderSource(vertex, 1, &vShaderCode, NULL);
		glCompileShader(vertex);  //编译

		GLint success;
		GLchar infoLog[512];
		glGetShaderiv(vertex, GL_COMPILE_STATUS, &success);  //编译是否完成的位置
		if (!success) {
			glGetShaderInfoLog(vertex, 512, NULL, infoLog);
			std::cout <<
				"ERROR::SHADER::VERTEX::COMPILATION_FAILED\n"
				<< infoLog << std::endl;
		}

		//边缘调色器
		fragment = glCreateShader(GL_FRAGMENT_SHADER);
		glShaderSource(fragment, 1, &fShaderCode, NULL);
		glCompileShader(fragment);  //编译

		glGetShaderiv(fragment, GL_COMPILE_STATUS, &success);  //编译是否完成的位置
		if (!success) {
			glGetShaderInfoLog(fragment, 512, NULL, infoLog);
			std::cout <<
				"ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n"
				<< infoLog << std::endl;
		}

		//create the program and link the program
		this->Program = glCreateProgram();  //创建着色器程序
		glAttachShader(this->Program, vertex);
		glAttachShader(this->Program, fragment);
		glLinkProgram(this->Program);  //链接

		glValidateProgram(this->Program);  //可省略
		glGetProgramiv(this->Program, GL_LINK_STATUS, &success);
		if (!success) {
			glGetProgramInfoLog(this->Program, 512, NULL, infoLog);  //获取链接情况
			std::cout <<
				"ERROR::SHADER::PROGRAM::LINKING_FAILED\n" <<
				infoLog << std::endl;
		}
	}

	~Shader() {
		glDetachShader(this->Program, vertex);
		glDetachShader(this->Program, fragment);
		glDeleteShader(vertex);
		glDeleteShader(fragment);
		glDeleteProgram(this->Program);
	}
	void Use() {
		glUseProgram(this->Program);
	}
};

core1.vs

#version 330 core
layout(location = 0) in vec3 position;
layout(location = 1) in vec2 texCoords;
layout(location = 2) in vec3 color;
out vec2 TexCoords;
out vec3 ourColor;

void main(){
    gl_Position = vec4(position, 1.0f);
	TexCoords = vec2(texCoords.x, 1.0f-texCoords.y);
	ourColor = color;
}

core1.frag

#version 330 core
in vec2 TexCoords;
out vec4 color;

uniform sampler2D ourTexture0;
uniform sampler2D ourTexture1;

void main(){
    color = vec4(texture(ourTexture0, TexCoords).rgb, 1.0f);
}

程序正常运行，能得到以下两张图片交替变化。

左边的纹理是固定不变的，右边的纹理是交替变化的。

三、讲解

glViewport函数。这里老师检查代码的时候提问： 这两行代码干什么用的，我当时没答上来。

    // next two lines are for mac retina display，获取实际像素
	//为 glViewport 获取窗口的大小
	int screenWidth, screenHeight;
	glfwGetFramebufferSize(window, &screenWidth, &screenHeight);  //获取窗口大小

两组顶点数据和一组索引数组。第一个数组被老师当场加了颜色，本来只有位置和纹理坐标的。不过我当场改出来了。

    //使用纹理坐标更新顶点数据
	GLfloat vertices[] = {
		//color //position //texture
		-0.1f, 0.5f, 0.0f,   -0.1f, 0.5f, 0.0f,      1.0f, 1.0f,  //右上角
		-0.1f, -0.5f, 0.0f,  -0.1f, -0.5f, 0.0f,     1.0f, 0.0f,  //右下角
		-0.9f, -0.5f, 0.0f,  -0.9f, -0.5f, 0.0f,     0.0f, 0.0f,  //左下角
		-0.9f, 0.5f, 0.0f,    -0.9f, 0.5f, 0.0f,      0.0f, 1.0f   //左上角
	};
	//索引数组
	unsigned int indices[] = {
		0,1,3,  //第一个三角形
		1,2,3  //第二个三角形
	};

	GLfloat vertices1[] = {
		//position //texture
		0.9f, 0.5f, 0.0f,      1.0f, 1.0f,  //右上角
		0.9f, -0.5f, 0.0f,     1.0f, 0.0f,  //右下角
		0.1f, -0.5f, 0.0f,     0.0f, 0.0f,  //左下角
		0.1f, 0.5f, 0.0f,      0.0f, 1.0f   //左上角
	};

设置顶点属性指针。这里写成了一个子函数。

    //设置顶点属性指针
	transfer();

子函数。

void transfer() {
	//set the attribute
	//设置顶点属性指针
	//第一个参数指定我们要配置的顶点属性。location 的值。
	//第二个参数指定顶点属性的大小。
	//第三个参数指定数据的类型，这里是 GL_FLOAT。
	//第四个参数：是否希望数据被标准化，即所有数据都会被映射到 0 到 1 之间。
	//第五个参数叫做步长，即连续的顶点属性组之间的间隔。
	//最后一个参数：位置数据在缓冲中起始位置的偏移量。
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
		8 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat)));  //0:对应调色器里 location 的值；3:对应 vec3 三个量；GL_FLOAT:vec 都是浮点型；8*sizeof(GLfloat):步长为 8，每次跨越 8 个；(GLvoid *)(3 * sizeof(GLfloat)):从第 3 个位置开始
	glEnableVertexAttribArray(0);
	//设置纹理属性指针
	glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE,
		8 * sizeof(GLfloat), (GLvoid *)(6 * sizeof(GLfloat)));
	glEnableVertexAttribArray(1);
	//设置颜色属性指针
	glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE,
		8 * sizeof(GLfloat), (GLvoid *)0);
	glEnableVertexAttribArray(2);
}

纹理环绕方式也写成了一个子函数。

    //纹理环绕方式
	parameter();

子函数。

//二维:S T 三维:S T R
//i:整型 f:浮点型
//纹理环绕方式
void parameter() {
	//第一个参数指定了纹理目标：我们使用的是 2D 纹理，因此纹理目标是 GL_TEXTURE_2D。
	//第二个参数需要我们指定设置的选项与应用的纹理轴。我们打算配置的是WRAP选项，并且指定S和T轴。
	//最后一个参数需要我们传递一个环绕方式。
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);  //2D 纹理，横向坐标，环绕方式
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);  //2D 纹理，纵向坐标，环绕方式
	//纹理过滤
	//GL_NEAREST:选取靠的最近的点，关注点清晰度可以，但边缘会模糊。
	//GL_LINEAR:整体看效果稍微模糊。
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);  //缩小的情况指定纹理
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  //放大的情况指定纹理
}

两个纹理。

    GLuint texture, texture1;
	int width, height;

	glGenTextures(1, &texture);  //生成纹理
	glBindTexture(GL_TEXTURE_2D, texture); //绑定 2D 纹理

	//纹理环绕方式
	parameter();    
    unsigned char* image = SOIL_load_image("1.jpg",
		&width, &height, 0, SOIL_LOAD_RGBA);  //读取它的 RGBA 信息，0 不知道是什么意思
	//第一个参数指定了纹理目标。
	//第二个参数为纹理指定多级渐远纹理的级别。第 0 层。
	//第三个参数告诉 OpenGL 我们希望把纹理储存为何种格式。
	//第四个和第五个参数设置最终的纹理的宽度和高度。
	//下个参数应该总是被设为 0 。
	//第七第八个参数定义了源图的格式和数据类型。
	//最后一个参数是真正的图像数据。
	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA,
		GL_UNSIGNED_BYTE, image);  //专门贴纹理, 指定传多大的文件空间, 第一个 0 表示第 0 层, 按照 RGBA 的顺序, 第二个 0 不用管, 存成 unsigned_byte 的格式
	glGenerateMipmap(GL_TEXTURE_2D);  //Mipmap:图片金字塔，1/4。
	glBindTexture(GL_TEXTURE_2D, 0);  //解绑纹理

	//第 2 个
	glGenTextures(1, &texture1);  //生成
	glBindTexture(GL_TEXTURE_2D, texture1); //绑定 2D 纹理

	unsigned char* image1 = SOIL_load_image("6.jpg",
		&width, &height, 0, SOIL_LOAD_RGBA);  //读取它的 RGBA 信息
    //纹理环绕方式
	parameter();

	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA,
		GL_UNSIGNED_BYTE, image1);  //专门贴纹理, 指定传多大的文件空间, 第一个 0 表示第 0 层, 按照 RGBA 的顺序, 第二个 0 不用管, 存成 unsigned_byte 的格式
	glGenerateMipmap(GL_TEXTURE_2D);  //Mipmap:图片金字塔
	glBindTexture(GL_TEXTURE_2D, 0);  //解绑纹理

注意：纹理是在 While 循环前就要进行生成并贴纹理的。

绑定纹理。

        glActiveTexture(GL_TEXTURE0);  //第 0 个位置,对应的就是 frag 里面的 uniform, 运行过程中传
		glBindTexture(GL_TEXTURE_2D, texture);  //绑定纹理
		//设置每个着色器采样器属于哪个纹理单元
		glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture0"), 0);  //对应 frag 里面的 ourTexture0, 在 Program 中找 ourTexture0
		//Draw the rectangle
		glBindVertexArray(VAO);  //使用 VAO，直接绑定
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);  //绑定索引
		//第一个参数指定了我们绘制的模式。
		//第二个参数是我们打算绘制顶点的个数。6 个索引。
		//第三个参数是索引的类型。
		//最后一个参数里我们可以指定 EBO 中的偏移量。索引是从 0 开始。
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);  //应用纹理，自动把纹理赋值给片段着色器的采样器
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0); //解绑 EBO
		glBindVertexArray(0);  //解绑 VAO

		//第 2 个
		glActiveTexture(GL_TEXTURE0);  //第 0 个位置,对应的就是 frag 里面的 uniform, 运行过程中传

纹理变化。 While 循环 中，i 进行自增。

        //纹理变化
		if (i % 1000 < 500) {
			glBindTexture(GL_TEXTURE_2D, texture);  //绑定纹理
			//每个着色器采样器属于哪个纹理单元
			glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture0"), 0);  //对应 frag 里面的 ourTexture0, 在 Program 中找 ourTexture0
		}
		else {
			glBindTexture(GL_TEXTURE_2D, texture1);  //绑定纹理
			//每个着色器采样器属于哪个纹理单元
			glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture1"), 0);  //对应 frag 里面的 ourTexture0, 在 Program 中找 ourTexture0
		}

销毁 VAO 、 VBO 、 EBO 、 纹理 。

    glDeleteVertexArrays(1, &VAO);  //销毁 VAO
	glDeleteBuffers(1, &VBO);
	glDeleteBuffers(1, &EBO);
	glDeleteTextures(1, &texture);

	glDeleteVertexArrays(1, &VAO1);
	glDeleteBuffers(1, &VBO1);
	glDeleteBuffers(1, &EBO1);
	glDeleteTextures(1, &texture1);

其实第一次小作业还可以做：实现两个纹理渐变。不过那个要用到 mix 函数、融合因子 ，我照着网上的教程参考了下，没有做出来，就先给老师检查了纹理变化。

四、致谢

从 0 开始的 OpenGL 学习（六）- 显示不同的纹理