目录

前言

Part.01 带显示处理器的光栅图形系统结构

视频控制器

监视器

Part.02 渲染管线总概

OpenGL Wiki 渲染管线

概括下

Part.03 CPU应用阶段

数据加载

状态设置

Part.04 GPU几何阶段

顶点处理

顶点后置加工阶段

Part.05 GPU光栅化阶段

光栅化

Early-Z与片元处理

逐采样操作

Part.06 双缓冲交换（SwapBuffer）

---

前言

参考

再次学习OpenGL，这次学习参考来源为：

• 计算机图形学第四版
• Unity Shader入门精要
• LearnOpenGL CN
• OpenGL Wiki 中的 Rendering Pipeline Overview - OpenGL Wiki

环境

环境主要为 LearnOpenGL：

• OpenGL Core 3.3
• GLFW, GLAD

文章结构

共分为四个部分，结合计算机图形学与UnityShader，过程中补入LearnOpenGL和OpenGL Wiki的相关内容：

• 光栅图形系统结构
• 渲染管线总概
• CPU-应用阶段
• GPU-几何阶段
• GPU-光栅化阶段

一点唠叨

其实在很多年前接触opengl时，首先接触的是红宝书蓝宝书，即使包括之前买的计算机图形学第四版，这些书，出于入门的目的，都是使用第三方库进行起手讲解，比如glut，但是，对于从DirectX切换过来的新手其实挺不友好，因为开篇用到的都是封装好的接口。而直到LearnOpenGL的开篇才回到了熟悉的感觉。

---

Part.01 带显示处理器的光栅图形系统结构

• 视频控制器
• 监视器

OpenGL是连接驱动层与用户的枢纽，它的最终目的是为我们输出可视化的图像到屏幕上。第一部分，以彩色CRT作为监视器的光栅图形系统结构为例，来说明OpenGL与设备的关系。个人认为彩色CRT最具代表性，且最容易理解。（取自计算机图形学）

​

没有系统性学习过图形学的朋友，应该对视频控制器和监视器比较陌生，先说这一部分。

视频控制器

当监视器需要显示图像时，按照屏幕像素，逐行逐点的扫描屏幕上每一点像素：

​

 并用对应的像素坐标从帧缓存中获取对应的像素颜色：

​

第一个概念，帧缓存，也即颜色缓存，是经过OpenGL计算处理后，最终产生用于屏幕上需要显示的颜色数据缓存区域。

监视器

监视器采用CRT进行说明。

CRT通过电转热能，激发电子枪产生电子（下图2.1），电子经过控制栅极和聚焦阳极等形成具有强度等级的电子束（下图2.2），再通过水平与垂直偏转版磁场控制使电子束路径偏转（下图2.3），最终撞击到荧光屏上对应的位置。

 ​

​

​

当电子束撞击荧光屏后，电子束部分动能使荧光屏原子的电子跃迁到较高的量子能级，短暂时间之后，电子回落到自身的稳定状态，并释放较小的量子光能，从而显示图像。

 ​

而彩色CRT，则由三个不同RGB电子枪组成，通过荫罩，产生三色荧光聚集在同一点，根据不同的强度强度（0-255），可以形成我们常见的（0,0,0）->（255,255,255）彩色。

---

Part.02 渲染管线总概

• OpenGL Wiki 渲染管线
• 结合UnityShader 概括下

OpenGL Wiki 渲染管线

而在OpenGL Wiki中，对渲染管线做了更为细致的划分，划分为六个阶段，顶点设置、顶点处理、顶点后置处理、光栅化、片元处理、逐采样操作（UnityShader里面根据之前的OpenGL Wiki版本为逐片元操作 Per-Fragment Operations）：

 更为鲜明的表明渲染管线流程之后为如下表示：

​

概括下

结合UnityShader和OpenGL Wiki的内容，整理后可以表示为：

红色字体的顶点后置加工，在UnityShader和OpenGL Wiki中，管线顺序是略有区别的，后面我会以OpenGL Wiki为主介绍这一部分。 

