如何为物体加上轮廓效果

本文参考自教程，加上自己的一点心得体会。教程里的做法是使用了Unity的Post Processing Stack，这里并没有使用，而是用的自己写的脚本，调用OnRenderImage实现后处理。

如何为物体加上轮廓效果1.png

首先，为什么要用后处理的方式去实现轮廓效果呢？这里，效果的实现依赖于对屏幕空间中相邻的若干点进行采样，获得深度或者法线信息。而如果用常规的方式去实现，frag里只能拿到物体的screenPos，然后通过tex2Dproj去采样，拿不到相邻点信息的。

那么，在frag里需要做哪些事情呢？我们定义的轮廓基于以下事实：如果相邻的若干点采样出的值差异过大，那么此处就存在轮廓。这里我们使用深度值和法线来作为衡量标准。我们定义_Scale作为相邻像素的距离，_Scale越大，距离越远。相关代码如下：

float halfScaleFloor = floor(0.5 * _Scale);
float halfScaleCeil = ceil(0.5 * _Scale);
float2 bottomLeftUV = i.uv - _MainTex_TexelSize.xy * halfScaleFloor;
float2 topRightUV = i.uv + _MainTex_TexelSize.xy * halfScaleCeil;
float2 bottomRightUV = i.uv + _MainTex_TexelSize.xy * float2(halfScaleCeil, -halfScaleFloor);
float2 topLeftUV = i.uv + _MainTex_TexelSize.xy * float2(-halfScaleFloor, halfScaleCeil);

可以发现，当_Scale为奇数 $2k+1$ 时，halfScaleFloor的值为 $k$ ，halfScaleCeil的值为 $k+1$ ；当_Scale为偶数 $2k$ 时，halfScaleFloor和halfScaleCeil的值均为 $k$ 。这样可以保证，采样像素永远位于四个相邻像素的中心，而且，两个距离最远的相邻像素的距离一定为halfScaleFloor + halfScaleCeil = _Scale。

然后，我们采样这四个相邻像素的深度值，计算对角的深度差：

float edgeDepth = sqrt(pow(depth0 - depth1, 2) + pow(depth2 - depth3, 2)) * 100;
return edgeDepth;

这里，乘以100是因为采样的深度值都在0~1之间，差值会比较小。效果如下：

如何为物体加上轮廓效果2.png

从图中可以看到，有一些物体的平面仍然被绘制出来，呈现深灰区域，为了将其抹去，我们可以给edgeDepth设定一个阈值，高于阈值才会保留：

如何为物体加上轮廓效果3.png

但是这样又有一个问题，就是一些本来是轮廓的地方也被抹去了。考虑到用一个阈值不太准确，因为离相机越近的物体，深度值越小，越远的物体，深度值越大，而深度值的分布又是不均匀的，这就存在一种情况，就是距离相同的两个物体，离相机越远，实际深度的差值越小（如下图）。因此，有必要将物体本身的深度值考虑进来，即阈值与物体本身的深度值有关，深度越大，阈值越大：

如何为物体加上轮廓效果5.png

float depthThresold = _DepthThresold * depth0;
edgeDepth = edgeDepth > depthThresold ? 1 : 0;

改进后的效果如下：

如何为物体加上轮廓效果4.png

但现在好像又有些矫枉过正，cube的顶面和侧面被当作轮廓绘制出来，楼梯的一部分轮廓被抹去了。这时就需要借助法线了。通过对四个相邻点采样法线，按照深度值类似的方式进行处理，取差值的max：

如何为物体加上轮廓效果6.png

现在就剩下一些平面被当作轮廓绘制了，为了解决这个问题，需要引入视线向量。当视线向量与平面法线的夹角越小时，深度的阈值越低；反之，夹角越大，阈值越高。这样就可以避免剩下一些几乎与视线齐平的平面被当作轮廓绘制。最终的深度阈值是如下的形式：

float depthThresold = _DepthThresold * depth0 * nDotL;

我们对nDotL进行了调制：

float nDotL = 1 - viewDir * viewNormal;
nDotL = saturate((nDotL - _NDotLThresold) / (1 - _NDotLThresold)) * _NDotLScale + _NDotLOffset;

其中，_NDotLOffset是一个初始值，保证最终nDotL的最小值。saturate((nDotL - _NDotLThresold) / (1 - _NDotLThresold))是用来限制nDotL的生效范围，只有大于等于_NDotLThresold阈值的才会生效，并重新映射到 $[0,1]$ 范围内。_NDotLScale是用来控制nDotL影响幅度的值。

如何为物体加上轮廓效果7.png

最后，把物体自身的颜色与轮廓进行混合：

如何为物体加上轮廓效果8.png