一、定位游戏性能瓶颈

1.1 游戏循环

基本循环:游戏逻辑-渲染提交-等待渲染完成(注意:游戏逻辑指的是除去渲染之外所有的CPU运算)。
基本的游戏循环可以理解为先执行游戏逻辑,比如获得输入,然后更新玩家位置,播放动画,物理碰撞等,然后渲染引擎会将要渲染的游戏画面信息提交到GPU,CPU则等待GPU完成该一帧的渲染结果。

1.1.1 单线程渲染


上图可以看到主线程直接提交渲染命令GCMD给渲染设备。主线程需要等待图形设备渲染完成。

1.1.2 多线程渲染


主线程:游戏逻辑-提交渲染到渲染线程-等待渲染完成。
渲染线程:提交渲染命令给GPU-等待渲染完成。
GPU:等待渲染命令-执行渲染。

从上图可以看到,主线程将渲染命令封装后提交给渲染线程,渲染再提交给图形设备渲染画面。因此,渲染线程会比主线程延迟一帧。虽然新增了渲染线程来减少CPU等待渲染完成的时间,但是每一帧主线程还是会等待渲染线程完成上一帧的渲染。因此,还是可以按照基本的游戏循环来分析每一帧的运行过程。

1.2 利用工具确定执行时间

我们需要使用工具,比如UWA分析报告或者Unity的Profile等来确定主线程的游戏逻辑、渲染提交、渲染等待,这三个部分的整体执行时间。

  1. 或者利用工具获得GPU每帧耗时是多少,是否超过帧率的要求,比如30帧的话,那么一帧是33.3ms,GPU的每帧耗时就不能就不能超过33.3ms,或者不能比CPU的耗时多,否则就是GPU的性能瓶颈。
  2. 如果GPU不存在瓶颈,那么问题就在CPU上,这个时候要进一步分析CPU的瓶颈是游戏逻辑还是渲染提交上,这个UWA的性能分析报告和Unity的Profile都可以查看。
  3. 如果渲染等待时间过长,说明渲染指令过多,这个时候就需要减少渲染指令的提交,一般就是采样各种合批策略,比如SRP合批、静态合批等,或者是合并网格、减少摄像机距离或者层级Culling等。
  4. 如果渲染等待时间比较小,而游戏逻辑占用时间过长,那么要去分析CPU的耗时,具体是哪一块耗时过多,比如物理、动作、逻辑等。

二、GPU性能优化

当GPU遇到性能瓶颈时候就要着重进行GPU的性能优化,下面介绍一些常用的优化策略。

2.1 降低分辨率

很多手机的显示器分辨率过高,GPU性能却跟不上。因此,降低分辨率或者对分辨率做限制也是常见的优化手段。比如,最高档设置可以限制1080屏幕高度,依次递减,最低档的设备720就可以。

2.2 减少OverDraw

OverDraw的意思是一个像素被重复绘制的次数,也就是该像素位置重复执行像素着色器(片元着色器)的次数。我们可以利用工具,比如固定管线的Unity编辑器是可以显示场景的OverDraw的,Urp的需要做一些扩展支持,来可视化游戏的OverDraw。对OverDraw特别高的部分要想办法优化,下面介绍一些Urp管线下的优化策略。

2.2.1 自定义渲染Pass

Urp的渲染Pass是渲染顺序中优先级最高的,因此同一个Pass对应的物体都会在一起按照一定的顺序渲染。那么,为了减少OverDraw或者提高合批的命中,要合理的设计相关的渲染Pass。比如,天空盒是最远的物体,会一直被遮挡,这种就没必要在场景或者角色之前渲染,否则会有没必要的OverDraw。那么,就可以对天空盒单独一个Pass,在场景和角色之后执行。同理,如果角色一直靠近摄像机,也可以强制角色在场景之前的Pass渲染。

2.2.2 渲染队列

渲染队列是在Shader中设置的,属于同一个Pass内的渲染顺序微调。同样的,还可以设置Render的sortingOrder等。类似的,在默认管线下,通常会调整天空盒的渲染队列为不透明物体之后来避免OverDraw。

2.2.3 合理的渲染顺序

Urp渲染管线对不透明物体会按照从前到后渲染(不支持GPU隐藏面消除),透明物体按照从后到前渲染。Shader的RenderType定义是半透明还是不透明物体。另外前述的渲染Pass和渲染队列等也会影响渲染顺序。合理的渲染顺序能够提高Early-Z的命中率,减少OverDraw。

2.2.4 减少大范围或者全屏特效

大范围的特效是OverDraw的杀手,尤其特效反复重叠的情况,项目中最好从设计层面规避这种情况的出现,实在没办法的再想办法优化特效本身的执行效率,比如特效的粒子数或者面片数、Shader复杂度等。

2.2.5 减少UI的重叠层数

由于UI是按照半透明物体渲染的,因此要尽可能减少UI的重叠。下面的UI要隐藏而不是被覆盖。不过,这一点通常要在UI框架中做好解决,因为不仅仅是有OverDraw,UI的网格计算等CPU消耗也很大。

2.3 提高Early-Z Test的命中率

理论上来说,从前到后渲染就是尽可能的提高Early-Z的命中率,从而降低OverDraw。所以,这一项优化通常是和优化OverDraw是一起进行的。

2.3.1 减少Alpha测试

但是Alpha-Test,也就是在Shader中丢弃像素,即在片元着色器中执行Discard指令,可能会破坏Early-Z Test,因为硬件不执行片元着色器就无法预测最终的深度。因此,要尽量避免大范围的Early-Z Test,除非特殊的渲染要求,比如溶解、植物、头发等,不要使用Alpha-Test。

2.4 减少半透明物体

半透明物体一个是渲染顺序必须从后到前,因此OverDraw严重,性能肯定比不上不透明物体。按照虚幻的官方文档,不透明最快,蒙版(Alpha测试)其次,半透明最慢(OverDraw严重)。

2.5 降低GPU带宽

2.5.1 压缩纹理

  1. 纹理压缩格式:比如现今基本都支持ASTC纹理压缩,通过合理设置不同资源的压缩率,尽可能压缩纹理大小。
  2. 纹理大小:一些贴图根本不需要过大的尺寸,但是美术导入的原始资源通常过大,因此可以在资源导入脚本中强制压缩到一定的尺寸或者写工具扫描压缩一遍。
  3. 去除不必要的纹理通道:比如Alpha通道或者灰度图改成单通道

2.5.2 减少纹理采样次数

  1. 尽可能关闭各向异性纹理
  2. 降低纹理质量
  3. UI或者角色展示场景关闭Mipmap

其中1和2都可以在工程设置的Quality中选择,可以根据不同的设备等级来选择不同的设置。3的话需要在贴图中设置,可以通过贴图导入脚本来设置。

2.5.3 提高纹理缓存命中率

  1. 减少贴图尺寸
  2. 开启Mipmap
    GPU的片内缓冲大小是有限的,因此尽可能小的贴图或者Mipmap才更可能被缓存命中。纹理被缓存命中,那么读取速度会比从内存中读取快一个数量级。

2.5.4 压缩网格

  1. 尽可能减少网格大小:比如限制面数、顶点数
  2. 开启顶点压缩
    网格的大小也会影响带宽,但是更多的是会影响渲染面数,从而增大GPU的负担。

2.5.5 减少全屏Blit

尽可能减少全屏特效,或者合并全屏特效的计算,减少全屏Blit的次数。

2.6 Shader优化

2.6.1 降低Shader中的数值精度

现在版本的Shader中已经不需要使用fixed类型,实际上Urp的Shader中也会编译失败。尽可能使用half类型,减少float类型的使用,float类型主要是用在postion和uv上,对应颜色等属性值尽量都用half。精度更大的话,计算时间就更多。

2.6.2 减少Shader中的分支和循环

尽可能避免分支出现,尽量不要使用循环。分支会破坏Shader的并行,严重影响Shader的执行效率。尽可能用其它方式替换,比如条件操作符、乘法等。

2.6.3 降低Shader的计算复杂度

分析一些OverDraw高或者屏幕占比高的Shader,尽可能或者根据项目要求来简化其计算复杂度,或者利用Shader LOD,写几个简化版本的Shader来对应中低端机器。

2.6.4 减少纹理的读取次数

在Shader中尽量减少纹理的读取次数,比如控制贴图对应的纹元可以一次性读取到变量中,不要反复读取。

2.6.5 Shader LOD

Unity的Shader支持LOD,可以针对中低端机器编写简化版本的SubShader,然后针对性的运行时切换到简化Shader运行。

2.7 尽可能剔除不必要的物体渲染

  1. 合理设置摄像机远平面距离,不渲染远处的物体
  2. 给物体设置不同的Layer,给不同的Layer设置不同的摄像机裁剪距离
  3. 使用Unity自带的遮挡剔除(要烘焙数据,占用额外的包体和内存,可能占用额外的CPU,一般不建议使用)
  4. 自定义的剔除算法,比如检测到物体超过摄像机多远,不渲染或者只渲染部分效果(可以参考项目内的WorldCullingManager,这个是利用Unity自带的CullingGroup来检测角色的距离变化,从而缩放角色的渲染效果)。

2.8 LOD

2.8.1 模型LOD

模型也可以使用Lod,默认情况下是随着摄像机距离变大切换到更简单的Lod。不过,也可以根据任意条件来切换Lod,比如机型匹配,帧率下降等。

2.8.2 动画LOD

可以在切换模型LOD时候,选择更简单的动画状态机,这个Unity是支持分层动画和Mask的,具体参考相关文档。

2.8.3 渲染LOD

  1. 不同的距离开启不一样的渲染效果,类似模型LOD,远处的物体采用更简单的渲染方式。
  2. 不同档次设置采用不同级别的渲染效果,比如切换Shader Lod,关闭一些Pass等。
  3. 不同重要度的物体,比如小怪等,可以关闭一些渲染特性或者效果,或者使用更低的Shader Lod等
  4. 同理,类似的其它一些缩放方式。

2.9 Fake渲染

2.9.1 假阴影

比如角色下面的影子是一个黑色面片,或者使用平面阴影(Planar Shadow)。

2.9.2 公告板

比如公告板技术实现的远处面片树木、面片房子等

三、CPU性能优化

按照第一节的游戏循环的说法,CPU的性能优化主要包括:游戏逻辑和渲染提交。或者更准确的说,应该把CPU性能优化分为渲染优化和其它的优化;其它的优化,主要指的是游戏逻辑相关的优化,具体包括:物体、动画、粒子、UI、资源加载、游戏逻辑(游戏层脚本)、GC等。下面,我们来一个个的做一些经验介绍。

3.1 渲染优化

CPU上的渲染主要包括两个部分,一个是计算需要渲染的物体,另一个是提交渲染和等待渲染完成。

3.1.1 Culling优化

Culling也可以叫做裁剪,实质上裁剪有很多种算法或者方式。从现今的游戏引擎来说,一般是使用层次包围盒(Bounding Volume Hierarchy),来粗略的和摄像机的可视范围做交集来进行裁剪。这一部分通常是在游戏引擎内的,因此我们不能控制。但是,SRP渲染管线提供了一些可能性来做优化。

  1. 隔帧Culling:如果游戏场景更新不频繁,那么可以隔帧或者过几帧才计算一次Culling。
  2. 修改Urp的Renderer中的SetupCullingParameters:该函数控制渲染引擎的裁剪参数,可以尝试修改该函数以提高特定项目的裁剪效率。
  3. 在主线程中自定义Culling逻辑:和2.6的第四点意思一样。

3.1.2 渲染批次优化

本质上是优化主线程提交给渲染线程的指令数目,从而减少渲染线程提交给图形接口的渲染指令数目。对应到Unity上则是各种合批策略的体现。

  1. 自定义Pass:对于要合批的物体,尤其是动态物体,比如特效,最好是定义一个专门的Pass,就不会被其它不相干物体打断动态合批(对于SRP Batcher没发现这种限制)。
  2. SRP Batcher:尽可能所有的Shader兼容SRP Batcher,除非特别低端的机器,这种合批方式对性能的提高很大。
  3. 静态合批:静态合批通常用于场景(SRP Batcher实际上也兼容静态合批),不过静态合批需要打开网格读写,静态合批只合并材质一样的物体,因此静态合批需要美术那边尽量提高材质的重用度后使用的意义才大;同时因为静态合批会合并网格(比如,同样的网格和材质出现多次,会将网格复制多次合并成一个更大的网格)可能会导致包体和内存显著增长;因此,静态合批最适合材质重复度高,网格重复很少的场景。
  4. 动态合批:静态合批的运行时版本,因为有运行时的CPU消耗,类似静态合批也可能会增大内存消耗;有限制,比如要求顶点属性之和不超过900等;适合于动态的小物体的合批,比如粒子特效、小道具等。
  5. Draw Instancing:也叫实例化渲染,适合的场景是网格重复多次(只是朝向、缩放等不一样),材质一样(或者材质属性基本一致的)的情况,比如大规模渲染树木和草地。
  6. 手动合并网格和材质:用软件来离线合并场景内的模型和材质;理论上来说,最自由但是最繁琐,如果场景小的话可以这样试试;合理控制的话,不会显著增大内存和包体,也没有运行时消耗,美术乐意的话,何乐而不为?

