提前知识

顶点数组对象：Vertex Array Object，VAO
顶点缓冲对象：Vertex Buffer Object，VBO
索引缓冲对象：Element Buffer Object，EBO或Index Buffer Object，IBO

坐标

在OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素。3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线（Graphics Pipeline，大多译为管线，实际上指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程）管理的。图形渲染管线可以被划分为两个主要部分：第一部分把你的3D坐标转换为2D坐标，第二部分是把2D坐标转变为实际的有颜色的像素。这个教程里，我们会简单地讨论一下图形渲染管线，以及如何利用它创建一些漂亮的像素。

2D坐标和像素也是不同的，2D坐标精确表示一个点在2D空间中的位置，而2D像素是这个点的近似值，2D像素受到你的屏幕/窗口分辨率的限制。

着色器

图形渲染管线接受一组3D坐标，然后把它们转变为你屏幕上的有色2D像素输出。图形渲染管线可以被划分为几个阶段，每个阶段将会把前一个阶段的输出作为输入。所有这些阶段都是高度专门化的（它们都有一个特定的函数），并且很容易并行执行。正是由于它们具有并行执行的特性，当今大多数显卡都有成千上万的小处理核心，它们在GPU上为每一个（渲染管线）阶段运行各自的小程序，从而在图形渲染管线中快速处理你的数据。这些小程序叫做着色器(Shader)。

0. 我们以数组的形式传递3个3D坐标作为图形渲染管线的输入，用来表示一个三角形，这个数组叫做顶点数据(Vertex Data)；顶点数据是一系列顶点的集合。一个顶点(Vertex)是一个3D坐标的数据的集合。而顶点数据是用顶点属性(Vertex Attribute)表示的，它可以包含任何我们想用的数据。

1. 图形渲染管线的第一个部分是顶点着色器(Vertex Shader)，它把一个单独的顶点作为输入。顶点着色器主要的目的是把3D坐标转为另一种3D坐标（后面会解释），同时顶点着色器允许我们对顶点属性进行一些基本处理。

2. 图元装配(Primitive Assembly)阶段将顶点着色器输出的所有顶点作为输入（如果是GL_POINTS，那么就是一个顶点），将所有的点装配成指定图元的形状；本节例子中是一个三角形。

3. 图元装配阶段的输出会传递给几何着色器(Geometry Shader)。几何着色器把图元形式的一系列顶点的集合作为输入，它可以通过产生新顶点构造出新的（或是其它的）图元来生成其他形状。例子中，它生成了另一个三角形。

4. 几何着色器的输出会被传入光栅化阶段(Rasterization Stage)，这里它会把图元映射为最终屏幕上相应的像素，生成供片段着色器(Fragment Shader)使用的片段(Fragment)。在片段着色器运行之前会执行裁切(Clipping)。裁切会丢弃超出你的视图以外的所有像素，用来提升执行效率。

5. 片段着色器的主要目的是计算一个像素的最终颜色，这也是所有OpenGL高级效果产生的地方。通常，片段着色器包含3D场景的数据（比如光照、阴影、光的颜色等等），这些数据可以被用来计算最终像素的颜色。

6. 在所有对应颜色值确定以后，最终的对象将会被传到最后一个阶段，我们叫做Alpha测试和混合(Blending)阶段。这个阶段检测片段的对应的深度（和模板(Stencil)）值（后面会讲），用它们来判断这个像素是其它物体的前面还是后面，决定是否应该丢弃。这个阶段也会检查alpha值（alpha值定义了一个物体的透明度）并对物体进行混合(Blend)。所以，即使在片段着色器中计算出来了一个像素输出的颜色，在渲染多个三角形的时候最后的像素颜色也可能完全不同。

如图-图形渲染管线的每个阶段的抽象展示

图形渲染管线非常复杂，它包含很多可配置的部分。然而，对于大多数场合，我们只需要配置顶点和片段着色器就行了。几何着色器是可选的，通常使用它默认的着色器就行了。在现在的OpenGL中，我们必须定义至少一个顶点着色器和一个片段着色器（因为GPU中没有默认的顶点/片段着色器）

顶点缓冲数据

我们的顶点缓冲数据会被解析为下面这样子：

• 位置数据被储存为32位（4字节）浮点值。
• 每个位置包含3个这样的值。
• 在这3个值之间没有空隙（或其他值）。这几个值在数组中紧密排列(Tightly Packed)。
• 数据中第一个值在缓冲开始的位置。

有了这些信息我们就可以使用glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据（应用到逐个顶点属性上）了。

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

glVertexAttribPointer函数的参数非常多，所以我会逐一介绍它们：

