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

一、卡通着色

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

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);

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

一、思维导图

二、模型空间

这里的模型空间指的是建模出来的空间，也就是用建模软件输出的数据所在的坐标空间。比如，3D Max用的是右手系，输出的模型数据所在的空间就叫模型空间；由于Unity的模型空间是左手系，所以通常需要旋转90度才能对应上。

三、切线空间

切线空间又可以叫做纹理空间。假如纹理坐标uv构成一个二维空间，加上垂直于这个二维空间的法线，那么就是一个三维的切线空间。

3.1 法线贴图的切线空间

切线空间有什么应用了？我们在计算光照模型的时候，通常会有更精细表示法线的数据，比如法线贴图，法线贴图通常是建模软件用高模计算出来的。不过，法线贴图是原始切线空间下的数据。因此，法线贴图中的法线数据通常是(0,0,1)，所以法线贴图表现出大部分是蓝色。我们在读取这个法线数据后，需要将其变换到计算光照模型所在的空间，比如世界空间。

3.2 模型空间下的切线空间

顶点上除了位置数据外，还可以有法线、切线数据。注意，这些数据都是在模型空间的。因此，法线、切线、副切线（法线和切线叉积计算出来）自然可以构成一个模型空间下的切线空间。

3.3 切线变换

假如我们想将切线空间下的法线变换到世界空间，该如何做了？我们需要得到一个世界空间下的切线空间。首先将模型空间下的切线空间变换到世界空间，这样我们就得到了一个世界空间下的切线子空间，然后用这个切线子空间构成一个切线变换，再对切线空间下的法线数据应用这个切线变换就能变换到世界空间。
用公式来表示这个变换是，$NormalWS=TangentMatrix*NormalTS$。当然也可以将切线变换到其它的空间，比如摄像机空间，区别是构造不同的TangentMatrix。

四、关节空间

4.1 关节空间

这里的关节空间，指的是带骨骼的模型中，骨骼或者关节所定义的局部空间。
以人体手指为假设，手指会受到腕关节、肘关节、肩关节影响，对应三个骨骼。那么，手指会依次受到这三个关节的牵扯影响。我们知道，虚拟的根骨骼Root所在的是模型空间，同时每个关节也定义了自己的局部空间，比如腕关节是最终的局部空间，我们把这个关节定义的局部空间叫做关节空间。

4.2 关节姿势

所谓关节姿势，存储的是子关节到父关节的变换，包括旋转、缩放、平移，这个也可以叫做局部关节姿势。全局关节姿势是，将所有的局部关节姿势结合起来。
比如公式，$P{2\to M} = P{2\to 1} P{1\to 0} P{0\to M}$表示的是将顶点从子关节2的局部空间变换到模型空间。全局关节姿势可以表示为$P{j\to M} = \prod {i=j}^{0} P_{i\to p(i)}$，其中p(i)是关节i的父关节。

4.3 绑定关节姿势

我们知道，默认情况下，蒙皮骨骼都有一个T-Pose，即绑定姿势，也可以理解为初始姿势。模型空间的顶点乘以绑定姿势的逆变换就能得到关节空间的顶点。

4.4 蒙皮矩阵

模型空间的顶点乘以绑定姿势的逆变换就能得到关节空间的顶点。关键点来了，这个时候再乘以骨骼的当前全局姿势矩阵，就又变换回了模型空间。所谓的蒙皮矩阵，就是这两个变换的结合。可以用公式表示骨骼i的蒙皮矩阵，$K{j} = (B{j\to M})^{-1} C_{j \to M}$，B代表绑定姿势，C代表当前姿势。多个蒙皮矩阵的加权，就能得到蒙皮动画。

4.5 蒙皮动画

顶点会受到多个骨骼影响，这些骨骼的影响加权和为1，这个就是蒙皮动画。可以用公式来表示，$p’ = \sum_{i=1}^{n}W_i(p)K_ip$。其中，p是模型空间的顶点，Wi是骨骼i影响的权重，Ki是骨骼i的蒙皮矩阵。蒙皮矩阵的计算如上所示。

4.6 总结

根据以上五步的推导，蒙皮动画需要存储的数据是，

