UnityShader（一）渲染流水线

快来打我* 2023-09-29 03:16 4阅读 0赞

## 什么是流水线 ##

原本组装一个洋娃娃需要四道工序，在没有使用流水线的情况下，每完成一个洋娃娃才能进行下一个洋娃娃的制作，因此平均耗时是四道工序耗时的总和；当引入流水线后，每道流水线都可以不间断地完成自己的工序，无需等待所有工序完成，此时平均耗时取决于耗时最长的那道工序。

![72b1bb1eee3f37fb2d22f46d4f1368d8.png][]

## 什么是渲染流水线 ##

渲染流水线就是将上面的流水线的工序换成：计算机将一个三维场景渲染为一张二维图像到屏幕上的工序。

渲染流水线可以大致分为三个阶段：

**应用阶段 -> 几何阶段 -> 光栅化阶段**

![1f35b856decfa5ba2361b9eb3b51c46a.png][]

#### 应用阶段 ####

这一阶段由开发者主导，需要准备好场景数据、剔除不可见的物体、设置好每个模型的渲染状态等。这一阶段会输出渲染所需的几何信息，即渲染图元，并将这些渲染图元传递到下一阶段。这一阶段通常由CPU实现。

###### 将数据加载到显存 ######

所有渲染所需的数据都需要从硬盘加载到内存中，然后，网格、纹理等数据会加载到显存中。

![68bd840662a0277b7c53940891a7aeb3.png][]

数据加载到显存后，内存中不一定会被清除，因为CPU后续可能仍需要访问它们（如进行碰撞检测）。

###### 设置渲染状态 ######

渲染状态定义了场景中的网格是怎样被渲染出来的，如使用哪个顶点着色器/片元着色器、光源属性、材质等。如果没有更改渲染状态，所有的网格渲染出来的都将使用同一种渲染状态，如下图。

![091b126828d1b17a80f43cbad6fc8be1.png][]

###### 调用Draw Call ######

Draw Call 就是一个命令，CPU调用这个命令，并指向一个需要渲染的图元列表（不会包含任何材质信息，因为在上一个阶段已经生成），然后通知GPU进行渲染。

![79ea11da3da75135ced4f8070482d4cc.png][]

--------------------

GPU从CPU处得到指令后，就会开启一系列流水线操作，把最终图元渲染到屏幕上。而由于后续的两个阶段载体是GPU，因此开发者没有绝对的控制权，下图展示了哪些阶段可以进行编程控制，哪些阶段无法进行干涉：

![c89054b8c15c697ae68d0b906fffbc62.png][]

#### 几何阶段 ####

这一阶段会计算出哪些图元需要绘制，并计算出这些图元对应到屏幕空间上的信息，将这些信息传递到下一个阶段。几何阶段主要在GPU上进行。

###### 顶点着色器 ######

顶点着色器的处理单位是顶点，输入的每一个顶点都会调用一次顶点着色器。顶点着色器会将空间中的顶点的坐标转换到**齐次裁剪空间**中，并计算每个顶点的颜色（逐顶点光照）。

![3ec493dca82dbb112fe1a66797b94905.png][]

###### 裁剪 ######

一个图元与摄像机视野有三种关系：完全在视野内，完全在视野外，部分在视野内。完全在视野内的图元就继续传递给下一个阶段处理；完全在视野外的图元不会继续向下传递；部分在视野内的图元就需要进行裁剪，生成新的在边界上的顶点来代替视野外的顶点。

![d3574c8cbcb562f28939744f0c66521f.png][]

###### 屏幕映射 ######

前面的阶段生成的仍然是三维坐标系下的坐标，而这一阶段的任务就是将图元的x，y坐标转换到**屏幕坐标系**。屏幕坐标系是二维坐标系，但输入的z坐标仍然会被保留，事实上，z坐标与屏幕坐标系共同构成了**窗口坐标系**。这些值会被一同传递到光栅化阶段。

![793e9f9ef00b25fee6e7f4ca58266781.png][]

#### 光栅化阶段 ####

这一阶段会读入上一阶段传递过来的数据，并产生屏幕上的像素，渲染出最终的图像。

###### 三角形设置 ######

