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

引言图形渲染管程（Graphics Pipline)工作流程 图形编程顶点数据的存储和处理着色器的编译和使用顶点着色器的定义片段着色器的定义着色器的编译着色器程序 绘制图形

引言

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

图形渲染管程（Graphics Pipline)

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

工作流程

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

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

下面是详细的工作流程，每个步骤由一种着色器(Shader) 或者高度专门化的函数来处理。后一个阶段接受前一个阶段的输出作为输入。这些不同的阶段可以在显卡的不同核心上并行地运行。 这里出现了一个重要的概念顶点(Vertex)。顶点数据(Vertex Date) 包含了一系列顶点，可以看成顶点数组。一个顶点包含了一个点所需要的所有信息，包括3D坐标，颜色等等。

顶点着色器：把3D坐标转为另一种3D坐标（目前我不是很清楚能干什么）形状(图元)着色器：将所有顶点装配成什么性质的图像（即哪一种图元），可能是一系列三角形，线，或者是一系列的点。几何着色器：通过产生新顶点构造出新的（或是其它的）图元来生成其他形状。光栅化：将图元映射为像素，生成下一阶段所需的片段(Fragment)片段着色器：计算像素的最终颜色（包含阴影，光照等等的影响）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