• 绑定姿势下的的模型空间顶点
• 绑定关节姿势的逆矩阵
• 当前姿势数据（实时计算当前姿势矩阵）
• 蒙皮矩阵的权重

五、世界空间

所谓世界空间，不需要解释了吧。放在游戏场景里面，指的是规定了场景坐标系的空间。模型空间，则指的是场景内的单个模型自身数据所在的空间。

5.1 模型变换

模型变换就是将模型空间的顶点数据变换到世界空间，通常包括对模型的平移、旋转和缩放。但是，一般要求的变换顺序是先缩放、再旋转、最后平移，如果反过来会造成平移受到前面的变换影响，与直观印象不符合。
所以，$ModelMatrix=TranslateMatrix*RotateMatrix*ScaleMatrix$。特别说明平移矩阵指的是，将模型从原点移动到其在世界空间的位置。

六、摄像机空间

摄像机空间也叫做观察空间。摄像机可以理解为世界空间的一个位置和朝向，比如在坐标(1,1,1)看向原点，那么射线的位置就是坐标(1,1,1)，前向就是看向的方向（-1，-1，-1）。这个时候再定义一个垂直于forward的Up方向，就可以根据叉积找到垂直forward和up方向的right方向。这三个方向就可以构成一个摄像机空间。

6.1 观察变换

观察变换是将顶点从世界空间变换到新的摄像机空间。首先，需要将顶点平移，比如上述情况下的原点在观察空间下是(-1，-1，-1)；然后，需要旋转顶点以匹配观察空间的坐标轴。由于观察空间的坐标轴是世界空间下的单位正交基，因此将三个轴放入矩阵即可得到旋转矩阵的逆矩阵（等于旋转矩阵的转置矩阵）。

七、裁剪空间

裁剪空间指的是观察空间下的顶点经过投影变换后所处的空间。我们知道，可视区域是摄像机前面的一个平截头体（透视投影）或者一个长方体（正交投影）。裁剪空间的用途是将可视区域外的物体裁剪，同时计算物体的二维坐标。

7.1 投影变换

投影分为透视投影和正交投影两种，透视投影会造成近大远小的效果，符合视觉效应，三维游戏一般使用透视投影，正交投影则远近一样大，通常只用于建模软件。

透视投影

从图可以看出，透视投影后w是有值的，并不是1，结果还是一个平截头体。具体的矩阵推动，请参考相关资料。

正交投影

从图可以看出，正交投影实际上就是缩放和平移的结合，得到的结果是一个-1到1范围的立方体。

7.2 透视除法和图元裁剪

由于透视投影后齐次坐标的w非1，需要进行透视除法，这个是图形硬件自动进行的。如图所示：

透视除法后，可以得到和正交投影结果一样的规范化立方体，也叫做NDC（规范化设备坐标系）。
到了NDC后，就可以方便的进行图元裁剪，毕竟坐标都是-1到1了（DirectX下Z坐标是0到1）。

7.3 顶点着色器的输出

顶点着色器必须输出裁剪空间下的坐标。由于DirectX的NDC的Z范围是0到1，与OpenGL的-1到1有一定区别。因此，这2者的投影矩阵在Z坐标上有一定的平移和缩放区别。

八、屏幕空间

投影变换后得到的顶点范围是-1到1。现在还需要将NDC下的顶点映射到屏幕空间。屏幕空间也可以叫做窗口空间，即窗口定义的坐标空间。

8.1 视口变换

假设，窗口坐标原点在左下角（OpenGL的原点在左下角，但是DirectX的在左上角），窗口大小为Width和Height。视口变换就是把-1到1的x和y坐标范围映射到（0，width）和（0，height），对应DirectX的话，y还需要取反。这就是一个平移和缩放的过程。

实际上，透视除法和视口变换（屏幕空间映射）都是硬件自动进行的。

九、参考资料

Unity Shader入门精要

一、伽马校正

所谓gamma校正，实际上是一个颜色的非线性变换。下面来解释这个变换曲线存在的原因。

1.1 人眼的非线性视觉效应

为什么要有gamma校正了。一言以蔽之，人眼的生理效应。如下图所示，