3.2 物理优化

3.2.1 降低Unity的物理更新频率

可以在工程设置的Physics选项中关闭Auto Simulation,然后选择在框架更新的时候降低频率(比如2倍的Fixed Timestep)来调用Physics.Simulate来更新物理。同样可以直接设置Fixed Timestep来降低更新频率。

3.2.2 少用或者不用MeshCollider

3.2.3 减少频繁射线检测的使用

可以缓存计算结果或者用更快速的检测方式替代,比如boxcast。

3.2.4 关闭碰撞矩阵中没必要的部分

3.3 动画优化

3.3.1 限制骨骼数目

要求美术制作时候在规定的骨骼数目范围内,骨骼数目会影响动画大小也会影响执行效率。通常80-100已经非常足够了。

3.3.3 动画的CPU性能优化

参考UWA的文章:Unity性能优化 — 动画模块
参考Unity文档:性能和优化

3.4 粒子优化

可以参考UWA的文章:粒子系统优化——如何优化你的技能特效
特效的优化一般在项目的中后期,快上线的时候,针对性的对战斗这种特效集中度很高的场景进行测试和优化。

3.4.1 限制特效的最大粒子数

通常会限制普通特效只能有5-10个粒子或者更小。

3.4.2 限制特效的批次

最好是一个特效能在几个批次或者1个批次内渲染完成。

3.4.3 限制特效使用的贴图尺寸

特效尽量使用小贴图,比如不超256或者512的,尽量都是128或者更细的贴图或者贴图合集。

3.4.3 限制特效的重叠层数和范围

这一部分应该算GPU的优化,可以减少OverDraw和GPU的计算。

3.5 UI优化

参考UWA的文章:Unity性能优化 — UI模块
优化UI的基本原则是:

  1. 减少UI变化重新生成网格:因为UI本质上也是网格加贴图绘制出来的,因此要避免各种操作或者设置到UI频繁变化导致网格重复生成。
  2. 减少UI的射线检测
  3. UI的图集控制:比如一个界面最多2个图集等
  4. 战斗这种3D场景可以不使用UGUI来绘制3D的UI,而是直接用3D网格来绘制,避免UGUI的各种性能消耗。

3.6 资源加载优化

参考UWA的文章:Unity性能优化系列—加载与资源管理

3.6.1 Shader变体的预热

Shader变体的预热比较耗时,可能需要拆分处理。Shader需要优化关键字数目,尤其是全局关键字数目,这个会显著影响Shader的包体和加载进来的内存。

3.6.2 游戏对象池

尽量使用对象池,对象池回收时候可以隐藏GO,也可以选择移动到远处(关闭组件)。

3.6.3 资源管理方案推荐YooAsset

3.7 游戏脚本优化

这里主要讲的是游戏框架和游戏逻辑的代码优化,包括C#和Lua。

3.7.1 游戏框架优化

框架应该尽可能优化,尽可能减少对使用者(游戏逻辑层)带来的性能损耗。

  1. 框架代码尽量不要有GC
  2. 框架代码尽量不要占用额外的大内存
  3. 框架代码尽量不要消耗过多的CPU,使用者不用担心性能消耗

    3.7.2 游戏逻辑优化

    具体的游戏逻辑优化,跟实际的游戏类型有关,需要针对性优化。

3.7.3 常见的脚本优化策略

  1. 缓存计算结果:中间结果或者初始参数尽量预计算好
  2. 不产生GC:任何引用类型的对象都尽量使用缓存池内的
  3. 对缓存友好的存储方式:比如尽量使用小数组存储数据,而不用链表或者字典
  4. 限帧法:限制部分逻辑的更新频率,比如2-3帧更新一次
  5. 多线程:部分独立性很强的逻辑,可以考虑多线程处理
  6. 主次法:比如非关键的角色或者物体,使用更少的计算逻辑
  7. 减少项目的MonoBehavior的更新函数入口,游戏逻辑尽量保持一个更新入口。

3.7.4 Lua代码优化

参考UWA的文章:Unity性能优化系列—Lua代码优化

3.8 GC优化

由于Unity的Mono堆在超过最大值或者一定数值后会自动扩容,而且扩容后无法往回缩,因此必须非常关注Mono堆的峰值。

  1. 降低Mono堆的峰值:这样可以避免Mono堆一直增长或者过大
  2. 降低GC的频率:减少不必要的CPU消耗,尽量使用缓存池中的引用对象

四、资源优化

4.1 纹理优化

这个在优化GPU代码有提到。

  1. 合理降低纹理大小
  2. 尽量使用更高的压缩格式(ASTC更高压缩率)
  3. UI或立绘关闭Mipmap
  4. 减少纹理通道
  5. 提高纹理复用(单色图复用,重复图案复用)

4.2 网格优化

  1. 关闭网格读写:除了特效外的网格关闭读写
  2. 开启项目的顶点压缩:会降低内存和GPU消耗,应该不会影响资源大小
  3. MeshCompression:开启据说会降低网格的资源占用,但是不影响内存占用
  4. 尽量减少面数和顶点数:和美术制作规范,正式资源要符合要求

4.3 动画优化

  1. 压缩方式选择Optimal:官方推荐的方式
  2. 如果没有缩放,去除Scale曲线。
  3. 网上的一些剔除动画原始数据的方法以实测为准,可能剔除后动画文件变小,包体变小了,但是内存中大小不变。

五、内存优化

5.1 优化资源

资源本身都会加载进入内存,因此优化资源本身大小对优化内存大小非常关键,第四节已经讲到。

5.2 优化打包和资源管理

减少打AB包时候的重复,以及智能的资源加载管理方案,可以减少AB包加载后的内存占用,以及去除没必要的资源常驻现象,同时也可以优化资源加载的CPU消耗。

5.3 优化Mono堆

前述已经提到Mono堆只增不涨,因此优化C#的Mono堆内存非常必要。

5.4 优化Native内存

一些插件包括引擎都会占用Native的内存,因此合理使用插件或者检测插件占用的Native内存在某些时候也有意义。如果插件造成的Native内存占用过多,是否可以考虑更换插件?比如音频插件等。

5.5 优化Lua内存

Lua同样有虚拟机有自己管理的堆内存,同样是不能无限增长的。因此,Lua代码也要避免频繁创建新的对象造成GC严重或者导致堆内存一直上升。
UWA和UPR都有检测Lua内存的选项,可以试试。

5.6 减少包体二进制大小