上一个阶段输出的是三角网格的顶点，但如果要得到整个三角网格对像素的覆盖情况，就必须计算每条边上的像素坐标。为了能够计算出这些坐标信息，我们需要得到三角形边界的表示方式。这样一个计算三角网格表示数据的过程就是三角形设置。

###### 三角形遍历 ######

这一阶段会检查每个像素是否被一个三角网格覆盖，如果被覆盖就会生成一个**片元**。这里用到了上一个阶段的计算结果，使用三角网格3个顶点信息对围成的区域进行插值运算（例如深度信息）。这一阶段生成的片元并不是像素，而是包含了很多状态的集合，通过这些状态，在之后的阶段就可以计算出每个像素最终的颜色。

![977bd8b2f2908576b380c6715dfb09d6.png][]

###### 片元着色器 ######

这一阶段根据上一阶段输入的片元信息，计算并输出一个或多个颜色值。这一阶段可以完成很多重要的渲染技术，如**纹理采样**。我们通常会在顶点着色器阶段输出每个顶点对应的纹理坐标，然后经过光栅化阶段对三角网格的三个顶点的纹理坐标进行插值，就可以得到所覆盖的片元的纹理坐标。

![8e6c5e883ccd553574a6c0b92d5dacfc.png][]

###### 逐片元操作 ######

这是渲染流水线的最后一步，这一阶段主要有两个任务：  
（1）决定每个片元的可见性，这涉及了很多测试工作，如深度测试、模板测试。  
（2）如果一个片元通过了所有测试，就需要将这个片元的颜色值和已经存储在颜色缓冲区的颜色进行混合。  
下图是逐片元操作的简化流程，实际过程要更加复杂，且流程的顺序也因图形接口的不同而有所差异。

![2e6aab550458f3c857663e3c883c0599.png][]

--------------------

参考文献：  
\[1\]冯乐乐.Unity Shader入门精要\[M\].人民邮电出版社.  
\[2\]Siki学院.Unity Shader入门\[DB/OL\].https://www.sikiedu.com/course/406.

[72b1bb1eee3f37fb2d22f46d4f1368d8.png]: https://img-blog.csdnimg.cn/img_convert/72b1bb1eee3f37fb2d22f46d4f1368d8.png
[1f35b856decfa5ba2361b9eb3b51c46a.png]: https://img-blog.csdnimg.cn/img_convert/1f35b856decfa5ba2361b9eb3b51c46a.png
[68bd840662a0277b7c53940891a7aeb3.png]: https://img-blog.csdnimg.cn/img_convert/68bd840662a0277b7c53940891a7aeb3.png
[091b126828d1b17a80f43cbad6fc8be1.png]: https://img-blog.csdnimg.cn/img_convert/091b126828d1b17a80f43cbad6fc8be1.png
[79ea11da3da75135ced4f8070482d4cc.png]: https://img-blog.csdnimg.cn/img_convert/79ea11da3da75135ced4f8070482d4cc.png
[c89054b8c15c697ae68d0b906fffbc62.png]: https://img-blog.csdnimg.cn/img_convert/c89054b8c15c697ae68d0b906fffbc62.png
[3ec493dca82dbb112fe1a66797b94905.png]: https://img-blog.csdnimg.cn/img_convert/3ec493dca82dbb112fe1a66797b94905.png
[d3574c8cbcb562f28939744f0c66521f.png]: https://img-blog.csdnimg.cn/img_convert/d3574c8cbcb562f28939744f0c66521f.png
[793e9f9ef00b25fee6e7f4ca58266781.png]: https://img-blog.csdnimg.cn/img_convert/793e9f9ef00b25fee6e7f4ca58266781.png
[977bd8b2f2908576b380c6715dfb09d6.png]: https://img-blog.csdnimg.cn/img_convert/977bd8b2f2908576b380c6715dfb09d6.png
[8e6c5e883ccd553574a6c0b92d5dacfc.png]: https://img-blog.csdnimg.cn/img_convert/8e6c5e883ccd553574a6c0b92d5dacfc.png
[2e6aab550458f3c857663e3c883c0599.png]: https://img-blog.csdnimg.cn/img_convert/2e6aab550458f3c857663e3c883c0599.png