• 第一个参数指定我们要配置的顶点属性。代码中, 我们在顶点着色器中使用layout(location = 0)定义了position顶点属性的位置值(Location)吗？它可以把顶点属性的位置值设置为0。因为我们希望把数据传递到这一个顶点属性中，所以这里我们传入0。
• 第二个参数指定顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3。
• 第三个参数指定数据的类型，这里是GL_FLOAT(GLSL中vec*都是由浮点数值组成的)。
• 第四个参数定义我们是否希望数据被标准化(Normalize)。如果我们设置为GL_TRUE，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE。
• 第五个参数叫做步长(Stride)，它告诉我们在连续的顶点属性组之间的间隔。由于下个组位置数据在3个float之后，我们把步长设置为3 * sizeof(float)。要注意的是由于我们知道这个数组是紧密排列的（在两个顶点属性之间没有空隙）我们也可以设置为0来让OpenGL决定具体步长是多少（只有当数值是紧密排列时才可用）。一旦我们有更多的顶点属性，我们就必须更小心地定义每个顶点属性之间的间隔，我们在后面会看到更多的例子（译注: 这个参数的意思简单说就是从这个属性第二次出现的地方到整个数组0位置之间有多少字节）。
• 最后一个参数的类型是void*，所以需要我们进行这个奇怪的强制类型转换。它表示位置数据在缓冲中起始位置的偏移量(Offset)。由于位置数据在数组的开头，所以这里是0。我们会在后面详细解释这个参数。

顶点数组对象

顶点数组对象(Vertex Array Object, VAO)可以像顶点缓冲对象那样被绑定，任何随后的顶点属性调用都会储存在这个VAO中。这样的好处就是，当配置顶点属性指针时，你只需要将那些调用执行一次，之后再绘制物体的时候只需要绑定相应的VAO就行了。这使在不同顶点数据和属性配置之间切换变得非常简单，只需要绑定不同的VAO就行了。

OpenGL的核心模式要求我们使用VAO，所以它知道该如何处理我们的顶点输入。如果我们绑定VAO失败，OpenGL会拒绝绘制任何东西。

一个顶点数组对象会储存以下这些内容：

• glEnableVertexAttribArray和glDisableVertexAttribArray的调用。
• 通过glVertexAttribPointer设置的顶点属性配置。
• 通过glVertexAttribPointer调用与顶点属性关联的顶点缓冲对象。
  

代码-三角形

#include <glad/glad.h>
#include <GLFW/glfw3.h>
// opengl32.lib;glfw3.lib

#include <iostream>

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);

// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

// 一个非常基础的GLSL顶点着色器的源代码
const char *vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPos;\n"
"void main()\n"
"{\n"
" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"}\0";

// 片段着色器只需要一个输出变量，这个变量是一个4分量向量，它表示的是最终的输出颜色，我们应该自己将其计算出来。
// 我们将一个alpha值为1.0(1.0代表完全不透明)的橘黄色的vec4赋值给颜色输出。
const char *fragmentShaderSource = "#version 330 core\n"
"out vec4 FragColor;\n"
"void main()\n"
"{\n"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\n\0";