第一行是人眼感受到的线性亮度变化，第二行是真实的非线性亮度变化。可以得出结论，首尾两端是一致的，但是中间值变化不一致；真实的中间亮度值必须更大，才能得到人眼感知的线性亮度变化。我们的目的是让人眼感受到线性的亮度变化曲线，因此输入亮度必须是第二行这种非线性的亮度变化曲线。
第二行的亮度变化曲线，就是伽马校正曲线。

1.2 非线性显示器

显示器为了应对人眼的这种非线性视觉效应，采用的也是类似的机制（也可能是历史原因，总之认为当今的显示器都是如此设计就行）。假设我们输入的颜色值，即输入给显示器的电压，那么这个电压对应的是1.1的第二行（Gamma校正曲线）；人眼感受到的显示器的真实输出对应的是1.1的第一行（线性颜色输出），即gamma编码曲线。
如下图所示，

这里反复强调了，人眼感受到的显示器亮度，而不是显示器的输出亮度。举个例子，输入颜色值是0.732的话，那么显示器经过gamma编码后输出的亮度是0.5，人眼感受到的亮度是0.218，刚好和人眼的视觉效应匹配。

值得强调的是，gamma指数2.2是可以变化的，在不同的场景下，可以选择不同的gamma指数。

1.3 总结

总结，照片是按照gamma校正曲线编码的，显示器经过gamma编码后，输出照片的亮度是线性曲线，人眼看到线性曲线的亮度后感知到的曲线是gamma曲线。
因此，我们需要确定输入的颜色数据是在线性曲线或者gamma校正曲线上。

二、颜色空间和工作流

颜色空间可以理解为，颜色是在哪个空间下制作的。不需要特别多的数学曲线来描绘，但是这个说明又需要一点美术经验来理解。下面来具体分类解释。

2.1 伽马颜色空间和工作流

比如，我们拍摄的照片，人眼看起来是正确的，那么说明人眼感受到的是线性变化的，因此照片的数据是经过伽马校正的，也就是照片的数据变化是在gamma校正曲线上的。同样的，在电脑上使用软件制作的图片也是处于gamma校正曲线上的。
我们把这种颜色数据在gamma校正曲线上的，叫做gamma color space，也叫做sRGB。
那么，伽马工作流指的是所有的流程都在伽马颜色空间完成，比如输入数据，比如光照计算等。

2.2 线性颜色空间和工作流

类似的，线性颜色空间指的是输入数据是在线性曲线上的。那么，我们如果用一张真实的图片作为输入，首先要对其进行gamma校正，也就是需要将这张贴图设置为sRGB，引擎或者图形接口自动会将其转换。
线性工作流指的是所有的流程都在线性颜色空间完成，比如输入数据，比如光照计算等。
值得强调的是，我们现在的显示器都是gamma显示器，因此我们不能在渲染管线中不能直接输出线性数据，需要转换到sRGB空间再进行输出，某些硬件支持这个自动转换，如果检测到硬件不支持，渲染引擎会在后处理流程中用shader来转换。

2.3 工作流总结

下面用一张流程图来总结颜色空间的工作流，如下所示，

• sRGB Texture在gamma工作流下正常显示
• 线性工作流的输出必须进行gamma校正，否则显示会变暗
• gamma工作流的shader计算在sRGB空间中
• 线性工作流的shader计算在线性空间中

注意，sRGB贴图移除gamma校正和shader输出进行gamma校正，都有硬件的自动支持，比如OpenGL的sRGB纹理和 GL_FRAMEBUFFER_SRGB。如果硬件不支持，那么应用（比如游戏引擎），在线性工作流中需要自己进行变换，比如加载sRGB贴图时候手动变换到线性空间和使用shader进行gamma校正。

2.4 关于贴图设置为sRGB后变暗的说明

业界或者网上一直流传，贴图设置为sRGB后会变暗。
参考2.3的图，在线性工作流下，如果贴图设置为sRGB后，引擎会对贴图进行去gamma校正，变换为线性空间，颜色数值都会变小，参考1.2的曲线图。不管原始图片是否是sRGB空间下创建的，渲染时候得到的颜色值都变小了，因此不管输出时候是否进行gamma校正，我们看到的结果都会变暗。
如果是gamma工作流，则不会变暗，因为没有去gamma校正这个过程。

三、总结

