OpenGL-入门-你好，三角形

关键英文术语

Vertex Array Object(VAO) 顶点数组对象
Vertex Buffer Object(VBO) 顶点缓冲对象
Element Buffer Object(EBO) 索引缓冲对象

你好，三角形

在OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转换为适配你屏幕的2D像素。
3D坐标转换为2D坐标的处理过程就是OpenGL的图形渲染管线(Graphics Pipeline), 实际上指的就是一堆原始图形数据经过一个输送管道，期间经过各种变化处理，最终出现在屏幕上的过程。

Shader

图形渲染管线可以分为几个阶段，每个阶段将会把前一个阶段的输出作为输入。所有这些阶段都是高度专门化的，并且很容易被并行执行。由于并行的特性，当今大多数的显卡都具有成千上万的小处理核心，他们在GPU上为每一个阶段(渲染管线)运行着自己的小程序，从而来快速处理你的数据。这些小程序叫做着色器(Shader)。
有些着色器允许开发者自己配置，这就允许我们用自己编写的着色器程序来替换默认的。
下图抽象化展示了图形渲染管线的每个阶段。注意蓝色的部分代表可编程(自定义着色器)的阶段。

pipeline.png

顶点着色器(vertex shader), 它把一个单独的顶点作为输入。顶点着色器主要的目的是把3D坐标转换到ClipSpace中。
图元装配(Primitive Assembly)阶段将顶点着色器输出的所有顶点作为输入，并将所有的点装配为指定的图元形状(GL_POINTS, GL_TRIANGLES, GL_LINE_STRIP等形状)。
图元装配阶段的输出将会传递给几何着色器(Geometry Shader)。它把图元形式的一系列顶点的集合作为输入，可以通过产生新顶点构造出新图元来生成其他形状。(具体实现?)
几何着色器的输出将会传递给光栅化(Rasterization Stage)阶段, 这里它会把图元映射到最终屏幕上相应的像素，生成供片段着色器(Fragment Shader)使用的片段。在片段着色器运行之前会执行裁切(Clipping)。裁切会丢弃超出你的视图以外的所有像素，用于提升执行效率。(如何实现图元到像素的映射?)
片段着色器的主要目的是计算一个像素的最终颜色，这也是所有OpenGL高级效果产生的地方。
在所有对应的颜色值确定之后,最终的对象会被传到最后一个阶段，我们叫做Alpha测试和混合(Blending)阶段。这个阶段还会检测片段的对应深度(和模板(stencil))值，用它们来判断这个像素是在其他物体的前面还是后面，最后决定是否应该丢弃。这个阶段也会检测alpha值并对物体进行混合(blend)。(模板检测作用?)

程序实现

顶点输入

由于我们希望渲染一个三角形，我们一共要指定三个顶点，每个顶点都有一个3d位置。我们会将它们以标准化设备坐标的形式(OpenGl可见区域)定义一个float数组。

float vertices [] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f
};

标准化设备坐标(Normalized Device Coordinates, NDC)

一旦你的顶点坐标已经在顶点着色器中处理过，它们就应该是标准化设备坐标了，标准化设备坐标是一个x、y和z值在-1.0到1.0的一小段空间。任何落在范围外的坐标都会被丢弃/裁剪，不会显示在你的屏幕上。下面你会看到我们定义的在标准化设备坐标中的三角形(忽略z轴)：

NDC

与通常的屏幕坐标不同，y轴正方向为向上，(0, 0)坐标是这个图像的中心，而不是左上角。最终你希望所有(变换过的)坐标都在这个坐标空间中，否则它们就不可见了。
你的标准化设备坐标接着会变换为屏幕空间坐标(Screen-space Coordinates)，这是使用你通过glViewport函数提供的数据，进行视口变换(Viewport Transform)完成的。所得的屏幕空间坐标又会被变换为片段输入到片段着色器中。

定义了这样的顶点数据之后，我们会把它作为输入发送给图形渲染管线的第一个处理阶段: 顶点着色器。它会在GPU上创建内存用于存储我们的顶点数据，还有配置OpenGL如何解释这些内容，并且指定其如何发送给显卡。顶点着色器接着会处理我们在内存中指定数量的顶点。

我们通过VBO来管理内存，它在GPU中可以存储大量顶点。使用这些缓冲对象的好处是我们可以一次性发送一大批数据到GPU，而不是分批一个个发送。因为CPU发送数据到GPU是相对较慢的，所以我们尽量一次性发送足够多的数据。

创建VBO对象

unsigned int VBO;
glGenBuffers(1, &VBO);//(定义一个地址存储buffer数据)

将新创建的缓冲绑定到GL_ARRAY_BUFFER目标上

glBindBuffer(GL_ARRAY_BUFFER, VBO);// 指定buffer类型为GL_ARRAY_BUFFER

从这一刻起，我们使用的任何在GL_ARRAY_BUFFER目标上的缓冲调用都会用来设置当前绑定的缓冲(VBO)。然后我们可以调用glBufferData函数，它会将之前定义的顶点数据复制到缓冲的内存中。

glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW)//填充GL_ARRAY_BUFFER类型数据，数据将会存在我们绑定的GL_ARRAY_BUFFER类型vbo中。

它的第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上。第二个参数指定传输数据的大小(以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。第三个参数是我们希望发送的实际数据。

第四个参数指定了我们希望显卡如何管理给定的数据。它有三种形式：

GL_STATIC_DRAW ：数据不会或几乎不会改变。
GL_DYNAMIC_DRAW：数据会被改变很多。
GL_STREAM_DRAW ：数据每次绘制时都会改变。

现在我们已经把顶点数据储存在显卡的内存中，用VBO这个顶点缓冲对象管理。下面我们会创建一个顶点和片段着色器来真正处理这些数据。现在我们开始着手创建它们吧。

顶点着色器

下面是一个最基础的GLSL的顶点着色器源码:

#version 330 core
layout (location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

代码中使用了一个in关键字，在顶点着色器中声明了所有的顶点属性。现在我们只关心位置数据，所以我们只需要一个顶点属性。由于每个顶点都有一个3D坐标，我们就创建一个vec3输入变量aPos。我们同样也通过layout (location = 0)设定了输入变量的位置值(Location)你后面会看到为什么我们会需要这个位置值。(注意这个location = 0）

为了设置顶点着色器的输出，我们必须把位置数值赋值给预定义的gl_position变量，它在幕后是vec4类似。(为什么把w分量设置为1.0f?)
在真实的程序里输入数据通常都不是标准化设备坐标，所以我们首先必须先把它们转换到OpenGL的可视区域内。(坐标转换)

gl_Position属于顶点着色器阶段的GL内建变量，其输出值代表的是顶点在裁剪空间(Clip Space)中的值。
详细可见官方描述Built-in Variable (GLSL) - OpenGL Wiki (khronos.org)

编译着色器

现在，我们暂时将顶点着色器的源代码硬编码在代码文件顶部的C风格字符串中：

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";

为了能够让OpenGL使用它，我们必须在运行时动态编译它的源代码。
首先要做的是创建一个着色器对象，注意还是用ID来引用的。

unsigned int vertexShader;
vertexShader = glCreateShader(GL_VERTEX_SHADER);

把创建的着色器类型以参数形式提供给 glCreateShader。因为我们正在创建一个顶点着色器，所以传递的参数是GL_VERTEX_SHADER。
下一步，我们将着色器源码附加到着色器对象上，然后编译它。

glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

编译结果检测方式(fail or succes)略过。

片段着色器

#version 330 core
out vec4 FragColor;

void main()
{
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}

声明输出的变量可以用out关键字，这里我们命名为FragColor。
这里我们输出的是不透明的橘黄色。
编译过程和顶点着色器类似，略过。

着色器程序

着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本。如果要使用刚才编译的着色器我们必须把它们链接(Link)为一个着色器程序对象，然后在渲染对象的时候激活这个着色器程序。已激活着色器程序的着色器将在我们发送渲染调用的时候被使用。
当链接着色器时，若输出和输入不匹配时，你将得到一个链接错误。
链接程序如下:

unsigned int shaderProgram;
shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

链接成功后，我们需要激活这个程序对象。

glUseProgram(shaderProgram);

在glUseProgram函数调用之后，每个着色器调用和渲染调用都会使用这个程序对象（也就是之前写的着色器)了。
现在，我们已经将顶点数据发送给了GPU，并创建了自定义着色器程序，并将其激活。但还未结束，OpenGL还不知道它该如何解释GPU内存中的顶点数据，以及它将顶点数据链接到顶点着色器属性上。我们需要告诉OpenGL怎么做。

链接顶点属性

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

image.png

位置数据被储存为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。我们会在后面详细解释这个参数。

现在我们已经定义了OpenGL该如何解释顶点数据，我们现在应该使用glEnableVertexAttribArray，以顶点属性位置值作为参数，启用顶点属性。

注意: 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，意味着数据在着色器端是不可见的，哪怕数据已经上传到GPU，由glEnableVertexAttribArray启用指定属性，才可在顶点着色器中访问逐顶点的属性数据。glVertexAttribPointer或VBO只是建立CPU和GPU之间的逻辑连接，从而实现了CPU数据上传至GPU。但是，数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
为了避免每当我们绘制一个物体的时重复执行buffer创建，数据绑定，顶点属性设置，顶点属性启用这一过程。我们自然想到，有没有一些方法可以使我们把所有这些状态配置在这样一个对象中，并且可以通过绑定这个对象来恢复状态呢？

顶点数组对象

VAO可以像顶点缓冲对象那样被绑定，任何随后的顶点属性调用都会存储在这个VAO中。这样的好处就是，当配置顶点属性指针时，你只需要将那些调用执行一次，之后再绘制物体的时候只需要绑定相应的VAO就行了。
一个顶点数组对象会储存以下这些内容：

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