int main()
{
	// glfw: initialize and configure
	// ------------------------------
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

#ifdef __APPLE__
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // uncomment this statement to fix compilation on OS X
#endif

	// glfw window creation
	// --------------------
	GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL_WUYANHUI", NULL, NULL);
	if (window == NULL)
	{
		std::cout << "Failed to create GLFW window" << std::endl;
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);
	glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

	// glad: load all OpenGL function pointers
	// ---------------------------------------
	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
	{
		std::cout << "Failed to initialize GLAD" << std::endl;
		return -1;
	}

	// ------------------------------ 分割线 以上内容是 创建一个窗体 ------------------------------
	// ------------------------------ 分割线 以下内容是 绘制一个三角形 ------------------------------
	// OpenGL需要我们至少设置一个顶点和一个片段着色器。
	// 我们需要做的第一件事是用着色器语言GLSL(OpenGL Shading Language)编写顶点着色器，
	// 然后编译这个着色器，这样我们就可以在程序中使用它了。

	// build and compile our shader program // 创建和编译我们的着色器小程序

	// 1. ------------- 创建一个顶点着色器 -------------
	// vertex shader
	int vertexShader = glCreateShader(GL_VERTEX_SHADER); // 创建一个着色器对象，注意还是用ID来引用的
	glShaderSource(vertexShader, 1, &vertexShaderSource, NULL); 
	// 用 glCreateShader创建这个着色器， 把这个着色器源码附加到着色器对象
	// glShaderSource 函数把要编译的着色器对象作为第一个参数。
	// 第二参数指定了传递的源码字符串数量，这里只有一个。
	// 第三个参数是顶点着色器真正的源码，
	// vertexShaderSource, 一个非常基础的GLSL顶点着色器的源代码
	// GLSL版本号和OpenGL的版本是匹配的, 所以版本设置为330， 匹配我们的版本OpenGL3.3
	// 由于每个顶点都有一个3D坐标，我们就创建一个vec3输入变量aPos。
	// 我们同样也通过layout (location = 0)设定了输入变量的位置值(Location)你后面会看到为什么我们会需要这个位置值。
	// 在GLSL中一个向量有最多4个分量，每个分量值都代表空间中的一个坐标，
	// 它们可以通过vec.x、vec.y、vec.z和vec.w来获取。
	// 注意vec.w分量不是用作表达空间中的位置的（我们处理的是3D不是4D），
	// 而是用在所谓透视除法(Perspective Division)上。
	// 第四个参数我们先设置为NULL。
	// 为了设置顶点着色器的输出，我们必须把位置数据赋值给预定义的gl_Position变量，它在幕后是vec4类型的。
	// 它对输入数据什么都没有处理就把它传到着色器的输出了。
	glCompileShader(vertexShader); // 编译的着色器对象
	// check for shader compile errors // 检测在调用 glCompileShader 后编译是否成功
	int success; // 首先我们定义一个整型变量来表示是否成功编译
	char infoLog[512]; //还定义了一个储存错误消息（如果有的话）的容器。
	glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success); // 然后我们用glGetShaderiv检查是否编译成功。
	if (!success) // 如果编译失败，我们会用glGetShaderInfoLog获取错误消息，然后打印它。
	{
		glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
		std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
	}

	// 2. ------------- 创建一个片段着色器 -------------
	// fragment shader
	// 片段着色器所做的是计算像素最后的颜色输出。为了让事情更简单，我们的片段着色器将会一直输出橘黄色。
	int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
	glCompileShader(fragmentShader);
	// check for shader compile errors
	glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
		std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
	}


	// 3. ------------- 着色器程序 -------------
	// 以上两个着色器现在都编译了
	// 剩下的事情是把两个着色器对象链接到一个用来渲染的着色器程序(Shader Program)中。
	// 着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本。
	// 如果要使用刚才编译的着色器我们必须把它们链接(Link)为一个着色器程序对象，
	// 然后在渲染对象的时候激活这个着色器程序。
	// 已激活着色器程序的着色器将在我们发送渲染调用的时候被使用。
	// link shaders // 当链接着色器至一个程序的时候，它会把每个着色器的输出链接到下个着色器的输入。
	int shaderProgram = glCreateProgram();
	glAttachShader(shaderProgram, vertexShader);
	glAttachShader(shaderProgram, fragmentShader);
	glLinkProgram(shaderProgram);
	// check for linking errors // 当输出和输入不匹配的时候，你会得到一个连接错误。
	glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
	if (!success) {
		glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
		std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
	}
	// 在把着色器对象链接到程序对象以后，记得删除着色器对象，我们不再需要它们了。
	glDeleteShader(vertexShader);
	glDeleteShader(fragmentShader);


	// 我们已经把输入顶点数据发送给了GPU，并指示了GPU如何在顶点和片段着色器中处理它。
	// 但还没结束，OpenGL还不知道它该如何解释内存中的顶点数据，
	// 以及它该如何将顶点数据链接到顶点着色器的属性上。
	// 我们需要告诉OpenGL怎么做。

	// 4. -------------链接顶点属性 -------------
	// 顶点着色器允许我们指定任何以顶点属性为形式的输入。
	// 也意味着我们必须手动指定输入数据的哪一个部分对应顶点着色器的哪一个顶点属性。

	// set up vertex data (and buffer(s)) and configure vertex attributes
	// 我们希望渲染一个三角形，我们一共要指定三个顶点，每个顶点都有一个3D位置。
	// 我们会将它们以标准化设备坐标的形式（OpenGL的可见区域）定义为一个float数组。
	// ------------------------------------------------------------------
	float vertices[] = {
		-0.5f, -0.5f, 0.0f, // left 
		 0.5f, -0.5f, 0.0f, // right 
		 0.0f,  0.5f, 0.0f  // top 
	};

	// 我们通过顶点缓冲对象(Vertex Buffer Objects, VBO)管理内存，它会在GPU内存（通常被称为显存）中储存大量顶点。
	unsigned int VBO, VAO;
	glGenVertexArrays(1, &VAO);
	glGenBuffers(1, &VBO);
	// bind the Vertex Array Object first, then bind and set vertex buffer(s), and then configure vertex attributes(s).
	glBindVertexArray(VAO);

	glBindBuffer(GL_ARRAY_BUFFER, VBO);  // 复制顶点数组到缓冲中供OpenGL使用
	// glBindBuffer 给 VBO 绑定一个输入类型。
	// 因为我们给的数据是一个float数组, 所以这里也设置为数组就好了。
	// 我们使用的任何（在GL_ARRAY_BUFFER目标上的）缓冲调用都会用来配置当前绑定的缓冲(VBO)。
	// 然后我们可以调用glBufferData函数，它会把之前定义的顶点数据复制到缓冲的内存中。
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
	// glBufferData 是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数。
	// 第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上。
	// 第二个参数指定传输数据的大小(以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。
	// 第三个参数是我们希望发送的实际数据。
	// 第四个参数指定了我们希望显卡如何管理给定的数据。它有三种形式：
	// GL_STATIC_DRAW ：数据不会或几乎不会改变。
	// GL_DYNAMIC_DRAW：数据会被改变很多。
	// GL_STREAM_DRAW ：数据每次绘制时都会改变。
	// 三角形的位置数据不会改变，每次渲染调用时都保持原样，所以它的使用类型最好是GL_STATIC_DRAW。
	// 如果一个缓冲中的数据将频繁被改变，那么使用的类型就是GL_DYNAMIC_DRAW或GL_STREAM_DRAW，
	// 这样就能确保显卡把数据放在能够高速写入的内存部分。

	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0); // 设置顶点属性指针
	glEnableVertexAttribArray(0);

	// note that this is allowed, the call to glVertexAttribPointer registered VBO as the vertex attribute's bound vertex buffer object so afterwards we can safely unbind
	glBindBuffer(GL_ARRAY_BUFFER, 0);

	// You can unbind the VAO afterwards so other VAO calls won't accidentally modify this VAO, but this rarely happens. Modifying other
	// VAOs requires a call to glBindVertexArray anyways so we generally don't unbind VAOs (nor VBOs) when it's not directly necessary.
	// VAO 顶点数组对象
	// 顶点数组对象(Vertex Array Object, VAO)可以像顶点缓冲对象那样被绑定，
	// 任何随后的顶点属性调用都会储存在这个VAO中。
	// 这样的好处就是，当配置顶点属性指针时，你只需要将那些调用执行一次，
	// 之后再绘制物体的时候只需要绑定相应的VAO就行了。
	// 这使在不同顶点数据和属性配置之间切换变得非常简单，只需要绑定不同的VAO就行了。
	// 要想使用VAO，要做的只是使用 glBindVertexArray 绑定VAO。
	glBindVertexArray(0); // 绑定VAO
	// 一般当你打算绘制多个物体时，
	// 你首先要生成/配置所有的VAO（和必须的VBO及属性指针)，然后储存它们供后面使用。
	// 当我们打算绘制物体的时候就拿出相应的VAO，绑定它，绘制完物体后，再解绑VAO。


	// uncomment this call to draw in wireframe polygons.
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

	// 循环渲染
	// -----------
	while (!glfwWindowShouldClose(window))
	{
		// 输入
		// -----
		processInput(window);

		// 渲染
		// ------
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		// 画一个三角形
		glUseProgram(shaderProgram); // 当我们渲染一个物体时要使用着色器程序
		glBindVertexArray(VAO); // seeing as we only have a single VAO there's no need to bind it every time, but we'll do so to keep things a bit more organized
		// 要想绘制我们想要的物体，OpenGL给我们提供了glDrawArrays函数，
		// 它使用当前激活的着色器，之前定义的顶点属性配置，和VBO的顶点数据（通过VAO间接绑定）来绘制图元。
		glDrawArrays(GL_TRIANGLES, 0, 3); 
		// 要想绘制我们想要的物体，OpenGL给我们提供了glDrawArrays函数，
		// 它使用当前激活的着色器，之前定义的顶点属性配置，和VBO的顶点数据（通过VAO间接绑定）来绘制图元。
		// glDrawArrays 函数第一个参数是我们打算绘制的OpenGL图元的类型。三角形。
		// 第二个参数指定了顶点数组的起始索引，我们这里填0。
		// 最后一个参数指定我们打算绘制多少个顶点，这里是3
		// glBindVertexArray(0); // no need to unbind it every time 

		// 检查并调用事件，交换缓冲
		// -------------------------------------------------------------------------------
		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	// 删除对象, 释放资源
	// ------------------------------------------------------------------------
	glDeleteVertexArrays(1, &VAO);
	glDeleteBuffers(1, &VBO);

	// glfw: terminate, clearing all previously allocated GLFW resources.
	// 当渲染循环结束后我们需要正确释放/删除之前的分配的所有资源。
	// ------------------------------------------------------------------
	glfwTerminate();
	return 0;
}

// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
		glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback function executes
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
	// make sure the viewport matches the new window dimensions; note that width and 
	// height will be significantly larger than specified on retina displays.
	glViewport(0, 0, width, height);
}

三角形效果图

你好矩形

通过两个三角形, 组合成为一个矩形

索引缓冲对象

要解释索引缓冲对象的工作方式最好还是举个例子：假设我们不再绘制一个三角形而是绘制一个矩形。我们可以绘制两个三角形来组成一个矩形（OpenGL主要处理三角形）。这会生成下面的顶点的集合：

float vertices[] = {
    // 第一个三角形
    0.5f, 0.5f, 0.0f,   // 右上角
    0.5f, -0.5f, 0.0f,  // 右下角
    -0.5f, 0.5f, 0.0f,  // 左上角
    // 第二个三角形
    0.5f, -0.5f, 0.0f,  // 右下角
    -0.5f, -0.5f, 0.0f, // 左下角
    -0.5f, 0.5f, 0.0f   // 左上角
};

以看到，有几个顶点叠加了。我们指定了右下角和左上角两次！一个矩形只有4个而不是6个顶点，这样就产生50%的额外开销。当我们有包括上千个三角形的模型之后这个问题会更糟糕，这会产生一大堆浪费。更好的解决方案是只储存不同的顶点，并设定绘制这些顶点的顺序。这样子我们只要储存4个顶点就能绘制矩形了，之后只要指定绘制的顺序就行了。

很幸运，索引缓冲对象的工作方式正是这样的。和顶点缓冲对象一样，EBO也是一个缓冲，它专门储存索引，OpenGL调用这些顶点的索引来决定该绘制哪个顶点。所谓的索引绘制(Indexed Drawing)正是我们问题的解决方案。

首先，我们先要定义（不重复的）顶点，和绘制出矩形所需的索引：

float vertices[] = {
    0.5f, 0.5f, 0.0f,   // 右上角
    0.5f, -0.5f, 0.0f,  // 右下角
    -0.5f, -0.5f, 0.0f, // 左下角
    -0.5f, 0.5f, 0.0f   // 左上角
};

unsigned int indices[] = { // 注意索引从0开始! 
    0, 1, 3, // 第一个三角形
    1, 2, 3  // 第二个三角形
};

