OpenGL学习笔记（3）----绘制三角形

引言

上一次通过GLFW新建了窗口，并把窗口背景刷新成绿色。这一次跟着教程在窗口中绘制了一个三角形。这一部分相当于让你把openGL绘制图像的流程大致走了一遍，所以出现了很多重要的概念和知识需要记忆。分享一下我的理解。

图形渲染管程（Graphics Pipline)

OpenGL中事物都处在3D空间，所以OpenGL的大部分工作都是关于把3D坐标转化为你屏幕上的2D像素。而这一过程就由图形渲染管程来实现。

工作流程

图形渲染管程的工作可以被划分为两个部分：

1. 把3D坐标转换成2D坐标（注意不是2D像素）
2. 把2D坐标转化为实际的有颜色的像素

下面是详细的工作流程，每个步骤由一种着色器(Shader) 或者高度专门化的函数来处理。后一个阶段接受前一个阶段的输出作为输入。这些不同的阶段可以在显卡的不同核心上并行地运行。

这里出现了一个重要的概念顶点(Vertex)。顶点数据(Vertex Date) 包含了一系列顶点，可以看成顶点数组。一个顶点包含了一个点所需要的所有信息，包括3D坐标，颜色等等。

1. 顶点着色器：把3D坐标转为另一种3D坐标（目前我不是很清楚能干什么）
2. 形状(图元)着色器：将所有顶点装配成什么性质的图像（即哪一种图元），可能是一系列三角形，线，或者是一系列的点。
3. 几何着色器：通过产生新顶点构造出新的（或是其它的）图元来生成其他形状。
4. 光栅化：将图元映射为像素，生成下一阶段所需的片段(Fragment)
5. 片段着色器：计算像素的最终颜色（包含阴影，光照等等的影响）
6. Alpha测试核混合阶段：检查alpha值和物体遮挡情况，从而进行混合

图形编程

顶点数据的存储和处理

OpenGL提供了三个对象来方便我们进行定点输入

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

顶点缓冲对象VBO是用来存储你要描绘的物体所需要的顶点的所有数据，这个数据以线性数组的结构存储在显存中。
索引缓冲对象EBO是用来存储你要绘制顶点的索引的顺序。
因为在OpenGL中，一个你要绘制的图像可能会包含很多的重复的顶点，使用EBO能够避免重复顶点数据的重复存储。比如用两个三角图原来组合一个矩形ABCD，如果按照VBO中的线性绘制，需要绘制两个三角形ABC和ADC，需要6个顶点数据，VBO重复的存储了A，C顶点的数据。如下：

	// VBO要存储的数据
    float vertices[]{
        -0.5f,  0.5f, 0.0f,  // 顶点A
         0.5f,  0.5f, 0.0f,	 // 顶点B
         0.5f, -0.5f, 0.0f,  // 顶点C
        -0.5f,  0.5f, 0.0f,  // 顶点A
        -0.5f, -0.5f, 0.0f	 // 顶点D
         0.5f, -0.5f, 0.0f,  // 顶点C
    };

如果使用EBO存储绘制顶点的顺序，则VBO只需要4个顶点数据

	// VBO要存储的数据
    float vertices[]{
        -0.5f,  0.5f, 0.0f,  // A
         0.5f,  0.5f, 0.0f,	 // B
         0.5f, -0.5f, 0.0f,  // C
        -0.5f, -0.5f, 0.0f	 // D
    };
    // EBO要存储的数据
    unsigned int indices[] = { // 注意索引从0开始
        0, 1, 2,  // 第一个三角形ABC
        0, 3, 2   // 第二个三角形ADC
    };

顶点数组对象VAO：用我的理解就是封装了对原始顶点数据的处理。
首先引入属性的概念，一个顶点可以很多属性，属性可以是一个三维向量，或是一个数，上面的三角形就只有一个三维向量的位置属性。
因为OpenGL是一个相对底层的东西，VBO只能把原始数据以数字数组的形式进行储存。然而图形渲染管程要求我们输入的是顶点的属性数组，所以OpenGL要求我们在渲染之前对VBO中的单个数组数据解释为一个或多个（取决于属性的数量）属性数组，即把数字数组封装成一个高级一点的数据结构：顶点的属性数组。
自顶向下看，顶点着色器顺序地取一个顶点数据，那这个顶点是原始数据中第几个呢？这是由EBO中的索引决定的，上面的例子就是先取第0，1，2个顶点来画第一个三角形。那么我怎么知道第一个顶点在哪，有什么属性（如何链接顶点属性）？这个由glVertexAttribPointer函数定义，下面定义了一个占位标志为0的三维向量属性：

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