红色字体的提前深度测试，是Unity中对渲染管线的一种优化，称为Early-Z，后面会继续提到。

---

Part.03 CPU应用阶段

• 数据加载
• 渲染状态

数据加载

首先需要理解的一个概念就是，OpenGL里面的API，都是对驱动进行有限的操作，就像一个大型状态机，我们可以通过OpenGL的API进行一系列渲染相关的参数和状态设定。而在进行 VertexShader 和 FragmentShader 的编写之前，就需要先搞定这一部分。下图简单展示了过程：

以游戏角色为例，一个角色可能包含了角色的模型FBX文件（顶点数据），贴图和法线贴图等，这些都是由美术工具创建后以文件的形式存在于硬盘上，需要从硬盘（HDD）加载到系统内存（RAM），随后通过API加载到显存（VRAM）中；另一个方式，也可以直接在代码中进行顶点坐标和顶点颜色等数据的定义。

当我们拥有了这些数据以后，就需要确定我们以什么样的状态去渲染这些数据，我们对 OpenGL的操作都会由CPU压入命令缓存中，GPU按照队列去获取，并且有Opengl API负责将 RAM的数据传递到显存VRAM。如下图：

状态设置

根据LearnOpenGL描述，我将一个基本的渲染状态的设置流程进行如下示意：

 流程上比较关键的步骤为：

1. VAO：顶点数组对象-Vertex Array Object，用于记录后续一系列的状态设置，相当于将渲染状态分组，后面我们需要进行多种不同的渲染状态时，可以直接使用VAO来代替之前繁琐的状态设定流程
2. VBO：顶点缓存对象-Vertex Buffer Object，用于存储顶点数据，可以是坐标，也可以是颜色等。
3. IBO：索引缓存对象-Index Buffer Object，用于存储顶点缓存数据，可以根据有限的顶点数据，生成想要的复杂图元。（PS：我们常说的合批，一般就是指的根据VBO和IBO进行操作，将多个VBO进行合并，并修改IBO，让原本多次的渲染状态形成一次渲染状态进行绘制，从而降低drawcall）
4. 设置所需要用到的各种贴图还有其他数据等等。
5. 设置 顶点着色器（Vertex Shader）、片元着色器（Fragment Shader），创建并链接着色器程序对象（Shader Progam）并进行编译。
6. 上面这些步骤可以看成是一个VAO，在每次draw之前，设置对应的VAO，就可以从快速的切换渲染状态，而不用进行一些列繁琐的操作。

下一篇计划对这一部分进行展开，这里就不细说了。

之后这些渲染状态就被压入command buffer中等待gpu提取。顺带一提，上图中，UnityShader提到，对于CPU操作Command Buffer会出现性能瓶颈，但是没有详细说明，后续还需要细细研究，这算是一个Mark点了。

---

Part.04 GPU几何阶段

• 顶点处理阶段
  • 顶点着色器
  • 曲面细分着色器
  • 几何着色器
• 顶点后置加工阶段
  • 变化反馈
  • 图元组装
  • 裁剪
  • 标准设备坐标
  • 视口
  • 背面剔除

顶点处理

顶点处理阶段包括 顶点着色器、曲面细分着色器、几何着色器，我们一般接触到的都是顶点着色器，即VertexShader。

顶点着色器

顶点着色器的主要任务就是对输入的顶点流进行坐标变换处理，而顶点着色器负责处理的基本流程则是 本地->世界->观察->齐次裁剪 的坐标变换。

我们在Unity Shader中常见的MVP矩阵对应这儿的：

M=model，世界变换

V=view，观察变换

P = projection，投影变换

曲面细分着色器

这是opengl4.0的新特性，是进行更小图元的画分合处理，为可选阶段，后面再深入学习了。

几何着色器

这可以根据输入的顶点流和图元按自己的想法生成更多的图元，为可选阶段，后面再深入学习了。

顶点后置加工阶段

这一个大步骤下跟UnityShader里面渲染管线的顺序不同，我以OpenGL Wiki中的渲染管线流程进行介绍。

