OpenGL基础词汇理解

1.单词术语：
(1) 顶点数组对象：Vertex Array Object，VAO
(2) 顶点缓冲对象：Vertex Buffer Object，VBO
(3)索引缓冲对象：Element Buffer Object，EBO或Index Buffer Object，IBO

2.图形渲染管线：指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程。主要分为2部分：(1)把3D坐标转化为2D坐标，（2）把2D坐标转变为实际的有颜色的像素。

3.着色器: 在GPU上为每一个（渲染管线）阶段运行各自的小程序，从而在图形渲染管线中快速处理你的数据。用OpenGL着色器语言（GLSL）写的。

图形渲染管线的各个阶段的抽象展示

下面是一个图形渲染管线的每个阶段的抽象展示。要注意蓝色部分代表的是我们可以注入自定义的着色器的部分。

show.png

• 首先，我们以数组的形式传递3个3D坐标作为图形渲染管线的输入，用来表示一个三角形，这个数组叫做顶点数据(Vertex Data)；顶点数据是一系列顶点的集合。一个顶点(Vertex)是一个3D坐标的数据的集合。而顶点数据是用顶点属性(Vertex Attribute)表示的，它可以包含任何我们想用的数据，但是简单起见，我们还是假定每个顶点只由一个3D位置和一些颜色值组成的吧。

当我们谈论一个“位置”的时候，它代表在一个“空间”中所处地点的这个特殊属性；同时“空间”代表着任何一种坐标系，比如x、y、z三维坐标系，x、y二维坐标系

• 图形渲染管线的第一个部分是顶点着色器(Vertex Shader)，它把一个单独的顶点作为输入。

• 图元装配阶段将顶点着色器输出的所有顶点作为输入（如果是GL_POINTS，那么就是一个顶点），并所有的点装配成指定图元的形状；

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

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

OpenGL中的一个片段是OpenGL渲染一个像素所需的所有数据。

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

顶点输入

开始绘制图形之前，我们必须先给OpenGL输入一些顶点数据。OpenGL是一个3D图形库，所以我们在OpenGL中指定的所有坐标都是3D坐标（x、y和z）。OpenGL不是简单地把所有的3D坐标变换为屏幕上的2D像素；OpenGL仅当3D坐标在3个轴（x、y和z）上都为-1.0到1.0的范围内时才处理它。所有在所谓的标准化设备坐标(Normalized Device Coordinates)范围内的坐标才会最终呈现在屏幕上（在这个范围以外的坐标都不会显示）。

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

如下图：

三角形.png

• 顶点着色器：会在GPU上创建内存用于储存我们的顶点数据，还要配置OpenGL如何解释这些内存，并且指定其如何发送给显卡。顶点着色器接着会处理我们在内存中指定数量的顶点。

• 顶点缓冲对象(Vertex Buffer Objects, VBO)：它会在GPU内存（通常被称为显存）中储存大量顶点，使用这些缓冲对象的好处是我们可以一次性的发送一大批数据到显卡上，而不是每个顶点发送一次。

• glGenBuffers函数：生成顶点缓冲对象

GLuint VBO;
glGenBuffers(1, &VBO);

• glBindBuffer函数把新创建的缓冲绑定到GL_ARRAY_BUFFER目标上：

glBindBuffer(GL_ARRAY_BUFFER, VBO);

• glBufferData函数：把之前定义的顶点数据复制到缓冲的内存中,是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数。它的第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上。第二个参数指定传输数据的大小(以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。第三个参数是我们希望发送的实际数据：

    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

第四个参数指定了我们希望显卡如何管理给定的数据。它有三种形式：
(1)GL_STATIC_DRAW ：数据不会或几乎不会改变。
(2)GL_DYNAMIC_DRAW：数据会被改变很多。
(3)GL_STREAM_DRAW ：数据每次绘制时都会改变。

三角形的位置数据不会改变，每次渲染调用时都保持原样，所以它的使用类型最好是GL_STATIC_DRAW。如果，比如说一个缓冲中的数据将频繁被改变，那么使用的类型就是GL_DYNAMIC_DRAW或GL_STREAM_DRAW，这样就能确保显卡把数据放在能够高速写入的内存部分。

顶点着色器

1.用着色器语言GLSL(OpenGL Shading Language)编写顶点着色器，然后编译这个着色器

attribute vec4 vPosition;
void main(void)
{
    gl_Position = vPosition;
}

在顶点着色器中声明所有的输入顶点属性(Input Vertex Attribute)。现在我们只关心位置(Position)数据，所以我们只需要一个顶点属性。GLSL有一个向量数据类型，它包含1到4个float分量，包含的数量可以从它的后缀数字看出来。
向量(Vector)
简明地表达了任意空间中的位置和方向，并且它有非常有用的数学属性。在GLSL中一个向量有最多4个分量，每个分量值都代表空间中的一个坐标，它们可以通过vec.x、vec.y、vec.z和vec.w来获取。注意vec.w分量不是用作表达空间中的位置的（我们处理的是3D不是4D），而是用在所谓透视除法(Perspective Division)上。

为了设置顶点着色器的输出，我们必须把位置数据赋值给预定义的gl_Position变量，它在幕后是vec4类型的

编译着色器

• 我们把需要创建的着色器类型以参数形式提供给glCreateShader。由于我们正在创建一个顶点着色器，传递的参数是GL_VERTEX_SHADER。

//Create the shader object
GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);