我们讲述了人眼和显示器的视觉效应，以及两种颜色空间和对应的工作流。我们需要着重弄清楚的是，人眼的视觉效应、显示器的gamma校正、gamma颜色空间（sRGB）。

四、参考资料

Unity Color space
Gamma Correction
Gamma、Linear、sRGB 和Unity Color Space，你真懂了吗？

一、DrawCall、Batches、SetPassCalls的基本理解

我们先从图形渲染的角度对这些概念做一个基本的理解。

1.1 DrawCall

DrawCall实际上指的是一次图形渲染接口的调用，比如OpenGL的glDrawArrays或者glDrawElements的一次调用，以及DirectX的DrawPrimitive或者DrawIndexedPrimitive。因此，DrawCall可以简单理解为一次渲染指令调用。

1.2 Batches

我们知道，在调用DrawCall之前，需要设置渲染状态，比如当前使用的Shader、当前shader的参数（材质参数）、深度测试是否开启、模板测试设置等，设置完这些状态后，才会调用DrawCall。我们把设置渲染状态，加载网格数据，然后调用DrawCall这一个过程，叫做一个批次。理论上，我们可以在设置完渲染状态后，调用多个DrawCall，假如一个DrawCall的绘制数量有限制的话，但是通常一个批次也就调用一次DrawCall。
那么所谓合批，就是想办法尽量减少批次。减少批次的关键是减少场景中不同的渲染状态组合，也就是渲染状态切换尽可能少。这样子批次自然最少。批次少了，批次对应的DrawCall自然少了，每个批次需要的渲染状态切换也少了。注意，渲染状态切换类似于DrawCall都是一次渲染指令调用。

1.3 SetPassCalls

那么什么是SetPassCalls了。在Shader中有一个Pass的概念，比如一个Shader有2个Pass，那么实际上应用这个Shader的物体会按照Shader的Pass定义顺序渲染2遍，每一遍都是用对应的Pass渲染。Unity的官方文档里面解释SetPassCalls就是Shader中的Pass被切换的次数，因为每个渲染批次都会设置一个Pass，一个Pass就会对应一些渲染状态，当渲染状态变化时候就必须开始新的批次，但是新的批次下Pass可能没有变化

二、Unity的DrawCall、Batches、SetPassCalls区别和联系

我们以一个没有开启静态合批的场景运行时的统计数据为例子来说明。我们打开Unity场景的Statistics窗口，

以及Profile窗口，

FrameDebug窗口，

我们可以得出这个场景的DrawCall是584，Batches也是584，SetPassCalls是192。Statistics中是不会显示DrawCall的，只有在Profile窗口下选中Rendering才能看到。

2.1 Unity的DrawCall

根据运行数据，可以得出结论DrawCall数目基本等于Batches。为什么说基本了？因为同一个Batch下，可能分多次调用DrawCall，比如网格过于巨大，可能拆分成多个DrawCall，这个也是符合批次的定义的，因为渲染状态没有切换，这发生在静态合批和动态合批的情况下。
如果没有静态合批和动态合批，那么DC等于Batches，如果有那么DC没有变化，但是Batches等于合并之后的渲染状态切换。

2.2 Unity的Batches

Unity的批次实际上就是前面解释的Batches。不过，Batches实际上包含有三类：Static Batches、Dynamic Batches、Instancing Batches，分别对应Unity的静态合批、动态合批、实例化渲染。

2.3 Unity的SetPassCalls

根据FrameDebug窗口可以看到，一共是197+24+1+1=233个渲染事件。其中，Clear事件有14个。除去Clear事件后还生效219的事件，不过我们的SetPassCalls是192，还多了17个。我们观察到UI相机有18个DrawMesh事件，点击后发现这个事件使用的都是同样的Pass，如下图所示，

，这些Pass之间除了材质属性外的渲染状态都是一致的，因此还要减去17。
注意，FrameDebug窗口的截图中折叠的部分基本是SRP Batch。
根据这些数据我们可以得出结论，如果支持SRP Batch，一个SetPassCall等于一个SRP Batch；如果不支持SRP Batch，那么一个SetPassCall就是一次Shader的Pass切换。由于Pass切换实际上指的是Shader关键字或者ROP阶段的设置改变，那么其实这个跟SRP是一致的。SRP本质上也是Shader变体切换，而非传统的材质切换。传统的材质切换对应的是Batches。
注明：实验引擎版本是Unity2020.3.12。