变化反馈与图元组装

经过前面的三个着色器（最少一个顶点着色器）处理之后，进入下面两个阶段：

裁剪

平截头体裁剪：经过图元组装生成一个个图元（比如三角形），在齐次裁剪空间中对图元进行裁剪，也可以理解为，对摄像机视野（平截头体）范围外的图元进行裁剪，因为齐次裁剪空间也是经由前面的顶点变换后得到的。

1. 对裁剪空间外的图元直接进行丢弃
2. 对裁剪空间内的图元进行保留
3. 对于裁剪空间相交的图元进行切割，切割后重组裁剪空间内的图元并进行保留。

还可以选择进行 深度夹取 与 平面裁剪，可选。如下图：

标准坐标设备

经由裁剪过后的顶点，进行顶点变换，根据硬件透视除法，转变为标准设备坐标 NDC，z分量取值范围为【-1,1】，图形示意即为上图【对图元进行裁剪】截图的立方体。

 ​​

视口与背面剔除

标准设备坐标根据视口变换，生成屏幕坐标，屏幕坐标与Z值组合形成窗口坐标。最终显示在我们指定的某个窗口上的一个矩形区域范围内。

在这一步，会进行背面剔除，后面我们能学习到，三角形基本图元绘制，是存在顶点绘制顺序的，默认情况下，OpenGL是以屏幕坐标为基础，对逆时针绘制的三角形（右手握拳，Z指向屏幕外）视为正面，可通过API修改；并且默认剔除背面的三角形，也可以通过API修改，所以这里简称为背面剔除。

---

Part.05 GPU光栅化阶段

• 光栅化
  • 三角形设置
  • 三角形遍历
• Early-Z（Unity）
• 片元处理
• 逐采样操作

光栅化

三角形设置与三角形遍历

这两步就是就是根据上一阶段输出的顶点屏幕坐标及其他信息，计算三角形图元在屏幕上像素覆盖的情况，每个覆盖的像素生成一个片元，每个片元会根据之前的顶点信息进行插值计算。

Early-Z与片元处理

首先来看下片元处理，也即 片元着色器（FragmentShader），这一步，是根据得到的片元信息，对片元数据进行自定义处理，修改生成的 像素颜色、深度值、模板值等。而像素颜色与深度值是必然拥有的两个数据。

在这一步中，可以进行透明测试，舍弃那些未达到透明度要求的片元。

在UnityShader中提到了一个优化，就是Early-Z，如果没有开启透明度测试，则会自动开启这个优化，反之如果没有开启透明度测试，则会自动进行这个优化：

深度测试本来是在后面逐采样操作的步骤中进行的，当没有满足深度测试要求的片元会被舍弃。

逐采样操作

这一步中，主要有两个内容。

其一，是对上面计算过后的片元进行各种测试来取舍片元，而是对帧缓冲中的颜色进行修改达到我们的预期。

1. 像素归属测试：比如被另一个窗口挡住了需要绘制部分的像素。
2. 裁减测试：指定一个矩形裁剪区域对我们的片元进行裁剪。
3. 模板测试：筛选出那些符合我们在片元着色器中设定的模板操作符与模板值的片元。
4. 深度测试：筛选出那些符合我们在片元着色器中设定的深度操作符与深度值的片元。

 其二，就是透明度混合。

Output = OP（Source，Destination）

 输出到帧缓冲的颜色 = 混合公式（当前计算中片元颜色，当前帧缓冲中对应位置已有颜色）

 好了，差不多完了，But，还有最后一步。

Part.06 双缓冲交换（SwapBuffer）

如果做过windows开发的可能很早就接触过这个概念，当我们绘制图像的时候，绘制过程是需要时间的，如果直接显示在屏幕上，那么随着绘制过程的进行，画面会出现闪烁。

解决它的办法就是双缓冲，即后台有个缓冲区用于绘制即将要显示的图像，等绘制完成后，与前台的画面进行替换，如此重复进行。

所以FPS最直观的体现在哪，可以想想。（(*^▽^*)）