• 下一步我们把这个着色器源码附加到着色器对象上，然后编译它：

//Load the shader source
const char * shaderStringUTF8 = [vertexShaderString UTF8String];
glShaderSource(vertexShader, 1, &shaderStringUTF8, NULL);
//Compile the shader
glCompileShader(vertexShader);

glShaderSource函数把要编译的着色器对象作为第一个参数。第二参数指定了传递的源码字符串数量，这里只有一个。第三个参数是顶点着色器真正的源码，第四个参数我们先设置为NULL。

• 检测在调用glCompileShader后编译是否成功了，如果没成功的话，你还会希望知道错误是什么，这样你才能修复它们

//Check the compile status
GLint compiled = 0;
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &compiled);
if (!compiled) {
    GLint infoLen = 0;
    glGetShaderiv(vertexShader, GL_INFO_LOG_LENGTH, &infoLen);
        
    if (infoLen > 1) {
        char *infoLog = malloc(sizeof(char)* infoLen);
        glGetShaderInfoLog(vertexShader, infoLen, NULL, infoLog);
        NSLog(@"Error compiling shader:\n%s\n",infoLog);
        free(infoLog);
    }
        
    glDeleteShader(vertexShader);
    return;
}

片段着色器

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

片段着色器只需要一个输出变量，这个变量是一个4分量向量，它表示的是最终的输出颜色，我们应该自己将其计算出来。这里我们命名为gl_FragColor。

• 编译片段着色器的过程与顶点着色器类似，只不过我们使用GL_FRAGMENT_SHADER常量作为着色器类型：

//Create the shader object
GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
//Load the shader source
const char * shaderStringUTF8 = [fragmentShaderString UTF8String];
glShaderSource(fragmentShader, 1, &shaderStringUTF8, NULL);
//Compile the shader
glCompileShader(fragmentShader);

着色器程序

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

• 创建一个程序对象很简单：

// Create the program object
GLuint shaderProgram = glCreateProgram();

glCreateProgram函数创建一个程序，并返回新创建程序对象的ID引用。现在我们需要把之前编译的着色器附加到程序对象上，然后用glLinkProgram链接它们：

glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

调用glUseProgram函数，用刚创建的程序对象作为它的参数，以激活这个程序对象：

glUseProgram(shaderProgram);

在glUseProgram函数调用之后，每个着色器调用和渲染调用都会使用这个程序对象（也就是之前写的着色器)了。
对了，在把着色器对象链接到程序对象以后，记得删除着色器对象，我们不再需要它们了：

glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

链接顶点属性

顶点缓冲数据.png

• 位置数据被储存为32位（4字节）浮点值。
• 每个位置包含3个这样的值。
• 在这3个值之间没有空隙（或其他值）。这几个值在数组中紧密排列(Tightly Packed)
• 数据中第一个值在缓冲开始的位置。
  有了这些信息我们就可以使用glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据（应用到逐个顶点属性上）了：

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

• 它可以把顶点属性的位置值设置为0。因为我们希望把数据传递到这一个顶点属性中，所以这里我们传入0(GLKVertexAttribPosition)。
• 第二个参数指定顶点属性的大小。顶点属性是一个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。我们会在后面详细解释这个参数。
• glEnableVertexAttribArray，以顶点属性位置值作为参数，启用顶点属性；顶点属性默认是禁用的

// 0. 复制顶点数组到缓冲中供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 1. 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 2. 当我们渲染一个物体时要使用着色器程序
glUseProgram(shaderProgram);

要想绘制我们想要的物体，OpenGL给我们提供了glDrawArrays函数，它使用当前激活的着色器，之前定义的顶点属性配置，和VBO的顶点数据（通过VAO间接绑定）来绘制图元。

glEnableVertexAttribArray(_positionSlot);
glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), NULL);
glDrawArrays(GL_TRIANGLES, 0, 3);

大家一定好奇_positionSlot干嘛的，其实他是顶点着色器里面的vPosition，用来传参数值的

// Get the attribute position slot from program
_positionSlot = glGetAttribLocation(shaderProgram, "vPosition");

glDrawArrays函数第一个参数是我们打算绘制的OpenGL图元的类型。由于我们在一开始时说过，我们希望绘制的是一个三角形，这里传递GL_TRIANGLES给它。第二个参数指定了顶点数组的起始索引，我们这里填0。最后一个参数指定我们打算绘制多少个顶点，这里是3（我们只从我们的数据中渲染一个三角形，它只有3个顶点长）。如图，三角形诞生了！

你好，三角形.png