2.4 总结

至此可以得出最终结论，Unity的DrawCall和Batches数目在没有静态合批和动态合批时候相等，Batches对应的是传统的材质切换，DrawCall是一次Batch内一次到多次的渲染命令调用。SetPassCalls一般会大幅度少于Batches，对应的是SRP Batch或者Pass切换，数目等于FrameDebug中的事件数目减去Clear事件、Draw Mesh事件中重复的Pass数目。

三、DrawCall相关的性能优化

3.1 为什么需要降低DrawCall

一谈起游戏优化，尤其是渲染优化，大家就说降低DrawCall，降低批次。实际上，大部分人都没法正确区分，Unity引擎下DrawCall、Batch、SetPassCall这三个概念。DrawCall或者批次高，并不是性能低下的直接原因，真正的原因是批次高，导致渲染状态切换过多。而渲染状态切换实际上是发生的渲染管线的CPU阶段，使用图形API，比如OpenGL或者DirectX来完成的。这样CPU会花费大量的时间提交渲染指令给GPU，CPU占用过高，但是GPU的渲染指令队列并没有饱和，GPU执行渲染指令的速度很快，因此GPU的负荷可能还没上来，GPU在等待CPU提交渲染指令，整个渲染流水线没有最高速的跑起来。当然如果GPU也忙不过来，那么不仅仅需要降低批次，Shader复杂度和OverDraw应该是重点关注对象。

3.2 如何降低批次

3.2.1 静态合批

静态合批实际上是引擎在打包或者烘焙时候，将同材质的物体合并成一个更大的物体，这样相同材质的物体只需要一次渲染状态设置和一次DrawCall调用，也就一个批次。由于合并生成大的模型后，会占用额外的内存空间，比如三个同材质的立方体的网格就是一个简单的立方体，合并后的网格占用是三个世界空间立方体的组合，因此有时候需要考虑静态合批带来的内存增长。

3.2.2 动态合批

动态合批是静态合批在运行时的体现。Unity对动态合批有一些限制，比如限制模型顶点属性不能超过900等，具体可以参考Dynamic batching。动态合批由于是运行是合并网格，因此不仅会增大内存，还会占用CPU时间。动态合批一般应用在一些小物体的合并上，比如小的道具或者特效等。

3.4.3 Instancing Draw

Instancing Draw实际上是图形接口支持的一种技术，可以翻译为实例化渲染，可以参考文档：实例化。这种技术通常应用在重复的物体大量出现的情况下，比如说草地、树木、星星，这种只有位置或者朝向、缩放等不一样。实例化渲染可以通过指定每物体属性（正常的每顶点属性是每个顶点不一样）来传入这种每个物体不一样的属性，从而避免使用不同的材质。在OpenGL中是使用glVertexAttribDivisor来设置属性的更新速度，从而指定每物体属性。
至于Unity的Instancing，参考文档：GPU instancing。关键点：GPU instancing不能和SRP Batcher、Static Batcher并存，SRP Batcher、Static Batcher的优先级更高；GPU instancing不支持 SkinnedMeshRenderers（蒙皮）； Graphics.DrawMeshInstanced或者Graphics.DrawMeshInstancedIndirect是主动Instancing，如果不调用这2个函数，那么Unity会尝试Instancing（如果Shader支持Instancing，且没有开启SRP Batch），这会有额外的CPU消耗。

3.4.4 SRP Batcher

参考文档：Scriptable Render Pipeline (SRP) Batcher。关键点：只有可编程管线才支持，默认管线不能支持；Shader必须支持SRP Batcher；只支持Mesh和SkinMesh，不支持粒子系统；不能与 Instancing Draw兼容；如果使用了MaterialPropertyBlock，SRP Batcher无法开启。
SRP Batcher本质上是Shader变体级别的合批优化，根据前面的分析等价于一次SetPassCall。具体原理还是参考Unity 的官方文档。

3.4.6 合批方法的优先级

根据Unity优化DC的官方文档Optimizing draw calls，合批方法的优先级如下：