你可以看到，当时用索引的时候，我们只定义了4个顶点，而不是6个。

代码-矩形

#include <glad/glad.h>
#include <GLFW/glfw3.h>
// opengl32.lib;glfw3.lib

#include <iostream>

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);

// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

// 一个非常基础的GLSL顶点着色器的源代码
const char *vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPos;\n"
"void main()\n"
"{\n"
" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"}\0";

// 片段着色器只需要一个输出变量，这个变量是一个4分量向量，它表示的是最终的输出颜色，我们应该自己将其计算出来。
// 我们将一个alpha值为1.0(1.0代表完全不透明)的橘黄色的vec4赋值给颜色输出。
const char *fragmentShaderSource = "#version 330 core\n"
"out vec4 FragColor;\n"
"void main()\n"
"{\n"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\n\0";

int main()
{
	// glfw: initialize and configure
	// ------------------------------
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

#ifdef __APPLE__
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // uncomment this statement to fix compilation on OS X
#endif

	// glfw window creation
	// --------------------
	GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL_WUYANHUI", NULL, NULL);
	if (window == NULL)
	{
		std::cout << "Failed to create GLFW window" << std::endl;
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);
	glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

	// glad: load all OpenGL function pointers
	// ---------------------------------------
	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
	{
		std::cout << "Failed to initialize GLAD" << std::endl;
		return -1;
	}

	// ------------------------------ 分割线 以上内容是 创建一个窗体 ------------------------------
	// ------------------------------ 分割线 以下内容是 绘制一个三角形 ------------------------------
	// OpenGL需要我们至少设置一个顶点和一个片段着色器。
	// 我们需要做的第一件事是用着色器语言GLSL(OpenGL Shading Language)编写顶点着色器，
	// 然后编译这个着色器，这样我们就可以在程序中使用它了。

	// build and compile our shader program // 创建和编译我们的着色器小程序

	// 1. ------------- 创建一个顶点着色器 -------------
	// vertex shader
	int vertexShader = glCreateShader(GL_VERTEX_SHADER); // 创建一个着色器对象，注意还是用ID来引用的
	glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
	// 用 glCreateShader创建这个着色器， 把这个着色器源码附加到着色器对象
	// glShaderSource 函数把要编译的着色器对象作为第一个参数。
	// 第二参数指定了传递的源码字符串数量，这里只有一个。
	// 第三个参数是顶点着色器真正的源码，
	// vertexShaderSource, 一个非常基础的GLSL顶点着色器的源代码
	// GLSL版本号和OpenGL的版本是匹配的, 所以版本设置为330， 匹配我们的版本OpenGL3.3
	// 由于每个顶点都有一个3D坐标，我们就创建一个vec3输入变量aPos。
	// 我们同样也通过layout (location = 0)设定了输入变量的位置值(Location)你后面会看到为什么我们会需要这个位置值。
	// 在GLSL中一个向量有最多4个分量，每个分量值都代表空间中的一个坐标，
	// 它们可以通过vec.x、vec.y、vec.z和vec.w来获取。
	// 注意vec.w分量不是用作表达空间中的位置的（我们处理的是3D不是4D），
	// 而是用在所谓透视除法(Perspective Division)上。
	// 第四个参数我们先设置为NULL。
	// 为了设置顶点着色器的输出，我们必须把位置数据赋值给预定义的gl_Position变量，它在幕后是vec4类型的。
	// 它对输入数据什么都没有处理就把它传到着色器的输出了。
	glCompileShader(vertexShader); // 编译的着色器对象
	// check for shader compile errors // 检测在调用 glCompileShader 后编译是否成功
	int success; // 首先我们定义一个整型变量来表示是否成功编译
	char infoLog[512]; //还定义了一个储存错误消息（如果有的话）的容器。
	glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success); // 然后我们用glGetShaderiv检查是否编译成功。
	if (!success) // 如果编译失败，我们会用glGetShaderInfoLog获取错误消息，然后打印它。
	{
		glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
		std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
	}

	// 2. ------------- 创建一个片段着色器 -------------
	// fragment shader
	// 片段着色器所做的是计算像素最后的颜色输出。为了让事情更简单，我们的片段着色器将会一直输出橘黄色。
	int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
	glCompileShader(fragmentShader);
	// check for shader compile errors
	glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
		std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
	}


	// 3. ------------- 着色器程序 -------------
	// 以上两个着色器现在都编译了
	// 剩下的事情是把两个着色器对象链接到一个用来渲染的着色器程序(Shader Program)中。
	// 着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本。
	// 如果要使用刚才编译的着色器我们必须把它们链接(Link)为一个着色器程序对象，
	// 然后在渲染对象的时候激活这个着色器程序。
	// 已激活着色器程序的着色器将在我们发送渲染调用的时候被使用。
	// link shaders // 当链接着色器至一个程序的时候，它会把每个着色器的输出链接到下个着色器的输入。
	int shaderProgram = glCreateProgram();
	glAttachShader(shaderProgram, vertexShader);
	glAttachShader(shaderProgram, fragmentShader);
	glLinkProgram(shaderProgram);
	// check for linking errors // 当输出和输入不匹配的时候，你会得到一个连接错误。
	glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
	if (!success) {
		glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
		std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
	}
	// 在把着色器对象链接到程序对象以后，记得删除着色器对象，我们不再需要它们了。
	glDeleteShader(vertexShader);
	glDeleteShader(fragmentShader);


	// 我们已经把输入顶点数据发送给了GPU，并指示了GPU如何在顶点和片段着色器中处理它。
	// 但还没结束，OpenGL还不知道它该如何解释内存中的顶点数据，
	// 以及它该如何将顶点数据链接到顶点着色器的属性上。
	// 我们需要告诉OpenGL怎么做。

	// 4. -------------链接顶点属性 -------------
	// 顶点着色器允许我们指定任何以顶点属性为形式的输入。
	// 也意味着我们必须手动指定输入数据的哪一个部分对应顶点着色器的哪一个顶点属性。

	// set up vertex data (and buffer(s)) and configure vertex attributes
	// 我们希望渲染2个三角形，我们一共要指定4个顶点，每个顶点都有一个3D位置。
	// 我们会将它们以标准化设备坐标的形式（OpenGL的可见区域）定义为一个float数组。
	// ------------------------------------------------------------------
	float vertices[] = {
		0.5f,  0.5f, 0.0f,  // top right
		0.5f, -0.5f, 0.0f,  // bottom right
	   -0.5f, -0.5f, 0.0f,  // bottom left
	   -0.5f,  0.5f, 0.0f   // top left 
	};
	unsigned int indices[] = {  // note that we start from 0!
		0, 1, 3,  // first Triangle
		1, 2, 3   // second Triangle
	};

	// 我们通过顶点缓冲对象(Vertex Buffer Objects, VBO)管理内存，它会在GPU内存（通常被称为显存）中储存大量顶点。
	unsigned int VBO, VAO, EBO;// 变动的地方
	glGenVertexArrays(1, &VAO);
	glGenBuffers(1, &VBO);
	glGenBuffers(1, &EBO); // 变动的地方
	// bind the Vertex Array Object first, then bind and set vertex buffer(s), and then configure vertex attributes(s).
	glBindVertexArray(VAO); // 变动的地方

	glBindBuffer(GL_ARRAY_BUFFER, VBO);  // 复制顶点数组到缓冲中供OpenGL使用
	// glBindBuffer 给 VBO 绑定一个输入类型。
	// 因为我们给的数据是一个float数组, 所以这里也设置为数组就好了。
	// 我们使用的任何（在GL_ARRAY_BUFFER目标上的）缓冲调用都会用来配置当前绑定的缓冲(VBO)。
	// 然后我们可以调用glBufferData函数，它会把之前定义的顶点数据复制到缓冲的内存中。
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
	// glBufferData 是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数。
	// 第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上。
	// 第二个参数指定传输数据的大小(以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。
	// 第三个参数是我们希望发送的实际数据。
	// 第四个参数指定了我们希望显卡如何管理给定的数据。它有三种形式：
	// GL_STATIC_DRAW ：数据不会或几乎不会改变。
	// GL_DYNAMIC_DRAW：数据会被改变很多。
	// GL_STREAM_DRAW ：数据每次绘制时都会改变。
	// 三角形的位置数据不会改变，每次渲染调用时都保持原样，所以它的使用类型最好是GL_STATIC_DRAW。
	// 如果一个缓冲中的数据将频繁被改变，那么使用的类型就是GL_DYNAMIC_DRAW或GL_STREAM_DRAW，
	// 这样就能确保显卡把数据放在能够高速写入的内存部分。


	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); // 变动的地方
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); // 变动的地方

	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0); // 设置顶点属性指针
	glEnableVertexAttribArray(0);

	// note that this is allowed, the call to glVertexAttribPointer registered VBO as the vertex attribute's bound vertex buffer object so afterwards we can safely unbind
	glBindBuffer(GL_ARRAY_BUFFER, 0);

	// You can unbind the VAO afterwards so other VAO calls won't accidentally modify this VAO, but this rarely happens. Modifying other
	// VAOs requires a call to glBindVertexArray anyways so we generally don't unbind VAOs (nor VBOs) when it's not directly necessary.
	// VAO 顶点数组对象
	// 顶点数组对象(Vertex Array Object, VAO)可以像顶点缓冲对象那样被绑定，
	// 任何随后的顶点属性调用都会储存在这个VAO中。
	// 这样的好处就是，当配置顶点属性指针时，你只需要将那些调用执行一次，
	// 之后再绘制物体的时候只需要绑定相应的VAO就行了。
	// 这使在不同顶点数据和属性配置之间切换变得非常简单，只需要绑定不同的VAO就行了。
	// 要想使用VAO，要做的只是使用 glBindVertexArray 绑定VAO。
	glBindVertexArray(0); // 绑定VAO
	// 一般当你打算绘制多个物体时，
	// 你首先要生成/配置所有的VAO（和必须的VBO及属性指针)，然后储存它们供后面使用。
	// 当我们打算绘制物体的时候就拿出相应的VAO，绑定它，绘制完物体后，再解绑VAO。


	// uncomment this call to draw in wireframe polygons.
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

	// 循环渲染
	// -----------
	while (!glfwWindowShouldClose(window))
	{
		// 输入
		// -----
		processInput(window);

		// 渲染
		// ------
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		// 画一个三角形
		glUseProgram(shaderProgram); // 当我们渲染一个物体时要使用着色器程序
		glBindVertexArray(VAO); // seeing as we only have a single VAO there's no need to bind it every time, but we'll do so to keep things a bit more organized
		// 要想绘制我们想要的物体，OpenGL给我们提供了glDrawArrays函数，
		// 它使用当前激活的着色器，之前定义的顶点属性配置，和VBO的顶点数据（通过VAO间接绑定）来绘制图元。
		// glDrawArrays(GL_TRIANGLES, 0, 6); // 变动的地方
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0); // 变动的地方
		// 要想绘制我们想要的物体，OpenGL给我们提供了glDrawArrays函数，
		// 它使用当前激活的着色器，之前定义的顶点属性配置，和VBO的顶点数据（通过VAO间接绑定）来绘制图元。
		// glDrawArrays 函数第一个参数是我们打算绘制的OpenGL图元的类型。三角形。
		// 第二个参数指定了顶点数组的起始索引，我们这里填0。
		// 最后一个参数指定我们打算绘制多少个顶点，这里是3
		// glBindVertexArray(0); // no need to unbind it every time 

		// 检查并调用事件，交换缓冲
		// -------------------------------------------------------------------------------
		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	// 删除对象, 释放资源
	// ------------------------------------------------------------------------
	glDeleteVertexArrays(1, &VAO);
	glDeleteBuffers(1, &VBO);
	glDeleteBuffers(1, &EBO); // 变动的地方

	// glfw: terminate, clearing all previously allocated GLFW resources.
	// 当渲染循环结束后我们需要正确释放/删除之前的分配的所有资源。
	// ------------------------------------------------------------------
	glfwTerminate();
	return 0;
}

// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
		glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback function executes
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
	// make sure the viewport matches the new window dimensions; note that width and 
	// height will be significantly larger than specified on retina displays.
	glViewport(0, 0, width, height);
}

矩形效果图

练习

1.添加更多顶点到数据中，使用glDrawArrays，尝试绘制两个彼此相连的三角形

在原来绘制三角形的代码上修改顶点数据数组vertices和glDrawArrays的参数就行了！

float vertices[] = {
		// first triangle
		-0.9f, -0.5f, 0.0f,  // left 
		-0.0f, -0.5f, 0.0f,  // right
		-0.45f, 0.5f, 0.0f,  // top 
		// second triangle
		 0.0f, -0.5f, 0.0f,  // left
		 0.9f, -0.5f, 0.0f,  // right
		 0.45f, 0.5f, 0.0f   // top 
	};

glDrawArrays(GL_TRIANGLES, 0, 6);

效果图

2.创建相同的两个三角形，但对它们的数据使用不同的VAO和VBO

其实就是先后渲染两个三角形

// set up vertex data (and buffer(s)) and configure vertex attributes
	// ------------------------------------------------------------------
	float firstTriangle[] = {
		-0.9f, -0.5f, 0.0f,  // left 
		-0.0f, -0.5f, 0.0f,  // right
		-0.45f, 0.5f, 0.0f,  // top 
	};
	float secondTriangle[] = {
		0.0f, -0.5f, 0.0f,  // left
		0.9f, -0.5f, 0.0f,  // right
		0.45f, 0.5f, 0.0f   // top 
	};
	unsigned int VBOs[2], VAOs[2];
	glGenVertexArrays(2, VAOs); // we can also generate multiple VAOs or buffers at the same time
	glGenBuffers(2, VBOs);
	// first triangle setup
	// --------------------
	glBindVertexArray(VAOs[0]);
	glBindBuffer(GL_ARRAY_BUFFER, VBOs[0]);
	glBufferData(GL_ARRAY_BUFFER, sizeof(firstTriangle), firstTriangle, GL_STATIC_DRAW);
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);	// Vertex attributes stay the same
	glEnableVertexAttribArray(0);
	// glBindVertexArray(0); // no need to unbind at all as we directly bind a different VAO the next few lines
	// second triangle setup
	// ---------------------
	glBindVertexArray(VAOs[1]);	// note that we bind to a different VAO now
	glBindBuffer(GL_ARRAY_BUFFER, VBOs[1]);	// and a different VBO
	glBufferData(GL_ARRAY_BUFFER, sizeof(secondTriangle), secondTriangle, GL_STATIC_DRAW);
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0); // because the vertex data is tightly packed we can also specify 0 as the vertex attribute's stride to let OpenGL figure it out
	glEnableVertexAttribArray(0);
	// glBindVertexArray(0); // not really necessary as well, but beware of calls that could affect VAOs while this one is bound (like binding element buffer objects, or enabling/disabling vertex attributes)


	// uncomment this call to draw in wireframe polygons.
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

	// 循环渲染
	// -----------
	while (!glfwWindowShouldClose(window))
	{
		// 输入
		// -----
		processInput(window);

		// 渲染
		// ------
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		// 画一个三角形
		glUseProgram(shaderProgram); // 当我们渲染一个物体时要使用着色器程序
		glBindVertexArray(VAOs[0]);
		glDrawArrays(GL_TRIANGLES, 0, 3);
		// then we draw the second triangle using the data from the second VAO
		glBindVertexArray(VAOs[1]);
		glDrawArrays(GL_TRIANGLES, 0, 3);

		// 检查并调用事件，交换缓冲
		// -------------------------------------------------------------------------------
		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	// 删除对象, 释放资源
	// ------------------------------------------------------------------------
	glDeleteVertexArrays(1, VAOs);
	glDeleteBuffers(1, VBOs);

效果和练习1一样

3.创建两个着色器程序，第二个程序使用一个不同的片段着色器，输出黄色；再次绘制这两个三角形，让其中一个输出为黄色

两个着色器， 各自绘制各自

// build and compile our shader program
	// ------------------------------------
	// we skipped compile log checks this time for readability (if you do encounter issues, add the compile-checks! see previous code samples)
	unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
	unsigned int fragmentShaderOrange = glCreateShader(GL_FRAGMENT_SHADER); // the first fragment shader that outputs the color orange
	unsigned int fragmentShaderYellow = glCreateShader(GL_FRAGMENT_SHADER); // the second fragment shader that outputs the color yellow
	unsigned int shaderProgramOrange = glCreateProgram();
	unsigned int shaderProgramYellow = glCreateProgram(); // the second shader program
	glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
	glCompileShader(vertexShader);
	glShaderSource(fragmentShaderOrange, 1, &fragmentShader1Source, NULL);
	glCompileShader(fragmentShaderOrange);
	glShaderSource(fragmentShaderYellow, 1, &fragmentShader2Source, NULL);
	glCompileShader(fragmentShaderYellow);
	// link the first program object
	glAttachShader(shaderProgramOrange, vertexShader);
	glAttachShader(shaderProgramOrange, fragmentShaderOrange);
	glLinkProgram(shaderProgramOrange);
	// then link the second program object using a different fragment shader (but same vertex shader)
	// this is perfectly allowed since the inputs and outputs of both the vertex and fragment shaders are equally matched.
	glAttachShader(shaderProgramYellow, vertexShader);
	glAttachShader(shaderProgramYellow, fragmentShaderYellow);
	glLinkProgram(shaderProgramYellow);

	// set up vertex data (and buffer(s)) and configure vertex attributes
	// ------------------------------------------------------------------
	float firstTriangle[] = {
		-0.9f, -0.5f, 0.0f,  // left 
		-0.0f, -0.5f, 0.0f,  // right
		-0.45f, 0.5f, 0.0f,  // top 
	};
	float secondTriangle[] = {
		0.0f, -0.5f, 0.0f,  // left
		0.9f, -0.5f, 0.0f,  // right
		0.45f, 0.5f, 0.0f   // top 
	};
	unsigned int VBOs[2], VAOs[2];
	glGenVertexArrays(2, VAOs); // we can also generate multiple VAOs or buffers at the same time
	glGenBuffers(2, VBOs);
	// first triangle setup
	// --------------------
	glBindVertexArray(VAOs[0]);
	glBindBuffer(GL_ARRAY_BUFFER, VBOs[0]);
	glBufferData(GL_ARRAY_BUFFER, sizeof(firstTriangle), firstTriangle, GL_STATIC_DRAW);
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);	// Vertex attributes stay the same
	glEnableVertexAttribArray(0);
	// glBindVertexArray(0); // no need to unbind at all as we directly bind a different VAO the next few lines
	// second triangle setup
	// ---------------------
	glBindVertexArray(VAOs[1]);	// note that we bind to a different VAO now
	glBindBuffer(GL_ARRAY_BUFFER, VBOs[1]);	// and a different VBO
	glBufferData(GL_ARRAY_BUFFER, sizeof(secondTriangle), secondTriangle, GL_STATIC_DRAW);
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0); // because the vertex data is tightly packed we can also specify 0 as the vertex attribute's stride to let OpenGL figure it out
	glEnableVertexAttribArray(0);
	// glBindVertexArray(0); // not really necessary as well, but beware of calls that could affect VAOs while this one is bound (like binding element buffer objects, or enabling/disabling vertex attributes)


	// uncomment this call to draw in wireframe polygons.
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

	// render loop
	// -----------
	while (!glfwWindowShouldClose(window))
	{
		// input
		// -----
		processInput(window);

		// render
		// ------
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		// now when we draw the triangle we first use the vertex and orange fragment shader from the first program
		glUseProgram(shaderProgramOrange);
		// draw the first triangle using the data from our first VAO
		glBindVertexArray(VAOs[0]);
		glDrawArrays(GL_TRIANGLES, 0, 3);	// this call should output an orange triangle
		// then we draw the second triangle using the data from the second VAO
		// when we draw the second triangle we want to use a different shader program so we switch to the shader program with our yellow fragment shader.
		glUseProgram(shaderProgramYellow);
		glBindVertexArray(VAOs[1]);
		glDrawArrays(GL_TRIANGLES, 0, 3);	// this call should output a yellow triangle

		// glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
		// -------------------------------------------------------------------------------
		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	// optional: de-allocate all resources once they've outlived their purpose:
	// ------------------------------------------------------------------------
	glDeleteVertexArrays(2, VAOs);
	glDeleteBuffers(2, VBOs);

效果图-两个着色器