第一个参数我的理解是定义这是渲染器中的第几个属性。这与下面渲染器的定义是相关的。
第二个参数代表该属性有几个数
第三个参数代表属性中数的类型
第四个参数代表数据是否标准化（映射到0，1）
第五个参数代表两个相邻的该属性在VBO上的距离，即步长stide
第六个参数代表该属性在缓冲中起始位置的偏移量
同时还有一对函数用来设置属性对于顶点着色器的可见性

	glEnableVertexAttribArray(0); // 使第0个数组对着色器可见

终于要说到VAO是什么了，VAO存储了对上面一系列操作的定义，即在VBO上进行了一层封装。因为OpenGL是一种状态机系统，所以每次渲染对象时都要绑定VBO，绑定EBO，链接顶点属性，很繁琐，如果你使用VAO封装了这些操作，只需要绑定VAO就可以了。VAO是什么见下图：

下面是生成一个VAO的示意代码：

// 1. 绑定顶点数组对象
glBindVertexArray(VAO);
// 2. 把我们的顶点数组复制到一个顶点缓冲中，供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 复制我们的索引数组到一个索引缓冲中，供OpenGL使用
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 4. 设定顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

使用VAO我们留到下面来说。

着色器的编译和使用

上面定义好了我们的顶点数组，下面定义我们的渲染过程，这一节的目的就是为了生成上面代码中的shaderProgram，着色器程序
OpenGL规定一个渲染过程必须至少要定义两个着色器，顶点着色器和片段着色器。着色器的定义使用一种很像c语言的语言，着色器语言GLSL(OpenGL Shading Language)。

顶点着色器的定义

下面是顶点着色器的GLSL代码：

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

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

其中layout (location = 0) in vec3 aPos表示，取VAO中的第0个属性，将其命名为aPos，其中属性的结构为vec3。顶点着色器会一次读入一个顶点，处理后输出。上面是最简单的处理，添加一维数据。

片段着色器的定义

#version 330 core
out vec4 FragColor;

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

该着色器把每一个像素点的颜色设置为橙色。

着色器的编译

着色器需要编译才能使用，通过下面代码生成着色器

    // 向量着色器
    vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);
    // 检查向量着色器是否被创建成功
    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
    if(!success){
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        cout << "ERROR::SHAFER::VERTEX::COMPILATION_FAILED\n"
             << infoLog << endl;
    }

着色器的GLSL代码被放在字符串vertexShaderSource中。片段着色器同理。

着色器程序

下面创建着色器程序，即一个图形渲染管程。

    // 创建着色器程序
    unsigned int shaderProgram;
    shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);
    // 删除着色器对象，连接后就不需要了
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

所有的准备工作都做完了，下面就可以绘制图形了

绘制图形

经过上面两步，我定义了一个三角形的VAO（没有EBO），一个着色器程序。我又另外定义了一个长方形的VAORect（包含了EBO的定义）。
下面使用VAO和着色器程序绘制三角形:

        // 应用着色器程序
        glUseProgram(shaderProgram);
        // 绘制三角形
        glBindVertexArray(VAO);
        glDrawArrays(GL_TRIANGLES, 0, 6);
        // 解绑VAO
        glBindVertexArray(0);

使用VAORect绘制矩形：

		// 应用着色器程序
        glUseProgram(shaderProgram);
        // 通过EBO来绘制矩形
        glBindVertexArray(VAORect);
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
        // 解绑VAO
        glBindVertexArray(0);

注意因为VAORect中也含有VBO，所以也可以通过glDrawArrays来绘制，但是因为VBO中只有4个顶点的属性，所以最多只能绘制出三角形ABC。
关于我的源码，可以看我的GitHub 中的draw rectangle with Element Buffer Object版本。

本文的思路和出现的图来自于 learnopengl-cn.github.io