1.SRP Batcher and static batching
2.GPU instancing
3.Dynamic batching
其中SRP和静态合批是最高优先级，并且是可以兼容的（对于使用SRP Batcher兼容Shader的物体），因此可以同时启用静态合批和SRP Batcher。不过，经过实验发现上述实验场景在开启了SRP Batcher后，再去打开静态合批，Batches并没有多少什么变化，猜测是场景内使用同样材质的物体过少，相反使用同样Shader变体的物体较多。

3.4.5 合批总结

对于目前的可编程管线，优先使用的都是SRP，因此Shader要尽可能兼容SRP Batcher。对于特殊情况，比如渲染草地这种，才需要舍弃SRP Batcher去使用实例化渲染。对于不支持SRP Batcher的Shader，动态合批和静态合批才可能会被开启。动态合并和静态合批都要增大内存，动态合批还会占用CPU，限制条件还非常多。所以，首选SRP Batcher和Instancing。
由于SRP Batcher不能降低DrawCall和Batcher，实际上降低的是SetPassCall；但是静态合批和动态合批可以降低Batcher，但是不能降低DrawCall。所以，在一些低端机器上，Batcher过多可能引起问题的话，还是得开启传统的静态合批，不过这会需要打开网格读写，合并网格也会增大包体和内存。因此出现这种情况的话，最好的选择应该是只开启SRP Batcher，然后让美术手工合并网格和贴图。

四、参考资料

DrawCall，Batches，SetPass calls是什么？原理？【匠】
The Rendering Statistics window
Unity Profiler中常见的WaitForTargetFPS、Gfx.WaitForPresent 和 Graphics.PresentAndSync
Draw call batching
Optimizing draw calls

左手坐标系和右手坐标系是三维空间下两种不同的坐标系，而且无法通过旋转将左手坐标系转换到右手坐标系。与其相对应的，有左手定则和右手定则，主要是用来确定叉积的朝向或者说旋向。
首先，规定二维坐标，X轴朝右、Y轴朝上，推广到三维空间，需要确定的是Z轴是朝前还是朝后。

一、左手坐标系

所谓左手坐标系，指的是通过左手来确定的一个三维空间坐标系。

1.1 确定左手坐标系的方式

下面总结了三种可以确定左手坐标系的方法。

1.1.1 拇指、食指、中指相互垂直确定法

如图，伸出左手，拇指朝上代表Y轴、食指朝前代表Z轴、中指朝右代表X轴。注意，中指这个时候是只能往右边弯曲的。

1.1.2 左手定则确定法

伸出左手，手指朝着右边X轴，握向Y轴，这个时候拇指指向的方向就是Z轴（朝前）。

1.1.3 人站立的正面朝向确定法

人朝前站立着，右手伸出的朝向是X轴，头顶的方向是Y轴，面向Z轴。

1.2 左手定则

假设，叉乘计算，C=A叉乘B。如何确定在C的朝向了？如果A和B都在左手坐标系下，那么使用左手定则来确定C的朝向。
类似1.1.2，伸出左手，手指朝着A，握向B，这个时候拇指指向的方向就是C。

二、右手坐标系

2.1 确定右手坐标系的方式

2.1.1 拇指、食指、中指相互垂直确定法

参考1.1.1，伸出右手，拇指朝上代表Y轴、食指朝前代表Z轴、中指朝左代表X轴。注意，中指这个时候是只能往左边弯曲的。
但是，我们一般假定X轴朝右，因此需要握着Z轴旋转180度。这个时候，拇指朝上代表Y轴、食指朝后代表Z轴、中指朝右代表X轴。注意，左右手坐标系旋转后不会改变。

2.1.2 左手定则确定法

伸出右手，手指朝着右边X轴，握向Y轴，这个时候拇指指向的方向就是Z轴（朝后）。

2.1.3 人站立的正面朝向确定法

人朝前站立着，右手伸出的朝向是X轴，头顶的方向是Y轴，背后的是Z轴。

2.2 右手定则

类似1.1，如果A和B都在,右手坐标系下，那么使用右手定则来确定C的朝向。
类似1.1.2，伸出右手，手指朝着A，握向B，这个时候拇指指向的方向就是C。
因此，左手定则和右手定则的区别是使用左手还是右手。