应用都会加载到内存中才会运行,因此更小的二进制包体自然会占用更小的内存。可以尝试剔除一些没有使用的代码(引擎代码或者C#脚本代码),这个Unity打包时候有相关设置。

5.7 配置优化

游戏项目到中后期配置可能会增大非常严重,如果一次性加载可能会造成加载时间过长,同时造成Mono内存增长过大。

  1. 避免一次性加载全部配置到C#中
  2. 如果内存占用过高,考虑其它压缩存储方式,比如二进制存储,不要使用Json
  3. Lua加载配置速度更快,但是配置过大同样内存占用高
  4. 实在占用过高,可以考虑小型数据库存储配置
  5. 是不是该让策划清理或者使用工具清理重复配置,配置本身是否严重冗余?

六、二进制包体优化

6.1 代码裁剪

Unity可以设置裁剪引擎代码,和脚本层代码。经过测试开启引擎代码裁剪问题不大,但是脚本层代码裁剪设置过高可能引起代码丢失问题,可能可以通过link.xml中的设置解决。

6.2 安卓架构

通常ARMv7和ARM64只需要打一个架构,当前ARM64的性能更好但是兼容性不够,关闭一个架构能减少包体。

6.3 其它跟App打包相关的方法

具体请查阅相关文档,参考并且实验是否有效。

七、其它

性能优化是一个迭代的长期工作,关键是底子打好,后期优化压力就小很多;或者明白优化的思路,能够快速定位关键的性能瓶颈。

一、卡通冰的效果

先看最终实现的卡通冰材质效果吧,如下所示:

也可以调出类似玻璃的效果:

如果对一个球应用卡通冰材质,然后打开各种选项,可以得到如下效果:

凹凸不平的地方是因为应用了法线贴图。

二、脚本和最终的材质界面

最终的材质界面,如下图所示:

通过材质界面可以清晰看出卡通冰效果的各个模块。
另外为了获得屏幕颜色需要挂上一个脚本(PostProcessEffect)表示当前管线需要执行CopyColorPass。

三、折射

冰效果最关键的部分是折射,注意是折射而不是半透明。折射是透光冰看过去,后面的背景会发生一定的扭曲;而半透明混合是冰本身的颜色和背景做一定的混合,无法背景实现扭曲的效果。这里的实现思路参考之前的屏幕扭曲特效的实现方式,具体可以参考文章:Urp下自定义特效管线和后处理特效实现
关于如何取得屏幕颜色贴图的方法不再赘述,另外为了优化性能,最终是判断是否需要获取屏幕颜色贴图(比如是否挂了屏幕特效脚本等)来决定是否执行CopyColorPass。

3.1 折射屏幕扭曲

获得屏幕颜色贴图后,只需要在屏幕空间下采样就能获得背景的颜色信息,至于扭曲的方式是通过一张扭曲贴图来采样当前位置的扭曲程度,这个扭曲程度加到屏幕空间UV上即可。一定程度的扭曲,能够模仿透过冰这种介质发生光线扭曲的这种效果。

3.2 折射强度控制

折射强度主要是通过NDotV来控制,另外提供了折射强度和控制贴图来调节。折射越强,越能透光冰看到后面的场景。至于为什么要使用NDotV,主要是为了贴近菲尼尔效应。根据菲涅尔效应,视线垂直于法线的情况下,反射越强,相应的折射越弱,NDotV越小。

四、卡通着色

这里的卡通着色就是一个二阶色的卡通着色,计算halfLambert,然后映射到2个颜色(暗色、亮色),中间的过渡用smoothstep插值。可以参考文章:Unity下的日式卡通渲染实现-着色篇(一)中的卡通着色部分。
那么卡通着色如何跟折射效果结合了?
可以使用折射强度去插值基础颜色和折射颜色,然后再用得到的基础色去计算卡通着色。

五、高光

高光就是Blinn-Phong的高光部分,计算NDotH,然后用pow(NDotH, 高光指数)来得到高光结果。比较简单,不再赘述。

六、边缘光

边缘光也是通过NDotV来判断边缘光程度,方法是判断NDotV是否小于边缘光宽度。这样不仅可以通过NDotV简单的模仿物体边缘判断,而且可以通过边缘光宽度来调整边缘光的大小。
高光和边缘光是叠加在卡通着色基础之上的,叠加比例是1-折射强度。

七、描边

描边就是使用沿着法线外扩的卡通渲染描边,可以参考文章:Unity下的日式卡通渲染实现-描边篇(三)

八、溶解

为了满足特效那边的冰消融的需求,额外添加了一个溶解部分。材质设置如下图:

溶解的实现很简单,提供一个溶解阈值,使用颜色贴图或者控制贴图的Alpha通道,来做AlphaTest。当然具体实现是用clip函数丢弃像素。

8.1 溶解颜色

为了模仿消融的效果,提供了一个溶解颜色来表示消融的过渡色,过渡色和本来的颜色通过smoothstep来插值,插值参数是溶解程度,溶解程度即是alpha减去溶解阈值。
效果如下图所示:

可以看到溶解的边缘有一个溶解过渡颜色。

九、控制贴图

为了方便美术控制效果,额外提供了一张控制贴图,四个通道分别控制:高光强度、边缘光强度、折射强度、溶解Alpha值。

十、参考资料

Urp下自定义特效管线和后处理特效实现
Unity下的日式卡通渲染实现-着色篇(一)
Unity下的日式卡通渲染实现-描边篇(三)

这边文章讲述的是项目中用到的一些卡通渲染描边相关技术。

一、Back Face外扩描边

背面外扩描边和后处理描边是卡通渲染中主要应用到的描边方式。

1.1 实现原理

第一个Pass正常渲染物体。第二个Pass只渲染背面,同时顶点沿着法线方向偏移,开启深度测试。
第二个Pass开启深度测试的用处一个是重叠部分不会显示出来,另外可以利用Early-Z减少需要处理的片元数量。

1.2 描边的法线优化

由于我们是沿着法线偏移顶点,那么最终的描边结果对法线的依赖很大。如果法线分布有问题,可能造成描边断裂的情况。如下图所示:

这是因为四个面的法线都是垂直于面的,在角的地方没有连续性。一种比较好的解决方式是计算平均法线存储在不使用的uv通道内,比如uv8,然后使用这个平均法线去计算描边。
何谓平均法线?即顶点周围面法线的平均或者加权平均。
如何计算这个平均法线了?这个可以编写外部工具对fbx直接离线修改;或者编写Unity的脚本修改uv8,不过在Unity内已经修改不了Fbx文件了,所以去修改Mesh的uv8数据,实际上这个修改是存储在工程的缓存数据内的,因此需要给Mesh新增一个Tag,如果有这个Tag导入Mesh的时候就需要就需要计算平滑法线。

1.3 根据摄像机修正描边宽度

一个是距离摄像机的距离,理论上来说应该是距离摄像机越远描边应该越小,这个可以用摄像机空间的z值来表示。另外一个是Fov,Fov越大描边应该越小。
加入这2个修正因子后,描边的粗细会看起来自然很多。

1.4 描边深度偏移控制消隐

有些地方美术实际上不希望出现描边。比如,头发的中间部位,美术只希望头发的边缘能看到描边。但是,正对着角色的时候,头发的中间部分实际上也是外扩的边缘,同样会看到描边。
这种情况可以通过使用深度偏移来修改顶点着色器的裁剪坐标,从而消隐描边。实际上,就是把不需要看到的描边往里推,从而被角色本身覆盖,就看不到描边了。
那么,哪些描边需要消隐了?就是下面要说的顶点色。

1.5 顶点色控制描边宽度和深度偏移

我们提供了顶点色的两个通道来分别控制描边的粗细和深度偏移。粗细很好理解,就是有些部位描边宽有些更窄。深度偏移就是上面说的消隐问题,有些地方的描边希望看不到就可以增加一定的深度偏移使其被角色挡住。
顶点色需要美术使用DCC工具去涂色,或者也可以在Unity中使用编辑器去涂,然后保存下来。还是类似的问题,在Unity中不能修改原始的Fbx文件,因此涂色后的网格数据只能保存为.asset。
当前项目中使用的是这篇文章:在Unity中写一个简单的顶点颜色编辑器的顶点色工具,基本需求能够满足。

最终的描边效果如下所示:
卡通渲染外扩描边
可以看到头顶的头发通过顶点色深度偏移控制了消隐,头发的描边粗细也是通过另一个顶点色通道控制的。

二、 后处理描边

后处理描边是在图像空间使用边缘检测因子得到边缘信息,通常是检测深度图或者法线图,比颜色图效果更好。因为,深度或者法线在角色边缘有明显的不连续性。但是,后处理描边的缺点是无法控制描边或者说很难像外扩描边一样精细的控制描边效果,同时还会把内描边也检测出来。
对于头发的描边,后处理描边这些缺点就是非常致命的,因为我们主要用的还是外扩描边。

三、其它描边方式

3.1 NdotV

类似简单的边缘光实现方式,也可以用来做描边,但是效果和控制力度肯定是达不到需求的。

3.2 深度贴图描边

之前说的深度贴图边缘光和阴影同样可以用来做描边,也能使用顶点颜色提供一定的控制粒度,比如控制粗细,但是也无法做深度偏移消隐等。

四、内描边

所谓内描边,指的是物体内部的描边,非物体边缘看到的描边。之前说的技术基本上都是针对外描边的。

4.1 本村线

简单来说,是直接在贴图上画描边,同时这些描边基本是跟轴对齐的。不过工作量很大,而且很大细节需要控制,很少有美术愿意采用这种方式,因此不做过多的讨论。
如下图:
!](https://raw.githubusercontent.com/xpc-yx/markdown_img/master/小书匠/本村线描边.jpg)

4.2 后处理内描边

网上有文章提到二之国中的做法是在顶点属性通道中记录边缘程度,然后在后处理中来进行绘制内描边。
如下图所示:

猜测是类似于顶点色的方式,让美术使用工具在顶点色中涂色边缘程度,
然后需要一个Pass将顶点色上的边缘程度属性输出到一个RT上,最终在后处理Pass中检测这个RT对应像素的边缘程度完成内描边。
至于如何将边缘程度转换为描边,需要参考相关资料才能弄清楚了,这里的日文看不懂啊。

五、参考资料

【01】从零开始的卡通渲染-描边篇
卡通渲染学习总结

这边文章讲述的是项目中用到的一些卡通渲染阴影相关技术。

一、SDF面部阴影

SDF这个概念具体是什么意思了?可以去观看闫令琪在B站上的101课程,有一节专门讲述了SDF的定义和混合SDF能够产生什么效果。其实SDF面部阴影基本的思想就是混合面部的SDF得到一张阴影阈值图,然后利用这张阴影阈值图实现二维的阴影渲染。
比较详细的解释可以参考这篇文章,卡通渲染之基于SDF生成面部阴影贴图的效果实现(URP)

1.1 如何计算SDF

根据SDF的定义(到边界的最短有符号距离,形状内部为负,外部为正),计算二维的SDF其实很容易,可以使用C++写程序离线处理图片得到对应的SDF图。不过,我们现在需要的是更进一步的阴影阈值图。

1.2 如何计算阴影阈值图


阴影阈值图实际上是根据上述的多个角度的阴影图,首先计算每个阴影图的SDF图;然后将所有的SDF图递归混合起来,最终的输出就是阴影阈值图。
如何混合SDF图了?根据前后2个SDF图的在对应像素点的差异值来插值前后2个SDF图。
不过这些阴影图是有一定的要求的:图片必须连续且后一张必须可以覆盖前一张(可以是暗部覆盖也可以是亮部覆盖,但只能是一种)。
这个离线计算阴影阈值图的程序网上已经有人给出来了:如何快速生成混合卡通光照图

1.3 如何渲染SDF面部阴影

文章卡通渲染之基于SDF生成面部阴影贴图的效果实现(URP)给出的Shader代码基本上问题不大,不过有2个比较明显的问题。
朝向问题:美术出的资源坐标系以及顶点位置不一定是朝着Unity局部坐标系的正Y轴,最好使用脚本传入正Y轴,否则有些模型的阴影就会反了。
左右判断问题:经过验证应该用right去判断还不是left,同样最好是用脚本传入,否则阴影过渡可能出现问题。
最后的if判断可以省略:直接用smoothstep计算bias即可达到效果。
最终的效果如下:
SDF阴影动画

二、自阴影

自阴影实际上是一种ShadowMap的变形,默认的ShadowMap会应用到所有开启了阴影投射的问题上。如果角色还使用这个ShadowMap可能会造成分辨率不够,比如阴影不够清晰、阴影锯齿严重等。因此,对所有的角色重新投影到一个新的ShadowMap上,然后利用这个新的ShadowMap计算自阴影。

2.1 收集所有激活的角色

给每个角色增加一个MonoBehavior脚本,该脚本激活的时候收集角色的包围盒,角色删除时候取消
对应的包围盒。对所有的角色包围盒计算一个并集,将该并集作为正交相机的渲染范围去渲染下一步的阴影Pass。

2.2 自定义ShadowCastPass

增加Urp的自定义Pass,该Pass的渲染模板是额外的ShadowMap对应的RT。在该Pass执行的时候去收集上述的角色包围盒并集,同时将并集作为正交相机的渲染范围,然后去渲染自定义ShadowTag的Pass。
Shader内的阴影Pass实现跟Urp默认的阴影Pass基本一致。

2.3 渲染自阴影

自阴影的渲染基本与传统的ShadowMap一致。不过,需要注意的是阴影投影矩阵已经变化了,需要从脚本中传入Shader。同时,采样阴影贴图的z值需要增加偏移参数去调整,以获得好的效果。美术可能还需要去控制特定区域的阴影强弱,比如可以使用顶点色来控制阴影强度。
效果如下图:

三、深度边缘阴影

深度边缘阴影和上一篇讲的深度边缘光的原理类似,都必须利用深度贴图来判断当前像素处于边缘
的程度。同样,角色Shader中需要增加DepthOnly来输出深度到深度贴图了。
效果如下图:

对比自阴影的效果图,可以看到在细节的遮挡区域阴影效果得到了进一步的增强。

四、默认的Urp阴影

默认的Urp阴影决定的是主灯的阴影效果,比如角色走入主方向光形成的阴影区域内,那么角色的亮度是否需要做一定的调整了?
在urp的shader源码中,这个阴影体现为mainlight的shadowAttenuation大小,该值会去缩放主灯的颜色亮度。如果直接使用该值去缩放灯光,那么会出现一定的自遮挡的阴影,而且这个阴影很丑。因此,可以使用这个shadowAttenuation去缩放卡通着色后的结果,从而体现出角色在不同光照区域有一定的表现差异。
不过,如果采用shadowmask的光照烘焙方式,烘焙后场景的静态物体就不会投影阴影了。因此,这个时候通过shadowmap得到的实时阴影就是不正确的,表现就会看起来很怪异。
有什么解决办法了?
方法一:一种简单的方式是让场景美术摆放一些大的不烘焙的隐藏面片来投影实时阴影。
方法二:另一种方式采用遮挡探针(和Unity的光照探针是一起的,实质上就是布置光照探针),类似光照探针一样,可以让动态的物体采用烘焙的阴影信息,不过这个时候主角就不采样shadowmap了。
方法三:改成DistanceShadowMask方式,这样子烘焙后的静态物体也会投影实时阴影,可以避免布置光照探针。不过性能损失会增大不少。

五、阴影如何跟着色结合?

对于每种阴影可以指定一个阴影颜色,上述的各种算法只是计算对应的阴影强度。最终,使用阴影强度插值卡通着色结果和阴影颜色,就可以得到应用阴影后的效果。

六、参考资料

卡通渲染之基于SDF生成面部阴影贴图的效果实现(URP)
如何快速生成混合卡通光照图

这篇文章讲述的是项目中二次元日式卡通着色渲染用到的一些跟着色相关的技术点。

一、卡通着色

何谓卡通着色?大概是让角色看起来卡通的角色吧。这里说的卡通着色,实际上指的是色阶着色。即根据光照和法线计算出当前像素处于哪个色阶,色阶之间有平缓过渡。

1.1 三色阶

如下图所示,

这是一个三阶色的着色结果。可以看到着色结果是明显的三阶,从正对光照到背对光照是过渡分明的白色、灰色、黑色的三色阶。卡通渲染着色最基础的部分就是这种明显过渡的色阶。根据需要,项目中可能采用的是二色阶或者三色阶。我们观察过战双的角色效果,猜测采用的是三色阶。
实现原理:
选定三个颜色,作为亮色、灰色、暗色;选定2个阈值,0-灰色阈值表示亮部,灰色阈值-暗色阈值表示灰部,大于暗色阈值表示暗部;计算1-halfLambert表示着色的暗度,将暗度映射到上一个范围,选取颜色;为了色阶过渡平滑,增加过渡区域大小,使用smoothstep平滑过渡边界。

1.2 暗部控制

增加一张控制贴图,用一个通道比如r通道控制对应像素的暗的程度,我们叫其为darkness。
限制一:如果当前像素的darkness大于暗部的阈值,那么才可能在暗部区域,否则只能是灰部或者亮部区域。
限制二:当前像素的dark程度是darkness和1-halfLambert的最大值,也就是像素的dark程度只能大于等于控制贴图的darkness。
这样的限制后,方便美术控制哪些区域是暗部,不管光照如何变化这些区域始终是暗色,同时其着色结果只能比darkness更暗。
效果如下图所示:

可以看到原本灰部的一些区域被限制一限制为固定暗部了,同时亮部的一些区域被限制二调整为灰部了。对应限制二,其实也可以只对暗部处理,这主要是看美术的需求。

1.3 色阶贴图

进一步扩展,默认情况下三色阶的颜色是在材质中指定好的固定颜色。美术进一步提出,希望去从贴图中去获得变化更多的颜色。因此,可以对色阶某一个颜色增加一张颜色贴图。色阶着色时候,从贴图中通过uv取当前色色阶色,而不是使用固定的色阶色。
下图是一个灰部使用色阶贴图的效果:

1.4 Ramp贴图

跟二色阶和三色阶对应的是,直接使用halfLambert或者1-halfLambert从ramp贴图中获得着色结果。由于Ramp贴图本身就是一个良好过渡的梯度贴图,因此也可以实现和上述三色阶类似的效果。
下图是一个二阶色Ramp的结果,中间的红色是Ramp贴图上的过渡色:

Ramp贴图和三阶色实现的效果类似,不过Ramp贴图需要一张额外的Ramp贴图和以及一次贴图读取操作,但是三阶色计算量大。

1.5 和颜色贴图结合

三阶色的结果乘以角色的基础颜色后就可以得到基本的卡通着色效果,如下图所示:

二、Pbr着色

可以参考文章【04】从零开始的卡通渲染-PBR篇。这篇文章讲得非常详细,包括角色的Pbr着色和卡通着色如何组合以及角色的卡通着色如何与Pbr场景角色组合等的一些思路。
我们的基本思路是实现一个近似的Pbr着色,包括直接光照和间接光照(近似环境光照pbr)。增加Pbr着色好处是可以实现一些Pbr材质才能达到的效果,比如Pbr的金属感等。同时通过在pbr的控制贴图中使用一个通道来作为蒙版,控制pbr着色的比例。Pbr的实现代码很多,因此具体实现思路,不再赘述。

三、皮肤Ramp

皮肤Ramp是一个比较简单的功能。通过计算halfLambert作为坐标去ramp皮肤贴图中获得皮肤颜色,再进行一定的缩放以及和皮肤基础颜色相乘得到一个最终的颜色。同时类似于于Pbr着色,提供一个蒙版或者混合比例,和卡通角色结果进行插值。
这个着色功能在某些情况下可以方便美术控制整体的皮肤梯度色调。

四、高光

卡通渲染的高光的可以采用Blinn-Phong高光或者使用近似的GGX直接光照高光。这两种高光的实现思路,请参考相关资料。

4.1 各向异性高光

所谓各项异性高光,指的是在不同的方向上高光表现是不一致的。
比如,Blinn-Phong高光不管从什么方向看过去都是一个高亮的光斑,如下图所示:

但是各向异性高光可能是不规则形状的,比如环形,即我们常说的天使环,如下图所示:

各向异性高光主要是应用在头发上。

4.2 法线+高光控制贴图实现天使环

其实,即使是使用普通的Blinn-Phong高光,使用高光强度控制贴图和各项异性的法线也是可以调出类似的天使环的效果的。首先,控制贴图的强度分布映射到模型上本来就得是环形的,这个主要是靠美术去控制。另外,法线的分布要有一定的方向性。
另外一种方式就是下面要说的Kajiya-Kay各向异性高光。
下图是一个这种思路实现的效果:

4.3 Kajiya-Kay 各向异性高光

网上关于Kajiya-Kay的实现原理文章非常多,比如这篇卡通渲染之头发高光(anisotropy)的实现(URP)
这种各项异性高光的实现思路是把头发当成圆柱体,将法线用副切线替换后再计算高光,如下图所示:

如果想增加一些散乱的效果,可以使用噪声贴图让副切线沿着顶点法线方向做一个随机偏移。

五、自发光

自发光比较简单,直接增加一个颜色值即可。

六、边缘光

边缘光有两种实现思路,一种是根据法线和视线的夹角计算边缘光的强度;一种是根据深度贴图计算当前像素处于边缘的可能性,再转化为边缘光强度。

6.1 NdotV边缘光

NdotV表示的是世界空间法线和视线的点积,反应的是从当前视线看去,像素点处于边缘的可能性。不过,通常还需要对边缘光强度做一些校正,比如根据离视点的距离等。

6.2 深度贴图边缘光

如果使用深度贴图边缘光,那么需要一个额外的深度Pass,将角色的深度写入到深度贴图里。在着色渲染Pass中,采样深度贴图获得当前深度,然后沿着一个特定的方向偏移屏幕空间的深度贴图uv坐标,再采样一个偏移后的深度。对比这2个深度,如果超出一定的阈值,将差值转化为深度边缘光强度。下一篇文章讲到的深度贴图阴影也是这个原理。
效果如下图所示:

七、着色总结

综上所述,一个卡通渲染的着色最终的计算结果是:
卡通着色结果= lerp(三阶色,Pbr着色,Ramp皮肤)+ 高光 + 自发光 + 边缘光。
下一篇文章,我们将讨论卡通着色的阴影实现思路。

八、参考资料

【03】从零开始的卡通渲染-着色篇2
【04】从零开始的卡通渲染-PBR篇
卡通渲染之头发高光(anisotropy)的实现(URP)

一、问题起源和影响

1.1 Base相机切换导致切换场景时候闪烁

问题是这样的,项目之前一直用场景相机作为Base相机,UI相机作为Overlay相机。渲染顺序是先渲染场景Base相机,然后渲染UI相机。不过,最近打包发现,在部分机器上,一切换场景时候,比如loading界面打开时候,屏幕会出现明显的闪烁,甚至还会花屏。

1.2 固定Base相机解决切换场景闪烁

尝试解决:并没有上FrameDebug或者RenderDoc去抓帧分析,比较麻烦。首先,尝试在切换场景之前就隐藏场景相机,发现花屏现象消失了,闪烁问题也大幅度减弱。猜测,是场景切换时候场景相机销毁, 导致必须切换Base相机导致整个相机堆栈都要重建的原因。
解决办法:固定一个空的Base相机,不渲染任何层,场景相机作为Overlay相机挂在Base相机上,然后是UI相机。
结果:原先loading界面闪烁的几个机器都不再闪烁。

1.3 尝试强制清除颜色缓冲解决花屏和闪烁

参考网上的文章,比如(二)unity shader在实际项目中出现的问题————低档机(如小米4)切换游戏场景时花屏问题,猜测这篇文章的应用场景是在固定管线下。在切换场景时候强制多次清除颜色缓冲,同时Base相机设置为SolidColor清除,场景相机本来就有天空盒,以尝试解决部分机型花屏和闪烁问题,结果还是失败。故放弃治疗。沿着固定Base相机的思路继续下去。

1.4 固定Base相机开启SMAA掉帧严重

由于MSAA会成倍增加RT的带宽和内存,带宽又是性能非常敏感的因素,所以放弃了。刚好Unity的Urp渲染管线支持SMAA和FXAA后处理抗锯齿,因此选择了后处理抗锯齿。
由于为了解决切换场景闪烁问题,固定空的Base相机,然后Base相机开启后处理抗锯齿,结果发现我的红米K30 Ultra掉帧非常严重,之前可以稳定30fps,改完之后在主场景只能跑到15fps左右。一开始还怀疑是场景没有合并网格,导致批次过高,编辑器内发现视线较远甚至到800Batches,远超100-200Batches的要求。后面想想,不可能突然掉帧这么严重,结果一FrameDebug,发现SMAA跑了2次。如下图所示:

Base相机一次,场景Overlay相机一次,UI相机不开后处理所以没有。而一次SMAA实际上是三个全屏Pass,性能可想而知。
实际上,我们只想让场景相机有抗锯齿,和之前场景相机作为Base相机的情况保持一致。那么,我们就尝试只给场景相机开启后处理抗锯齿,结果发现完全没有效果。

二、Urp的相机堆栈

可以参考Unity中国官方发在知乎上的这篇文章:
URP 系列教程 | 多相机玩法攻略
简而言之,相机堆栈的意思是一系列的相机叠加在一起,Base相机作为基础设置,Base之上可以有任意的Overlay。按照叠加顺序从Base相机开始,一个个渲染,直到渲染完最后的相机,最终再把渲染结果的RT(注意,一个相机堆栈重用一个RT) Blit到屏幕上。

三、SMAA无法在Overlay相机单独生效的原因

Urp渲染管线默认使用的是前向渲染器ForwardRenderer,ForwardRenderer里面有两个PostProcessPass,一个是m_PostProcessPass,另一个是m_FinalPostProcessPass,后处理就是在这2个Pass里面实现的。注意,Urp定义的这种Pass只是逻辑上的,实际上可能对应多个渲染Pass。
PostProcessPass的Execute会判断是IsFinalPass来执行RenderFinalPass还是正常的Render。正常的Render主要对应的是UberPost相关的后处理,RenderFinalPass对应的FinalPost相关的后处理。更详细的细节不在此列,看源码吧。
问题在于,Render函数中如下图所示的判断,

cameraData是传递给每个Pass的RenderingData的成员,这些都是在渲染相机时候初始化好的。因此,怀疑对于Overlay相机这个标志无法传递到PostProcess。
回到UniversalRenderPipeline的RenderCameraStack函数,如下图所示,

从这部分代码可以看到传递给overlay相机的overlayCameraData是通过baseCameraData初始化的,然后再通过InitializeAdditionalCameraData设置一些额外的参数。然后再去查看InitializeAdditionalCameraData的源码,发现没有设置抗锯齿模式的地方。再去查看InitializeStackedCameraData函数源码,如下所示,

最终确定抗锯齿模式是通过base相机设置,而overlay的抗锯齿模式不会生效,。这也就解释了为什么只设置base相机的smaa会导致overlay相机也执行了smaa,单独设置overlay相机的smaa反而无法生效。
那么如何解决了?很简单,在InitializeAdditionalCameraData函数中增加一行代码,将overlay相机的抗锯齿设置传递到overlayCameraData即可。

四、FXAA只能在最后一个相机生效(通常是UI相机)

SMAA的问题解决了。结果发现FXAA也无法生效,那只能继续查源码咯。

如上截图所示,发现前向渲染器是根据标志applyFinalPostProcessing,来判断是否应用FinalPostProcessPass。而这个标志要求三个条件,相机堆栈开启了后处理、当前是最后一个相机、Base相机开启了FXAA,如果做了三的源码修改(Overlay的抗锯齿设置生效),那么需要是UI相机开启了FXAA。
FrameDebug的结果如下所示:

问题:开启了FXAA,UI界面肉眼可见的变模糊了,编辑器中都能体现出来。最终打算放弃FXAA,低端机选择不开抗锯齿,中高端机器开启SMAA。由于前述只对场景相机开启抗锯齿,因此不修改urp源码的情况下,FXAA是不会被激活的。

五、固定空Base相机引入的新问题

对比如下2个截图:


第一个有额外空的Base相机,第二个直接使用场景相机作为Base相机。对比发现,Base相机无论如何会有Clear操作;然后还有一个渲染天空盒的操作。
如果我们把Base相机的天空盒模式改成颜色或者未初始化,就不会渲染天空盒。但是,对比第二张截图,天空盒是在渲染场景不透明物体后渲染的。因此,引入一个固定的Base相机会造成天空盒渲染顺序不对,导致效果出现问题,以及性能也会出现问题(一开始渲染天空盒导致Early-Z无法生效,OverDraw大幅度增加)。

5.1 解决天空盒渲染问题


根据上述代码截图,发现Urp的前向渲染强制只有Base相机才能激活天空盒渲染。我们直接去掉这个非isOverlayCamera判断即可。不过,需要Base相机设置为SolidColor清除方式;如果场景中还有额外的相机也需要注意不要设置天空盒,同样UI相机也是。

5.2 解决额外的Clear操作

我们对自定义的角色、场景、特效Pass加了对Base相机的限制,可以去除额外的2个Clear操作。最终Base相机就只有一个创建RT时候的Clear操作。这样Base相机的额外销毁可以降到最低。
FrameDebug场景渲染结果如下:

六、最终结论

6.1 固定空的Base相机避免切换场景闪烁

为了修复部分机型切换场景闪烁问题,固定一个空的base相机,并且ui相机固定为最后一个overlay相机。如此可以避免切换场景时候,Base相机会切换,从而避免闪烁问题。
为了兼容overlay相机支持SMAA和渲染天空盒,需要修改Urp的源码,如上所述。

6.2 中高端机器开启SMAA

为了兼容固定Base相机的情况下,单独设置场景相机的抗锯齿,需要修改urp源码支持overlay相机单独设置抗锯齿,从而只对场景overlay相机开启SMAA,Base相机不跑没必要的抗锯齿。同时UI相机不开抗锯齿,以避免UI模糊以及性能压力。

6.3 低端机不开启抗锯齿

低端机不开启抗锯齿。根据上述讨论,在不修改urp源码的前提下,低端机的场景相机无法开启FXAA。UI相机开启FXAA会导致UI肉眼可见模糊。所以最终选择低端机不开启任何抗锯齿。

6.4 优化结果

之前切换场景闪烁的机器都不再有花屏和闪烁现象;开启场景相机抗锯齿的情况下,红米k30 ultra从15fps左右恢复到稳定30fps。
果然是后处理猛如虎,带宽猛如虎。

七、参考资料

(二)unity shader在实际项目中出现的问题————低档机(如小米4)切换游戏场景时花屏问题
URP 系列教程 | 多相机玩法攻略

一、如何获得颜色缓冲

网上搜索Unity的后处理或者获得屏幕缓冲,大部分会提到用grabpass到一张指定纹理上或者写一个后处理脚本挂在摄像机上。但是这种方式在Urp管线下已经不生效了。urp取消了默认管线抓取颜色缓冲的grabpass,同时也取消了MonoBehaviour.OnRenderImage,需要使用ScriptableRenderPass 来完成类似的功能。ScriptableRenderPass是urp中的pass基类,urp预定义的pass都继承自该类,我们自定义的pass也需要继承自该类。

1.1 Urp的渲染顺序

urp中通过类型RenderPassEvent定义了一些列pass的渲染顺序或者说时机,大致的顺序是ShadowPass->PrePass(Depth Or DepthNormal)->Opaques->SkyBox->Transparents->PostProcessing,这个顺序也是Urp渲染管线的大致执行顺序。每个Pass或者说每个渲染事件都分Before和After,比如BeforePostProcessing和AfterPostProcessing分别表示后处理之前和后处理之后。
说了这么多,现在说结论,我们的特效Pass或者说特效管线就是要插入在BeforePostProcessing这个事件范围内。对了,同一个事件,比如BeforePostProcessing事件内的pass,最终的执行顺序是已加入管线的先后为准的。

1.2 Urp内置的CameraOpaqueTexture

那么,我们是一定要自定义一个Pass才能获得颜色缓冲吗?不需要,其实Urp的ForwardRenderer内会在某种情况下给我生成一个颜色缓冲存储到贴图_CameraOpaqueTexture中,通过调用函数SampleSceneColor就得获得屏幕颜色。不过,这个贴图的生成时机是固定的,只会在渲染不透明物体之后,更准确的说是在渲染天空盒之后,通过CopyColorPass把摄像机的颜色缓冲Blit到_CameraOpaqueTexture。同时,需要摄像机或者Urp设置中有开启需要OpaqueTexture或者某个Pass的Input有要求ColorTexture。
假如,不需要颜色缓冲中有半透明物体的信息,那么这个_CameraOpaqueTexture就已经足够了。问题是,特效基本是半透明物体,部分场景物体也可能是半透明物体。所以,默认的_CameraOpaqueTexture大概率满足不了需求。
因此,需要在半透明物体渲染之后再获取一次颜色缓冲。这个可以通过在AfterTransparents或者BeforePostProcessing事件中插入一个CopyColorPass来实现。

二、特效渲染管线

说实话,特效同学的要求有点多,要求部分特效受到全屏效果影响部分不受到影响。那么,特效要分成两部分渲染,一部分在全屏特效前,另外一部分在全屏特效后。那么,需要至少4个Pass,全屏特效前的特效Pass->CopyColorPass->全屏特效Pass->全屏特效后的特效Pass。
特效渲染管线如下:

  1. EffectPass (渲染后处理特效前的特效)
  2. CopyColorPass (拷贝屏幕颜色)
  3. UberEffectPostRenderPass (渲染后处理特效)
  4. EffectPass(渲染后处理特效后的特效)

其中,中间2个Pass最好是能够根据是否有全屏特效来动态激活。

2.1 EffectRenderFeature

Urp中需要定义RenderFeature来配置相应的Pass。因此,我们定义一个专门用于特效管线的Feature。在这个Feature中,我们按照上述的顺序加入这4个Pass,其中2和3根据全屏特效是否存在来判断是否加入渲染管线。

2.2 兼容UI特效穿插UI的解决方案

由于发现自定义一个BeforeRenderingPostProcessing的特效Pass来专门渲染特效,会导致所有的特效都在半透明物体之后渲染,而UI都是在半透明Pass渲染的,ShaderTag是UniversalForward,这样子会导致根据UI的Canvas来动态计算UI特效的sortingOrder以解决UI特效穿插UI的问题失效。因此,需要去除后处理特效前的特效pass,将这个Pass对应的特效改成默认的UniversalForward的ShaderTag。
那么,特效渲染管线最终是:

  1. Urp默认的DrawObjectsPass(渲染后处理特效前的特效,兼容解决UI特效穿插界面问题的方案)
  2. CopyColorPass (拷贝屏幕颜色)
  3. UberEffectPostRenderPass (渲染后处理特效)
  4. EffectPass(渲染后处理特效后的特效)

关键代码如下,在这个Feature中还定义ColorRT的名字和采样方式、全屏后处理超级Shader的名字等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
{
renderer.EnqueuePass(mEffectBeforePostProcessRenderPass);

if (UberEffectPostRenderPass.IsPostProcessEnable())
{
mCopyColorRenderTarget.Init(RenderTargetName);
mCopyColorPass.Setup(renderer.cameraColorTarget, mCopyColorRenderTarget, RenderTargetSampling);
renderer.EnqueuePass(mCopyColorPass);
renderer.EnqueuePass(mUberEffectPostRenderPass);
}

renderer.EnqueuePass(mEffectAfterPostProcessRenderPass);
}

public override void Create()
{
Instance = this;

//后处理特效前的特效pass(UniversalForward就会在后处理之前,因此不需要定义专门的Pass,专门的Pass会造成SortingOrder排序失效,UI无法遮挡特效)
//mEffectBeforePostProcessRenderPass = new EffectRenderPass(new ShaderTagId("EffectBeforePostProcess"));
//mEffectBeforePostProcessRenderPass.renderPassEvent = RenderPassEvent.BeforeRenderingPostProcessing;

//拷贝颜色缓冲pass
mSamplingMaterial = CoreUtils.CreateEngineMaterial(Shader.Find("Hidden/Universal Render Pipeline/Sampling"));
mCopyColorMaterial = CoreUtils.CreateEngineMaterial(Shader.Find("Hidden/Universal Render Pipeline/Blit"));
mCopyColorPass = new CopyColorPass(RenderPassEvent.BeforeRenderingPostProcessing, mSamplingMaterial, mCopyColorMaterial);

//特效后处理超级Pass
mUberEffectPostRenderPass = new UberEffectPostRenderPass();
mUberEffectPostRenderPass.renderPassEvent = RenderPassEvent.BeforeRenderingPostProcessing;

//后处理特效后的特效pass
mEffectAfterPostProcessRenderPass = new EffectRenderPass(new ShaderTagId("EffectAfterPostProcess"));
mEffectAfterPostProcessRenderPass.renderPassEvent = RenderPassEvent.BeforeRenderingPostProcessing;
}

Urp的ForwardRender配置如图:

2.3 EffectRenderPass

特效渲染Pass用于渲染普通的特效,Pass跟Shader的对应方式是ShaderTag。关键代码如下,

1
2
3
4
5
6
public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
{
DrawingSettings drawingSettings = CreateDrawingSettings(mShaderTag, ref renderingData, SortingCriteria.CommonTransparent);
FilteringSettings filteringSettings = new FilteringSettings(RenderQueueRange.all);
context.DrawRenderers(renderingData.cullResults, ref drawingSettings, ref filteringSettings);
}

有个需要注意的地方是物体渲染的排序方式要用SortingCriteria.CommonTransparent,毕竟特效都是半透明物体。这个标志是Urp默认的渲染半透明物体的排序方式,理论上是从后到前的顺序渲染。

2.4 UberEffectPostRenderPass

后处理特效Pass为了兼容面片类型的扭曲特效和全屏类型的色散、黑白屏、径向模糊特效,调用了2次绘制函数。第一次是用context.DrawRenderers绘制普通的物体;第二次是用cmd.DrawMesh绘制一个全屏三角形。同时为了支持,场景中出现多个全屏特效,该Pass中保存了一个材质数组,同时根据优先级来排序,优先级高的先渲染,这样就可以实现多个全屏特效的叠加效果。
代码如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
public void AddMaterial(Material mat, int order = 0)
{
var matOrder = mMaterialOrders.Find((temp) => temp.Mat == mat);

if (matOrder == null)
{
matOrder = new MaterialOrder();
matOrder.Mat = mat;
mMaterialOrders.Add(matOrder);
}
matOrder.Order = order;

mMaterialOrders.Sort((a, b) => a.Order - b.Order);
}

public void RemoveMaterial(Material mat)
{
mMaterialOrders.RemoveAll((temp) => temp.Mat == mat);
}

public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
{
DrawingSettings drawingSettings = CreateDrawingSettings(new ShaderTagId("UberEffectPost"), ref renderingData, SortingCriteria.RenderQueue | SortingCriteria.SortingLayer);
FilteringSettings filteringSettings = new FilteringSettings(RenderQueueRange.all);
context.DrawRenderers(renderingData.cullResults, ref drawingSettings, ref filteringSettings);

if (mMaterialOrders == null || mMaterialOrders.Count == 0)
{
return;
}

CommandBuffer cmd = CommandBufferPool.Get();
using (new ProfilingScope(cmd, mProfilingSampler))
{
//set V,P to identity matrix so we can draw full screen quad (mesh's vertex position used as final NDC position)
cmd.SetViewProjectionMatrices(Matrix4x4.identity, Matrix4x4.identity);
for (int i = 0; i < mMaterialOrders.Count; ++i)
{
Material mat = mMaterialOrders[i] != null ? mMaterialOrders[i].Mat : null;
if (mat != null && mat.shader.name == mUberEffectPostShaderName)
{
cmd.DrawMesh(RenderingUtils.fullscreenMesh, Matrix4x4.identity, mat, 0, 0);
}
}

cmd.SetViewProjectionMatrices(renderingData.cameraData.camera.worldToCameraMatrix, renderingData.cameraData.camera.projectionMatrix); // restore
}
context.ExecuteCommandBuffer(cmd);
CommandBufferPool.Release(cmd);
}

三、后处理特效

3.1 屏幕扭曲

屏幕扭曲的效果最简单,只是偏移uv坐标即可。实现方式很多,基本上是采样噪声或者法线贴图来偏移uv坐标,核心代码大概如下:

1
2
3
4
5
half2 screenUV = input.screenPos.xy / input.screenPos.w;
float2 uvDiffuse = input.uv + float2(_ScreenDistortionU, _ScreenDistortionV) * _Time.y;
float4 diffuseTex = tex2D(_ScreenDistortionDiffuse, TRANSFORM_TEX(uvDiffuse, _ScreenDistortionDiffuse));
half2 offset = float2(diffuseTex.r, diffuseTex.g) * _ScreenDistortStrength;
screenUV = screenUV + offset; return half4(SampleScreenColor(screenUV).rgb, 1);

以上代码计算了2次偏移,第一次偏移是计算噪声图的uv,第二次是计算颜色缓冲的uv,也就是屏幕uv。
效果如下,中间的部分放了一个扭曲面片特效。

3.2 色散

色散的原理也很简单,计算一个偏移的uv,分别在两个方向上计算r和b,不偏移的位置计算g,合并起来作为完整的颜色输出。

1
2
3
4
   half2 deltaUv = half2(_ColorDispersionStrength * _ColorDispersionU, _ColorDispersionStrength * _ColorDispersionV);
result.r = SampleScreenColor(screenUV + deltaUv).r;
result.g = SampleScreenColor(screenUV).g;
result.b = SampleScreenColor(screenUV - deltaUv).b;

3.3 黑白屏

黑白屏的关键实现代码也很短。但是想出来不太容易。网上大部分实现,就是简单的灰度化加上和屏幕颜色的插件。后面发现特效同学要的东西其实就是网上找了位特效大佬用ASE生成的shader效果,拿到代码后,过滤掉生成的冗余代码发现核心就是下面2个插值计算。

1
2
3
half luminosity = dot(screenColor.rgb, half3(0.299, 0.587, 0.114));
float smoothstepResult = smoothstep(_BlackWhiteThreshold, _BlackWhiteThreshold + _BlackWhiteWidth, luminosity.x);
result = lerp(_BlackWhiteWhiteColor,_BlackWhiteBlackColor, smoothstepResult);

关键代码是smoothstep,在阈值和阈值+阈值范围之间曲线插值,返回的值再用来插值白屏颜色色和黑屏颜色。

3.4 径向模糊

径向模糊的思想是沿着到中点的方向采样几个点,然后平均。代码如下,这里假定是6次采样。

1
2
3
4
5
6
7
8
9
   half2 dir = screenUV - half2(_RadialBlurHorizontalCenter, _RadialBlurVerticalCenter);
half4 blur = 0;
for (int i = 0; i < 6; ++i)
{
half2 uv = screenUV + _RadialBlurWidth * dir * i;
blur += SampleScreenColor(uv);
}
blur /= 6;
result = lerp(result, blur, saturate(_RadialBlurStrength));

不过,以上代码不一定能满足美术的需求。比如dir是否需要归一化,lerp时候是否需要考虑距离中点的远近等都会影响最终的效果。

3.5 色散和径向模糊的结合

如果先计算色散的DeltaUv,再将取屏幕颜色替换为屏幕扭曲的话,就能得到一个色散和径向模糊结合的效果,关键代码如下:

1
2
3
4
half2 deltaUv = half2(_ColorDispersionStrength * _ColorDispersionU, _ColorDispersionStrength * _ColorDispersionV);
result.r = RadialBlur(screenUV + deltaUv, screenColor).r;
result.g = RadialBlur(screenUV, screenColor).g;
result.b = RadialBlur(screenUV - deltaUv, screenColor).b;

3.6 黑白屏和其它后处理效果的结合

实现方式是,如果开启了黑白屏,将屏幕颜色都应用一次黑白屏,然后再进行其它的处理,比如色散的代码修改为如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    half2 deltaUv = half2(_ColorDispersionStrength * _ColorDispersionU, _ColorDispersionStrength * _ColorDispersionV);
half4 tempScreenColor = SampleScreenColor(screenUV + deltaUv);
#if _BLACKWHITE
tempScreenColor = BlackWhite(tempScreenColor);
#endif
result.r = tempScreenColor.r;

tempScreenColor = SampleScreenColor(screenUV);
#if _BLACKWHITE
tempScreenColor = BlackWhite(tempScreenColor);
#endif
result.g = tempScreenColor .g;

tempScreenColor = SampleScreenColor(screenUV - deltaUv);
#if _BLACKWHITE
tempScreenColor = BlackWhite(tempScreenColor);
#endif
result.b = tempScreenColor .b;

黑白屏和色散结合:

黑白屏和径向模糊结合:

黑白屏和色散、径向模糊结合:

3.7 UberEffectPost超级Shader

具体实现上,我是用一个超级shader将这些功能整合到一起(除了屏幕扭曲,特效的需求是面片)形成一个UberShader。不同的效果通过shader_feature_local的开关来控制,这样既不用增加额外的大小和内存,也更方便美术同学的使用,整合到一起也是美术提出来的。
材质界面如下,

3.8 UberEffectPost脚本

该脚本继承自MonoBehavior,用于判断是否存在全屏特效以及全屏特效材质、全屏特效优先级设置,并且在材质改变时候将后处理材质传入Pass等。
另外,美术同学要求加的后处理参数控制曲线也是在该脚本中,截图如下:

这些参数曲线相对于TimeLine来说,可以更快的生成动态变化的后处理效果,减少美术去编辑TimeLine的工作量,不过自由度会有所降低。

四、参考资料

1、OnRenderImage
2、仿.碧蓝幻想versus黑白闪后处理shader分享(build_in 与urp双版本)

一、反射的实现原理分类

首先要说明下反射向量,指的是视线的镜面反射向量,如下图所示,

实际上,人眼看向一个物体表面的时候,在该位置(上图O点)的反射信息,来自于视线的反射方向,因为光线会从该反射方向打到物体表面,最终进入人眼。一般情况下,我们假定反射角和入射角相等。以下所有涉及到的反射向量, 都是指的视线反射向量,不是光线反射向量。

1.1 CubeMap

天空盒就是一个CubeMap,我们可以假定天空盒是一个环境反射来源,也可以指定另外的CubeMap,用反射向量采样这个CubeMap就能得到反射颜色。CubeMap虽然比较简单,但是也能出很好的效果,而且不需要实时计算反射信息,性能很好。
优点:实现简单,效率高,只需要额外的CubeMap存储反射信息;适用于多种情况,不仅仅限于平面反射。
缺点:反射信息固定,没有变化。

1.2 反射探针

这种方式需要在场景内布置反射探针,用来采集反射信息。渲染时候,在Shader内根据反射探针来获得反射信息。反射探针如果是实时的,性能就会很差,这个时候可以考虑降低反射探针的更新频率或者使用烘焙模式的反射探针。因为反射探针的输出就是CubeMap,因此烘焙模式的反射探针,本质上和CubeMap没有区别。
优点:直接利用引擎计算反射信息,不需要额外工作;适用于多种情况,不仅仅限于平面反射。
缺点:实时反射探针性能差,计算一次反射探针需要朝着6个方向渲染场景,Drawcall增加6倍,性能太差;烘焙反射探针无法变化。

1.3 平面反射

这种方式限制于只能在平面上做反射。如果要求在凹凸不平的表面上实现反射效果,则不太适合。基本思路是将场景根据平面对称镜像一次,具体实现上是将生成的反射矩阵乘以到原场景摄像机的世界到相机空间的矩阵,然后用新的相机再渲染一次场景生成RT。然后在屏幕空间内采样这个RT,得到的像素值作为反射信息。
其实,使用反射探针也能实现平面反射的效果,原理是将探针的位置放在摄像机在平面的对称位置。可以参考大佬的这篇文章,关于反射探头的实时反射。实现难度相对平面反射低很多,不过实时探针比平面反射性能差6倍,优化起来难度太大。
优点:反射效果最好,最真实接近平面反射。
缺点:需要额外渲染一次场景,DrawCall翻倍。

1.4 屏幕空间反射(SSR)

屏幕空间反射的基本原理比较简单,也就是在屏幕空间内通过深度法线纹理恢复世界空间坐标。然后,沿着反射向量方向做步进,也就是所谓的RayMarching,检查当前深度是否已经超过深度纹理对应的值,如果超过,表面已经碰到物体了,那么取当前步进到的颜色值作为反射结果即可。
优点:适用于多种情况,不仅仅限于平面反射;DrawCall不变。
缺点:需要额外的深度和法线纹理,在前向渲染中这不是免费的,需要多渲染一次场景得到深度和法线纹理;效果一般;无法反射屏幕之外的信息;实现比较复杂,移动平台下性能差(步进相交的计算量大),很可能跑不起来;带宽增加。

SSR应该是更适合于延迟渲染的一个反射效果实现方案,毕竟可以免费得到深度和法线纹理。

1.5 屏幕空间平面反射

这个是平面反射在屏幕空间下的一个实现。
SSPR大体的实现思路如下,
1、用当前屏幕UV从深度图重建当前世界坐标,将世界坐标以反射平面进行对称翻转
2、使用翻转后的世界坐标的计算屏幕UV
3、对当前屏幕纹理进行采样得到ReflectColor保存到一张新的ColorRT中,保存位置是翻转后的世界坐标的屏幕UV
4、在反射平面的Shader中用屏幕UV对ColorRT进行采样得到反射颜。
5、在反射平面的Shader中将反射颜色和着色结果进行组合得到最终颜色。


如上大佬的图能够基本说明SSPR的实现思路。UAV write即是3的输出。关键点和难点是要得到步骤三的ColorRT,并且要正确高效。网上有不少博客说的是如何正确高效实现前三步,基本上要使用Computer Shader,图形接口要求是vulkan/metal。具体实现比较复杂,不在此详细说明。

优点:效果较高;性能比SSR好;DrawCall不变。
缺点:对硬件要求高;需要额外的ColorRT,带宽和内存增加;只适用于平面反射。

二、Unity对反射效果支持

2.1 CubeMap

Unity自带的Shader或许有支持,实现起来也很简单,关键代码如下:

1
2
half3 reflectVector = reflect(-viewDirectionWS, normalWS);
half3 reflectColor = SAMPLE_TEXTURECUBE(_Cubemap, sampler_Cubemap, reflectVector).rgb;

2.2 反射探针

目前,Unity内置管线和Urp支持反射探针,HDRP管线还支持一种特殊的平面反射探针,平面反射探针猜测是针对平面反射这种特殊情况的一种优化手段。
场景内布置了反射探针后,Urp管线中反射信息是存储在叫做unity_SpecCube0的内置CubeMap中。Shader中需要采样该CubeMap获得反射信息,Urp代码中搜索函数GlossyEnvironmentReflection,可以得到如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
half3 GlossyEnvironmentReflection(half3 reflectVector, half perceptualRoughness, half occlusion)
{
#if !defined(_ENVIRONMENTREFLECTIONS_OFF)
half mip = PerceptualRoughnessToMipmapLevel(perceptualRoughness);
half4 encodedIrradiance = SAMPLE_TEXTURECUBE_LOD(unity_SpecCube0, samplerunity_SpecCube0, reflectVector, mip);

//TODO:DOTS - we need to port probes to live in c# so we can manage this manually.
#if defined(UNITY_USE_NATIVE_HDR) || defined(UNITY_DOTS_INSTANCING_ENABLED)
half3 irradiance = encodedIrradiance.rgb;
#else
half3 irradiance = DecodeHDREnvironment(encodedIrradiance, unity_SpecCube0_HDR);
#endif

return irradiance * occlusion;
#endif // GLOSSY_REFLECTIONS

return _GlossyEnvironmentColor.rgb * occlusion;
}

上述函数三个关键点,根据粗糙度计算mipmap,采样光照探针,解析HDR贴图。我们重点关注的是mipmap计算,mipmap大家都知道,越远的地方,贴图采样率越低效果才好,看起来越模糊,没有锐利的毛刺感觉;同时粗糙度刚好可以表示这个概率,粗糙度越低越接近镜面,那么反射效果更接近光滑镜子的效果,粗糙度越高,反射效果越模糊。
计算Mipmap的概念可以应用到所有的反射效果实现中,不仅仅反射探针

2.3 平面反射

Unity没有发现支持,需要自己实现或者找第三方实现。后续会写文章介绍如何实现。

2.4 屏幕空间反射

Unity没有发现支持,需要自己实现或者找第三方实现。后续会写文章介绍如何实现。

2.5 屏幕空间平面反射

Unity没有发现支持,需要自己实现或者找第三方实现。后续会写文章介绍如何实现。

三、UE4对反射效果支持

3.1 CubeMap

UE4的材质编辑器可以实现。

3.2 反射探针

UE4有盒子和球形的反射探针

3.3 平面反射

UE4有Planar Reflection Actor,放入场景中即可。不过先要在工程设置中开启平面反射。

3.4 屏幕空间反射

UE4默认是启用屏幕空间反射的。不过是可以在工程设置或者配置文件中关闭的。

3.5 屏幕空间平面反射

目前没有发现UE4支持这个特性。

四、反射颜色与物体颜色的组合

4.1 Mipmap

计算Mipmap,模拟粗糙度的效果,这个在反射探针中已经有说明。

4.2 菲涅尔效果

获得反射颜色后,可以根据菲涅尔定律与物体本身的着色结果进行一定的组合即可。不过,不一定完全照搬菲涅尔效果的近似公式,比如Schlick菲涅耳近似等式。不过关键点在于强度必须是NdotV的函数,最简单的方式是计算出NdotV,对NdotV取反或者1-NdotV,因为入射角越大反射光越强,同时提供一个最大最小值来限制强度范围。也可以自定义其它跟NdotV负相关的函数来在反射颜色和物体颜色之间进行插值,来得到想要的效果。

以下是一个同时应用了粗糙度计算Mipmap和菲涅尔效果的反射平面,

五、参考资料

1、Unity Shader-反射效果(CubeMap,Reflection Probe,Planar Reflection,Screen Space Reflection)
2、关于反射探头的实时反射
3、Unity URP 移动平台的屏幕空间平面反射(SSPR)趟坑记
4、URP下屏幕空间平面反射(ScreenSpacePlanarReflection)学习笔记

平面反射通常指的是在镜子或者光滑地面的反射效果上,如下图所示,

上图是一个光滑的平面,平面上的物体在平面上有对称的投影。

一、平面反射的原理

对于光照射到物体表面然后发生完美镜面反射的示意图,如下所示,

对于平面反射,假设平面上任意一点都会发生完美的镜面反射。因此,眼睛看到物体的一点的反射信息是从反射向量处得到的,这个可以用下图来表示,

这个实际上相当于,眼睛从平面的下面看向反射向量,如下图所示,

因此,如上图所示,我们可以把摄像机根据平面对称变换到A点所示的位置,然后再渲染一遍场景到RenderTexture中。当我们渲染点O的反射信息时候,就可以到这张RT中去采样了。那么如何去采样反射信息了?使用点O的屏幕空间坐标。因为,RT是从A点看到的场景,视线和平面的交点O是当前渲染的像素点,因此用O的屏幕空间坐标去采样RT就可以得到其反射信息。

1.1 平面反射矩阵

1.1.1 平面方程的计算

我们现在来推导一下把摄像机关于平面对称的反射矩阵。
我们知道一个平面可以表示为$P*N+d=0$。P是平面上任意一点,N是平面的法向量,d是一个常数。我们首先需要求出平面方程。对于平面,其世界空间的法向量就是N。用平面的世界空间位置带入P即可求出d的值。

1
plane = new Vector4(planeNormal.x, planeNormal.y, planeNormal.z, -Vector3.Dot(planeNormal, planePosition) - Offset);

我们可以用以上的一个Vector4表示一个平面,前三个分量表示normal,第四个分量表示d。

1.1.2 平面反射矩阵的计算


如上图所示,我们需要计算点A关于平面的对称点A’。关键在于计算出点A到平面的距离AO的大小。那么$A’=A-2*n*|AO|$,负号是因为方向和法线相反。所以,关键是求出|AO|。因为AO实际上是AP在法线相反方向的投影向量,那么$|AO|=dot(AP,n)=dot(A-P,n)=dot(A,n)-dot(P,n)$。由于P满足平面方程,因此$dot(P,n)=d$,因此$|AO|=dot(A,n)+d$,因此$A’=A-2*n*(dot(A,n)+d)$。

假设n为(nx,ny,nz),已知d的值,A是(x,y,z)点作为我们要变换的点,A’为(x’,y’,z‘),那么我们可以得到:
$x’ = x - 2(x * nx + y * ny + z * nz + d)* nx = (1 - 2nx * nx)x +(-2nx * ny)y + (-2nx * nz)z + (-2dnx)$,
$y’ = y - 2(x * nx + y * ny + z * nz + d)* ny = (-2nx * ny)x + (1 - 2ny * ny)y + (-2ny * nz)z + (-2dny)$,
$z’ = z - 2(x * nx + y * ny + z * nz + d)* nz = (-2nx * nz)x + (-2ny * nz)y + (1 - 2nz * nz)z + (-2dnz)$,
改写成矩阵形式可以得到平面反射的矩阵为:

1.2 斜裁剪矩阵

上面我们已经推导出平面反射矩阵,不过还有一种特殊情况需要处理。
斜裁剪矩阵
如上图所示,我们的平面是P,将摄像机从C点对称到C’点。从C’可以看到的区域包括A和B,但是B是在平面P的下部,我们从C是无法看到的。因此,从C’点渲染场景RT的时候必须排除B区域,也就是需要将平面P作为裁剪平面,裁剪掉区域B。
这个东西叫做斜裁剪矩阵,我们可以推导出具体的斜裁剪矩阵或者使用Unity提供的接口直接计算出来。
计算斜裁剪矩阵需要两个步骤,第一步是计算出摄像机空间下的平面表示,第二步是用摄像机空间下的平面和原投影矩阵一起计算斜投影矩阵。
具体推导可以参考文章,【图形与渲染】相机平面镜反射与斜裁剪矩阵(上)-镜像矩阵
第二步也可以使用Unity的camera中的接口CalculateObliqueMatrix来计算,参数就是第一步得到的平面。

二、平面反射的实现

2.1 平面反射的脚本

这里的脚本指的是生成RenderTexture需要的脚本,脚本继承自MonoBehaviour。

2.1.1 默认管线下的实现

默认管线下需要在函数OnWillRenderObject中,基本步骤是先计算反射平面,然后计算反射矩阵和斜投影矩阵,设置反射相机的斜投影矩阵,然后将反射相机变换到平面对面,调用相机的Render函数渲染RT。需要注意的是,渲染的时候需要修改物体正反旋向,即GL.invertCulling设置为true。

2.1.2 Urp管线下的实现

Urp管线下,需要绑定 RenderPipelineManager.beginCameraRendering的回调,然后在回调中实现。回调中会接收到当前渲染的相机,反射相机就是该相机关于平面的镜像。同时,渲染RT的函数需要改成UniversalRenderPipeline.RenderSingleCamera,传入context和反射相机。其余步骤,跟默认管线的区别不大。

2.2 平面反射的Shader

平面反射的shader可以使用普通的场景shader做修改。关键在于如何采样平面反射信息和平面反射强度以及模糊等。

2.2.1 平面反射信息的采样

这个之前已经解释过用屏幕空间坐标来采样RT。

2.2.1 平面反射强度

这个可以用菲涅尔效应计算,不过关键点在于强度必须是NdotV的函数,最简单的方式是计算出NdotV,对NdotV取反或者1-NdotV,因为入射角越大反射光越强,同时提供一个最大最小值来限制强度范围。

2.2.1 模糊和Mipmap

可以采样周围多个像素然后做平均模糊或者高斯模糊。不过,最简单的方式是对RT强制生成Mipmap,采样RT的时候指定Mipmap级别。那么,mipmap级别如何计算了。我们可以根据shader的粗糙度来转行为mipmap级别,这个参考unity的urp内置shader函数PerceptualRoughnessToMipmapLevel的实现。

最终得到的反射效果如图,

三、平面反射的优化

平面反射由于需要对场景镜像渲染一遍, DrawCall会翻倍,而且由于原理限制,没有有效的优化手段,因此平面反射通常是应用在特定的场合下。
优化的手段,主要是降低生成反射RT的消耗。

3.1 控制反射层级

我们可以在反射脚本中增加层级控制,然后设置反射相机的cullingMask,指定层级的物体才会被渲染到RT中。

3.2 控制反射RT的尺寸

可以根据反射平面的大小来调整RT的尺寸,同样我们可以在脚本中开放这个尺寸设置来方便美术来调整RT大小。

3.3 降低RT的shader复杂度

我们可以使用Unity的shader replacement将生成RT的shader都替换为一个简单的shader,然后再渲染生成RT,这样可以大幅度降低shader计算复杂度。不过,DrawCall是无法降低的。

参考资料

Unity Shader-反射效果(CubeMap,Reflection Probe,Planar Reflection,Screen Space Reflection)
图形与渲染】相机平面镜反射与斜裁剪矩阵(下)-斜裁剪矩阵

需要注意的是,本文涉及的内容过多过杂,基本涉及到游戏渲染和图形管线的方方面面。内容是根据多方面的资料整理而成,比如本人的Unity和Unreal引擎相关的理解和认知,以及引擎相关官方文档等,以及DirectX和OpenGL相关官方文档等,以及网络上各种相关文章和资料等。可能有一些纰漏或者不足之处,或者有些阶段的资料来源较为单一,本人主要目的是从概念理解上对应整个游戏引擎的渲染管线,不一定和真实的游戏完全一一对应,比如应用程序阶段的知识对应到游戏引擎应该会有一些区别和取舍,几何阶段和光栅化阶段主要参考的是OpenGL和DirectX,Vulkan和Metal相关资料参考较少,可能不同的图形API会有一些出入。由于涉及内容过多,难免理解不到位,有发现比较明显错误的,请指出以尽早修正,避免造成误解。

一、渲染管线的思维导图

这是本文内容的思维导图,通过该图可以从整体上把握全文的内容,对渲染管线有整理的理解。

二、应用程序阶段

2.1 渲染数据加载

这个阶段指的是将渲染所需要的相关数据,比如模型、贴图、材质、Shader等加载到内存中,通常只发生一次,不需要每帧重复加载。比如,Unity游戏需要在运行时,将需要的场景或者人物从AssetBundle中加载出来,然后引擎才能显示加载的场景或者人物。

2.2 物体级别的裁剪

以下描述的裁剪算法是按照粒度从粗到细的裁剪,相应复杂度和代价也是在递增。最简单的是基于距离的裁剪;然后是利用空间数据结构实现的视锥体裁剪;动态的入口裁剪是一种特殊情况,可以算在视口裁剪内也可以用于预计算;然后预计算数据的裁剪;接下来才是动态的遮挡剔除。

2.2.1 基于距离的裁剪

思路是超过一定的视距即不渲染该物体,Unreal引擎支持这个特性,参考Cull Distance Volumes。对于Unity,可以使用CullingGroup实现类似的功能。即使引擎没有提供类似的支持,在游戏逻辑层面,先可以每帧或者隔帧判断物体跟摄像机的距离,来动态显示隐藏物体。

2.2.2 视锥体裁剪

用物体跟摄像机视锥体做相交测试,将完全没有相交的物体过滤掉。为了加快速度,使用的是物体的包围盒或者包围球跟视锥体做相交测试。游戏引擎内一般都会有空间数据结构来组织物体,比如BVH,那么可以直接使用BVH来搜索加速这个计算。具体过程是用视锥体和空间数据结构去做相交测试,如果当前节点没有相交,那么不需要继续,如果有相交则继续遍历子节点直到叶子节点或者没有相交,叶子节点中存储的物体即是需要渲染的物体。

基于空间数据结构的裁剪

四叉树和八叉树

四叉树对应的是二维空间,下面以八叉树为例来说明。八叉树是将三维空间平均划分为八个部分作为八个子节点,重复划分到一定的粒度为止,比如叶子节点内最多存储多少个物体,物体存储在叶子节点内。
优点:概念和实现简单。
缺点:无限空间不好划分;物体可能跨越分割面;物体分布不均匀会造成层次过深,搜索效率不高。
适用场景:四叉树适用于基于高度场的地形管理;八叉树室适用于室外分布均匀的三维场景(有高度)。

BSP

针对八叉树这种不均匀划分,如果将物体均匀划分成两部分,那么就是Binary Space Partition Tree,可以避免树的层次过深。注意,BSP的每个节点存储的是划分平面,而不是物体,划分平面将场景分为前后2个部分,分别对应左右子树;由于需要BSP树针对的多边形,因此可以针对物体的AABB包围盒做划分。

优点:物体分布均匀,不会出现树层次过深;支持任意空间。
缺点:实现复杂,构造时间长,不适合动态场景。
适用场景:紧凑并且分布均匀的室内场景;静态场景;自带物体排序,方便实现画家算法。

KD-Tree

BSP全称是K-Dimensional Tree。这是一种特殊的BSP,在BSP上进一步将划分面限制跟坐标轴垂直,但是保持从物体分布的中间划分,以尽可能得到一个物体分布均匀的树。KD-Tree不仅仅可以用来做空间划分,在其它领域经常用来组织K维度的数据来做搜索,比如K维数据查询、近邻查询。
优点:物体分布均匀,不会出现树层次过深;数据可以组织为数组形式的完全二叉树,缓存友好等。
缺点:如何确定最优或者较优的划分面?
适用场景:紧凑并且分布均匀的室内场景;辅助其它数据结构进行邻域查询。

BVH

全名是Bounding Volume Hierarchy,中文翻译层次包围盒。BSP和KD-Tree的节点代表的都是分割面,但是面有可能穿过物体。层次包围盒的思想是每个节点代表一个空间,空间计算其包含物体的最小包围盒,划分空间后重新计算子空间的包围盒。与BSP最大区别是节点代表的不再是分割平面而是包含最小包围盒的子空间。因此,这些子空间可能出现一定的重叠,但是不会出现物体出现在不同的划分里面。
优点:节点存储的是物体,方便碰撞检测等查询;构建快,动态更新方便。
缺点:如何确定最优的包围盒?
适用场景:视锥剔除;物体碰撞检测;射线检测;光线跟踪。

空间数据结构的其它应用

除了视锥体裁剪外,空间数据结构还有很多其它应用,比如
1、Ray Casting (射线检测)
2、碰撞检测
3、邻近查询 (比如查询玩家周围敌人)
4、光线追踪

Portal Culling(入口裁剪)

适用于将场景划分为格子,格子之间可能存在入口的情形,如下图所示,

从入口只能看到部分被墙壁遮挡住的物体,因此可以借助这个特性加速视锥体和格子的相交裁剪。Unity中的Occlusion Portal即是这个特性。如果预计算出Protal Culling的结果,那么可以在运行时加快物体裁剪。

2.2.3 预计算遮挡剔除

这是一种空间换时间的算法,会增大内存占用,降低Cpu的裁剪消耗。所以是否需要预计算遮挡数据,还需要具体讨论。一般如果内存消耗不大,但是Cpu占用较高的话,可以尝试开启预计算遮挡数据。

Precomputed Visibility (UE4)

参考虚幻引擎的Precomputed Visibility。思想是将场景划分为格子,计算每个格子内可以看到的可见物体集合相关的数据,用于运行时动态查询。

预计算Occlusion Culling (Unity)

参考Unity的Occlusion culling。类似于UE4的Precomputed Visibility,不过Unity的Occlusion Culling也支持动态物体,但是动态物体只能occludee(被遮挡物体)。Unity的预计算Occlusion Culling应该是入口剔除的一种预计算实现。

2.2.4 动态遮挡查询

这里讲的是在CPU上或者GPU上实现的遮挡查询。图形API已经提供了遮挡查询相关的接口,比如OpenGL的Query Object或者DirectX的Predication Queries。但是不是所有的硬件都能够支持,因此可以在软件层面即在CPU上做软渲染实现遮挡查询。Hierarchical Z-Buffer Occlusion则是在普通的硬件遮挡查询上的进一步优化,使用了层次Z-Buffer来进一步加快速度。

软件遮挡查询

软光栅化模仿硬件遮挡查询,因此不受设备类型限制,只是需要额外消耗CPU。

硬件遮挡查询

使用图形接口本身提供的遮挡查询接口。基本思想是用物体的包围盒去渲染Z-Buffer,统计通过深度测试的像素数目,如果有通过说明当前物体没有被完全挡住,保存结果用于下一帧查询。因此,硬件遮挡查询会存在两个问题:额外的渲染消耗和延迟一帧。

Hierarchical Z-Buffer Occlusion

类似硬件遮挡查询,不过使用Hierarchical Z-Buffer来加快查询速度。具体实现比较复杂,请参考相关文章。

2.2.5 LOD切换

LOD指的是Level Of Details。如果物体通过了以上的裁剪,那么说明会提交给渲染线程进行处理。LOD切换指的是这些物体的细节层次切换,比如一些不重要的或者看不清楚的物体选择更简单的模型。

基于距离的LOD切换

最常见的方式是根据摄像机距离来进行LOD切换,越远的物体选择更简略的LOD,Unity和UE4默认是这种方式。

基于渲染分级切换LOD

但是我们也可以主动切换LOD,比如检测到当前硬件较差,需要切换到更低的画质,那么可以根据游戏设置的渲染品质分级来切换低的LOD。

LOD过渡

LOD的一个常见问题是LOD的过渡问题,可能在切换LOD时候会察觉到明显的过渡。常见的方式是在切换时候混合2个LOD,比如透明度逐渐从1变化到0或者从0变化到1,避免出现明显的过渡。

2.3 物体级别的渲染排序

为了减少OverDraw或者实现半透明效果,所有通过裁剪的物体会按照一定的次序进行渲染。下面列举几个常见的渲染次序。游戏引擎实际的渲染过程还会跟引擎渲染管线的Pass定义顺序相关,比如不透明和透明物体在不同的Pass内渲染的,而且是先在一个Pass内渲染透明物体,再在另外一个Pass渲染透明物体。

从前到后渲染(不透明物体)

从前到后渲染可以利用Early Z-Test过滤掉不必要的片元处理。因此,如果先渲染近处的物体,那么后面渲染的远处物体就不会通过Early Z-Test,就不会进入片段处理阶段。不过,不是所有的硬件都需要按照从前到后的物体顺序进行渲染,这毕竟需要额外的CPU消耗来排序物体,部分支持HSV(hidden surface removal)特性的GPU,比如PowerVR是不需要做这个排序的。Unity提高了静态变量SystemInfo.hasHiddenSurfaceRemovalOnGPU来查询GPU是否支持HSV,
Urp渲染管线会根据这个来判断是否需要跳过从前到后排序物体。

从后到前渲染(半透明物体)

由于半透明物体的渲染算法要求必须从后到前渲染物体,同时关闭深度测试 ,前面的物体与后面的物体进行颜色混合。那么这个排序过程是无法省掉的,类似从前到后渲染的排序,可以采样BSP来排序物体。

渲染层级或渲染队列

Unity同时定义了这2种排序,不过SortingLayer的优先级更高,这个是定义在物体的Renderer组件上。RenderQueue是定义在Shader和材质上,优先级在渲染层级之后。理论上,就是对所有物体进行优先级排序。

最少渲染状态切换

还有一种方式是尽可能在渲染物体的时候避免渲染状态切换,这样能够尽可能减少CPU消耗。那么可以在CPU计算出来一个最优的渲染顺序来尽可能减少渲染状态切换。

2.4 渲染数据绑定和状态设置

这一个阶段讲的是在CPU上设置渲染相关数据和状态,以及为了减少渲染状态切换的渲染合批的思想。

视口设置

设置窗口的渲染区域,比如OpenGL的glViewport。通过这个设置,我们可以在一个窗口上渲染多个不同的视口,比如游戏的分屏。

FrameBuffer设置

一般游戏引擎不会直接将物体渲染到默认的渲染缓冲上,单独的RenderTarget方便进行后处理,在后处理之后再Blit到默认缓冲上。一个FrameBuffer可以包含颜色、深度、模板三个附件,也可以将深度和模板组织成一个32位的RT。

渲染合批

渲染合批指的是为了减少渲染状态切换的一种优化手段,Unity URP渲染管线的SRP技术可以大幅度优化渲染批次。这是一个在Shader变体层次的合批,与之前的材质层次的合批相比有很大的优化。

顶点输入绑定

对于OpenGL来说就是创建和绑定VAO(Vertex Array Object)。一个VAO中可以包含VBO(Vertex Buffer Object)、IBO(Index Buffer Object)。然后用glVertexAttribPointer和glEnableVertexAttribArray指定数据到Shader的输入变量。
顶点属性通常包括,位置、法线、切线、UV、顶点颜色等。

Shader绑定

渲染数据绑定好之后,需要指定当前使用的Shader,这包括Shader的编译链接和使用等(假设Shader代码已经加载进来)。

Shader编译链接使用

类似于CPU上运行的程序,Shader也需要编译链接以及开始使用的过程,不过这个过程基本上是固定。
可以参考learnopengl的着色器一节。

Uniform变量绑定

Shader中通常会有很多全局变量,比如MVP、摄像机位置、光的信息等。这些都需要在CPU上传入Shader中。

Output-Merger Stage相关设置

在渲染管线的最后(片元着色器之后),有一个Output-Merger阶段,也叫做Raster Operations。这是一个不可编程阶段,但是有很多选择可以设置。比如剪切测试、模板测试、深度测试、颜色混合因子和函数、sRGB转换等。这些都需要在应用程序阶段进行设置。

2.5 DrawCall调用

终于到了应用程序的最后一步,即DrawCall的调用了。OpenGL对应的接口是glDrawArrays或者glDrawElements

三、几何处理阶段

这是第二个大的阶段,当前阶段已经进行GPU中了。该阶段的起点和主要过程是顶点着色器。除了着色器之外,其余阶段都是硬件自动进行的,除了可选阶段之外,其余的都是固定的,应用程序无法根据配置来进行更改。

3.1 顶点着色器

顶点着色器的处理对象是应用程序阶段绑定的每个顶点,顶点着色器会获得顶点属性以及相应的Uniform变量。顶点着色器的输出是一个NDC Clip Space的顶点位置。NDC(Normalized device coordinates)是规范化设备坐标系的位置,OpenGL的范围[-1,1],DirectX的范围是[0,1]。之所以说是Clip Space,因为该阶段得到的顶点数据是一个齐次坐标,还需要进行透视除法,即x、y、z除以w分量才能得到NDC坐标系下的位置。

3.2 曲面细分着色器

曲面细分着色器是一个可选阶段,用于将一个简单模型细分成复杂的模型。其实该阶段是2个着色器和一个固定阶段的组合。在DirectX中叫做Hull Shader stage、Tessellator stage、Domain Shader stage;在OpenGL的Tessellation中叫做Tessellation Control Shader、Tessellation Primitive eneration、Tessellation Evaluation Shader。具体的介绍和使用方式请参考相关资料。

3.3 几何着色器

几何着色器也是一个可选阶段。几何着色器的输入是图元的顶点集合(比如三角形图元有三个顶点,点图元只有一个顶点),输出是一个新的图元,新的图元也要包含一个顶点集合。简单来说,几何着色器的输入和输出都是图元,输入的图元是在应用程序阶段指定的,输出的图元可以在顶点着色器中实现。

3.4 Stream Output (Transform Feedback)

这是一个可选的阶段。这个阶段在DirectX中叫做Stream Output ,在OpenGL找叫做Transform Feedback。如果该阶段开启,那么顶点数据流会输出到一个Buffer中,这个Buffer可以给顶点着色器使用也可以返回给CPU,当前渲染管线则不会进行接下来的处理。

3.5 图元组装

这一步是将之前得到的顶点数据组合成图元,比如顶点图元、线段图元、三角形图元。该阶段输出图元进行接下来的处理。

3.6 透视除法和NDC裁剪

该阶段的输入是组装好的图元,输出的是NDC裁剪之后的图元。首先对图元的顶点进行透视除法,这样得到的顶点数据都会位于NDC内,方便进行NDC裁剪。图元裁剪后可以会产生新的图元。

3.7 屏幕空间映射

该阶段是将NDC下的图元顶点坐标映射到屏幕空间。值得注意的是顶点坐标是一个齐次坐标,透视除法后得到的是NDC下的坐标;然后,通过一个缩放和平移变换将x和y映射到屏幕空间。

3.8 面剔除 (Face Culling)

这一个阶段指的是三角形的前后面剔除。前或者后的定义是根据正视三角形的时候定义三角形顶点的旋向,可以定义逆时针旋转或者顺时针旋转为前面。实际上,面剔除跟实际的摄像机位置没有关系,不管摄像机转到哪个地方,前后面不会改变,比如渲染立方体的时候,后面都是立方体内部看不到的面,无论摄像机如何旋转。因为,前后面的定义是固定视角正对三角形时候定义的。

四、光栅化阶段

该大的阶段的输入是几何处理阶段输出的图元。该阶段主要分为四个部分,首先是光栅化图元得到片元(潜在的像素信息),然后进行Early Fragment Test,通过测试后再进行片元着色器,最终进行输出合并阶段的各种测试以及颜色混合等,再输出到颜色缓冲区。

4.1 图元光栅化

该阶段是将图元的顶点信息进行线性插值,然后生成片元数据。每个片元上有顶点信息线性插值而来的片元数据。需要注意的是,这个插值是线性的,如果有一些数据是非线性的,则不能在顶点着色器中计算然后输出到片元着色器,因为线性插值的结果和在片元着色器中计算的结果是不一致的。
这里需要特别说明的是,关于深度z’的生成。屏幕空间映射后的z’是关于摄像机空间z倒数的一个线性函数。之所以使用1/z而不是z,是为了在近处获得更好的深度缓冲精度,因为1/z在近处的变化更快,可以优化Z-Fighting这种现象。由于z’不是一个关于z的线性函数,因此z’应该是在光栅化后硬件自动根据1/z计算出来的,而不是先计算z’再光栅化。

4.2 Early Fragment Test

参考OpenGL的Early Fragment Test,可以看到不仅仅通常所说的Early Z-Test还有其它好几个阶段都可以进行EarlyTest,一共是四个测试(Pixel ownership test、Scissor test、
Stencil test、Depth test)和遮挡查询更新。根据文档,Pixel ownership test和Scissor test从OpenGL4.2起会总是在EarlyTest阶段进行。那么,如果这些测试没有在EarlyTest阶段进行,则会在最终的输出合并阶段进行;如果进行了,那么输出合并阶段也不会重复处理。

4.3 Early Z-Test的限制

不要在片元着色器中改变深度,比如glsl的gl_FragDepth;也不要discard片元,通常实现AlphaTest会根据Alphadiscard片元。因为这些操作会导致硬件无法预测最终的深度,从而无法进行提前深度测试。

4.4 片段着色器

片段着色器的输入是光栅化来的各种顶点属性,输出是一个颜色值。该阶段是计算光照结果的主要阶段。通常片元着色器会有比较复杂的计算,通常的优化手段是将计算转移到顶点着色器甚至CPU(应用程序阶段,用Uniform传入)上。

4.5 Output-Merger Stage(Raster Operations)

终于进入最后的输出合并阶段,该阶段的输入是一个个的片元。片元需要进行一些列的测试和转换,最终才会将颜色输出到缓冲区上。

Pixel ownership test

根据OpenGL的文档,该阶段只对默认缓冲区生效,用于测试像素是否被其它窗口遮挡的情形。对于自定义的FrameBuffer,不存在这个测试。

Alpha Test

需要特别说明的是,Alpha测试当前是已经被废弃了,从DirectX10和OpenGL3.1开始废弃,参考Transparency Sorting文档;当前需要在片元着色器用discard实现。列在这里主要是为了完整性。

Scissor test

参考OpenGL的剪切测试文档,Scissor Test。通过在应用程序阶段设置,可以让片元只通过视口的一个小矩形区域。根据EarlyTest的文档,推测该阶段目前都在EarlyTest阶段进行了。

Multisample operations

如果启用了MSAA,那么需要进行resolve才能够输出到默认颜色缓冲中,进行屏幕显示。假如在默认缓冲中开了MSAA,那么从MSAA的后备缓冲交换到前向缓冲就需要进行resolve操作,因为前向缓冲是single-sample的。如果是自定义的FrameBuffer开启了MSAA,那么在Blit到默认缓冲区的时候也需要进行resolve操作。

模板测试

模板测试基本思想是用一个八位的模板缓冲,一个参考值,一个比较函数,一个掩码,用该参考值和片元对应的模板缓冲值使用比较进行比较(比较之前进行掩码),通过的则片元可以继续进行深度测试,否则丢弃。另外还可以定义模板成功和失败,以及深度测试成功和失败后模板缓冲如何变化。可以参考OpenGL的Stencil Test文档。
模板测试的一个常见的应用是描边或者在像素级别分类。

深度测试

深度测试是根据当前片元的深度值与深度缓冲进行比较,比较函数可以设置,通过比较的片元才会进行接下来的处理,否则丢弃当前片元。

遮挡查询更新

参考OpenGL的遮挡查询文档Query Object
该阶段会更新遮挡查询的结果,因此遮挡查询的结果只能用于下一帧渲染。

颜色混合

需要注意的是,容易误解半透明渲染才会有颜色混合,实际上颜色混合是管线的一个固定的阶段,不透明渲染也会有默认的混合方式。
理解颜色混合,首先要明白2个概念,source和dest,source指的是当前的片元,dest指的是要目标缓冲中对应的颜色。
颜色混合主要是需要设置2个函数,一个函数用于设置混合因子,一个函数用来设置混合函数。混合因子有四种,source rgb和dest rgb,source a和dest a,可以一起指定也可以分开指定。具体可以参考OpenGL的Blending文档。

sRGB转换

1、我们知道显示器或者颜色纹理的颜色空间是sRgb,sRGB空间就是Gamma校正的颜色空间,也就是已经Gamma校正过的颜色数据,这样子在显示器上才能正常显示。如果我们使用的线性工作流,也就是在线性空间中制作资源,编写Shader计算光照结果,那么片元着色器的输出需要转换到sRgb空间。这个转换部分硬件上是自动支持,对于不支持的硬件则需要在Shader里面转换。
2、如果要硬件自动转换,首先要创建的必须是srgb颜色空间的FrameBuffer,在OpenGL中可以使用glEnable(GL_FRAMEBUFFER_SRGB)开启;要保证片元输出的线性空间的颜色,也就是要采用线性工作流。
3、需要注意的是,避免将sRGB转换和ToneMaping混合起来,ToneMaping做的是将HDR映射到LDR。这只是一个带偏向性颜色范围映射,也就是算法倾向性的增强部分颜色。而sRGB转换才是将颜色从线性空间转换到sRGB空间。

Dithering

首先说明一下,颜色格式分为Float、Normalized Integer、Integer三种,默认缓冲区就是Normalized Integer格式的颜色。根据OpenGL的文档,当将一个Float颜色写入Normalized Integer缓冲区的时候,可以开启Dithering。Normalized Integer缓冲区是一个定点数缓冲来存储浮点值,比如通常我们的颜色是定义在[0,\1]的浮点值,但是颜色缓冲是[0,254]\的Int值,OpenGL会自动进行转换。

Logic operations

根据OpenGL的文档,当将颜色写入Integer(Normalized Or Not)缓冲区的时候,可以开启Logic operations。这是一些Bool操作。具体可以参考文档Logical Operation。Logical Operations在sRGB颜色空间是禁止的。

Write mask

该阶段可以分别指定Color、Depth、Stencil的写入掩码。具体参考文档Write Mask

五、RenderPass

5.1 Renderer

以上所有内容在游戏引擎只是一个RenderPass,实际情况下,每帧游戏引擎会按照一定的顺序渲染多个Pass。比如,深度Pass(或者深度法线Pass)、阴影Pass、不透明物体Pass、透明物体Pass、后处理Pass等;而且后面的Pass会利用前面的Pass渲染结果来处理,比如深度Pass渲染的深度纹理可以用在后续的Pass实现一些效果。
总而言之,真实的游戏引擎是每帧渲染多个Pass,每个Pass对应上述的内容。

5.2 CameraStack

实际上,在Unity的Urp渲染管线中,更完整的过程是渲染相机堆栈->每个相机堆栈对应一个渲染器->每个渲染器包含多个Pass。不过,Urp里面每个相机堆栈只对应一个FrameBuffer,也就是所有的相机渲染输出都是这一个FrameBuffer,避免内存和带宽浪费。如果在场景内创建多个相机堆栈,那么其它的相机堆栈的输出应该是离屏RT。

六、参考资料

1、Graphics pipeline
2、Rendering Pipeline Overview
3、Per-Sample Processing
4、Output Merger (OM) stage
5、裁剪和空间管理
6、[总结] 漫谈HDR和色彩管理(三)SDR和HDR