三、图形API的左右手坐标系

图形管线中，存在多个坐标系，每个坐标系都可以使用左手或者右手坐标系。下面按照，物体坐标系->世界坐标系->摄像机坐标系->裁剪坐标系->窗口坐标系来说明。

3.1 OpenGL

OpenGL默认是右手坐标系。不过到了窗口坐标系，OpenGL使用的是左手坐标系。为什么了？因为OpenGL的深度范围是[0,1]，而且是摄像机越远，深度越大，这就是左手坐标系啦。
由于物体坐标系、世界坐标系、摄像机坐标系都是右手坐标系，但是窗口坐标系是左手坐标系，那么投影矩阵就需要乘以右手坐标系变换到左手坐标系这个变换，也就是Z变换成-Z。不过这个变换也可以放在摄像机坐标系，也就是MVP的V中。现在假定，都乘到P中了。
最终结论是：物体坐标系、世界坐标系、摄像机坐标系是右手坐标系；裁剪坐标系和窗口坐标系是左手坐标系，窗口坐标系实际上只是裁剪坐标系进行齐次除法后再平移缩放而已。

3.2 DirectX

DirectX默认是左手坐标系。
类似3.1，物体坐标系、世界坐标系、摄像机坐标系是左手坐标系。注意，DirectX的窗口坐标系是以左上角为原点的，深度是朝前的，那么跟OpenGL的反过来，是右手坐标系。
因此，裁剪坐标系和窗口坐标系是右手手坐标系。投影变化同样要乘以，右手坐标系变换到左手坐标系这个变换，也就是Z变换成-Z。

3.3 Vulkan

Vulkan的窗口坐标系和DirectX的一致，因此推测其余坐标系和DirectX的一致。

3.4 Metal

Vulkan的窗口坐标系和DirectX的一致，因此推测其余坐标系和DirectX的一致。

看来只有，历史遗留的奇葩OpenGL的窗口坐标系，原点在左下角啊。原点在哪，这个跟纹理的v坐标是否需要取反也有关系。

四、游戏引擎的左右手坐标系

游戏引擎中，物体和世界坐标系是固定的，对于所有的图形API都会一样。

4.1 Unity

根据上图，Unity的物体和世界坐标系可以推测都是左手系。

根据上图，出自Shader入门精要，Unity的窗口坐标系和OpenGL的一致，是左手系。但是摄像机空间变换到了右手系。那么，在V中需要乘以Z到-Z的变换。同时，P中再乘以-Z到Z的变换变回左手系。
为啥多次一举了，怀疑这个结论的正确性。下面做实验，用IMGizmos绘制坐标轴。代码如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

using UnityEngine;

namespace GYGame
{
    /// <summary>
    /// 出生点
    /// </summary>
    public class PlayerStart : MonoBehaviour
    {
        public float GizmosHeight { get; set; } = 2.0f;

        void OnDrawGizmos()
        {
            IMGizmos.Line3D(transform.position, transform.position + transform.up * GizmosHeight, Color.green);
            IMGizmos.Line3D(transform.position, transform.position + transform.right * GizmosHeight, Color.red);
            IMGizmos.Line3D(transform.position, transform.position + transform.forward * GizmosHeight, Color.blue);
        }
    }
}

选中场景相机，可以得到下面结果，

可以看到右下角的场景相机画面里面有显示PlayerStart的Gizmos，Gizmos显示的坐标系是左手系，跟右上角显示的坐标系是一致的。同时，引擎自带的Gizmos显示的摄像机前向也是Z轴正向。
因此，推测我实验的Unity版本是2020，与UnityShader入门精要使用的Unity5.X版本，摄像机空间的旋向性已经发生了变化。

4.2 UnrealEngine

虚幻和Unity一样也是采用左手坐标系，不过其是Z轴朝上，Y轴朝外。沿着X轴旋转90度，可以得到Z轴朝内，Y轴朝上，那么和Unity的是一致的。
推测，其余的空间的坐标系旋向和Unity的是一致。摄像机空间的旋向也可以用类似4.1的方式绘制Gizmos，然后选中摄像机，查看摄像机的绘制结果。

五、参考资料

Shader入门精要
图形坐标系的跨平台适配