用Unity实现景深效果

景深也是一种非常常见的后处理手段，它用来模拟相机拍摄画面的效果。今天我们讨论如何在Unity中实现它。

简单来说，景深效果可以拆分为两个部分，一个部分是聚焦，使画面中指定的区域清晰显示，另一个部分是失焦，使画面中其他区域，即没有对焦的地方，变得模糊。

我们先从相机说起。产生模糊的主要原因是模拟的相机并不是理想的针孔相机。对于针孔相机，相机前的物体只有一条光线会被记录下来，因而图像总是清晰的，但是相应的，一条光线不够明亮，需要足够长的曝光时间来提高图像的亮度。而这个时间段内如果移动场景中的物体，就会导致比较严重的运动模糊。

而模拟的相机是通过增大光圈大小来减少曝光时间的，也就是说相机前的物体会有多条光线被记录下来。这样造成的效果就是，原本物体上的一个点，对应到成像平面是一个圆片区域。区域的大小和物体到光圈的距离，光圈到成像平面的距离有关。自然而然，最后的图像是模糊的了。

为了让光线重新聚焦，这里引入一个透镜的概念。它可以使穿过光圈的光重新汇聚到一个点上，但是只有离相机特定距离的物体才可以被重新聚焦起来。其他距离的物体，要么提前汇聚后又分散了，要么还没来得及汇聚就到达了成像平面上了。最终的结果就是我们想要的，一部分物体清晰，其他的物体模糊。

对于模糊的物体，它投影到成像平面的点变成了圆片状的区域。这种失焦的效果被称之为模糊圈（circle of confusion），如图所示：

我们首先来对这个CoC进行建模。显然，CoC的大小与物体到相机的距离有关，也就是深度d有关。我们还需要设定一个当前聚焦的距离f，和聚焦的范围r，然后有：
$$CoC=\frac{d-f}{r}$$

我们需要把CoC存到一个buffer中，由于CoC是一个值，那么render texture的格式指定为浮点型即可：

		RenderTexture coc = RenderTexture.GetTemporary(
			source.width, source.height, 0,
			RenderTextureFormat.RHalf, RenderTextureReadWrite.Linear
		);

		Graphics.Blit(source, coc, dofMaterial, circleOfConfusionPass);

CoC的值可正可负，不过既然render texture中存储的是浮点数了，就不需要对负值进行处理：

				half FragmentProgram (Interpolators i) : SV_Target {
					float depth = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv);
					depth = LinearEyeDepth(depth);

					float coc = (depth - _FocusDistance) / _FocusRange;
					coc = clamp(coc, -1, 1);
					return coc;
				}

由于只有一个通道，这时候buffer看起来是偏红的，越不在CoC范围内的点，颜色越红；完全处于CoC范围内的点，则颜色为黑色；还有一类的点，它们也不在CoC范围内，但是由于此时CoC的值为负数，体现在颜色上，也是黑色：

接下来，我们来考虑如何把这种模糊虚化的效果做出来。首先它应该是一种模糊，就是要采样周围若干像素作为当前像素的结果；其次它的模糊要有圆的轮廓，也就是说它的采样区域应该是一个半径为R的圆，圆形区域内的点采样的像素是相似的，进而模糊后的结果也是相似的，反映到图像上就是形成了一块圆形的模糊区域：

				half4 FragmentProgram (Interpolators i) : SV_Target {
					half3 color = 0;
					float weight = 0;
					for (int u = -radius; u <= radius; u++) {
						for (int v = -radius; v <= radius; v++) {
							float2 o = float2(u, v);
							if (length(o) <= radius) {
								o *= _MainTex_TexelSize.xy * sparse;
								color += tex2D(_MainTex, i.uv + o).rgb;
								weight += 1;
							}
						}
					}
					color *= 1.0 / weight;
					return half4(color, 1);
				}

这里除了模糊的采样半径以外，还增加了一个稀疏系数。这个参数是用来控制模糊的稀疏程度的。简单来说，就是这个值越大，采样的点越稀疏，也就是圆形区域内只有部分的点模糊之后的结果是相似的，反映到图像上就是一个不那么连续光滑，而是比较锐利的圆形区域了。

这样说太抽象了，让我们来看一下实际的效果，首先是固定sparse参数为1，调节radius参数从0变换到10：

再看一下固定radius参数为10，调节sparse参数从1变换到10的效果：

我们还可以调整圆形所覆盖的区域，例如它可以是个圆盘区域，我们只对圆盘区域上的点进行采样：

static const int kernelSampleCount = 16;
static const float2 kernel[kernelSampleCount] = {
    float2(0, 0),
    float2(0.54545456, 0),
    float2(0.16855472, 0.5187581),
    float2(-0.44128203, 0.3206101),
    float2(-0.44128197, -0.3206102),
    float2(0.1685548, -0.5187581),
    float2(1, 0),
    float2(0.809017, 0.58778524),
    float2(0.30901697, 0.95105654),
    float2(-0.30901703, 0.9510565),
    float2(-0.80901706, 0.5877852),
    float2(-1, 0),
    float2(-0.80901694, -0.58778536),
    float2(-0.30901664, -0.9510566),
    float2(0.30901712, -0.9510565),
    float2(0.80901694, -0.5877853),
};
    
half4 FragmentProgram (Interpolators i) : SV_Target {
    half3 color = 0;
    for (int k = 0; k < kernelSampleCount; k++) {
        float2 o = kernel[k];
        o *= _MainTex_TexelSize.xy * radius;
        color += tex2D(_MainTex, i.uv + o).rgb;
    }
    color *= 1.0 / kernelSampleCount;
    return half4(color, 1);
}

这里用到的一堆魔数，可视化如下：

显而易见采样点连成的形状是一个圆盘。使用这套参数，我们还可以将采样半径和稀疏系数统一为一个半径参数，这是因为半径越大，圆盘区域越大，采样点之间的距离也越大，进而采样越稀疏。

来看一下不同半径下的效果：

使用圆盘区域的效果看上去更加梦幻了。不过，在采样半径变大的同时，我们能够很明显地发现采样点之间的间隙，为了消除它，我们准备在这后面再套一层模糊。这次是真的模糊，使用3x3的tent filter：

				half4 FragmentProgram (Interpolators i) : SV_Target {
					float4 o =
						_MainTex_TexelSize.xyxy * float2(-0.5, 0.5).xxyy;
					half4 s =
						tex2D(_MainTex, i.uv + o.xy) +
						tex2D(_MainTex, i.uv + o.zy) +
						tex2D(_MainTex, i.uv + o.xw) +
						tex2D(_MainTex, i.uv + o.zw);
					return s * 0.25;
				}

来看下模糊后的效果，这时候的模糊圈虚虚实实，叠加在了一起：

下一步，我们来考虑如何实现聚焦的效果。首先，不是所有的地方都需要虚化的，聚焦的地方应该是清晰的，这里的模糊圈应该要去掉。我们可以使用之前建模的CoC来辅助判断。CoC越小，说明当前点离聚焦范围越近，它就不可能很模糊，也就是距离它很远的采样点（例如圆盘中外围的点）在模糊过程中要被过滤掉：

				half4 FragmentProgram (Interpolators i) : SV_Target {
					half3 color = 0;
					half weight = 0;
					for (int k = 0; k < kernelSampleCount; k++) {
						float2 o = kernel[k] * _BokehRadius;
						half radius = length(o);
						o *= _MainTex_TexelSize.xy;
						half coc = tex2D(_CoCTex, i.uv + o).r * radius;
						if(abs(coc) >= radius)
						{
							color += tex2D(_MainTex, i.uv + o).rgb;
							weight += 1;
						}
					}
					color *= 1.0 / weight;
					return half4(color, 1);
				}

顺便看看不同聚焦范围下的效果：

过滤的过程可以做得更加平滑，我们引入权重的概念，越处于过滤边缘的采样点所占权重越低：

				half Weigh (half coc, half radius) {
					return saturate((abs(coc) - radius + 2) / 2);
				}

				half4 FragmentProgram (Interpolators i) : SV_Target {
					half3 color = 0;
					half weight = 0;
					for (int k = 0; k < kernelSampleCount; k++) {
						float2 o = kernel[k] * _BokehRadius;
						half radius = length(o);
						o *= _MainTex_TexelSize.xy;
						half coc = tex2D(_CoCTex, i.uv + o).r * _BokehRadius;
						half3 rgb = tex2D(_MainTex, i.uv + o).rgb;
						half sw = Weigh(coc, radius);
						color += rgb * sw;
						weight += sw;
					}
					color *= 1.0 / weight;
					return half4(color, 1);
				}

来对比一下：

由于我们之前在生成模糊圈时，对整个render texture是做了模糊处理的，而聚焦的地方是不需要模糊的，需要借助最原始的render texture，做一个blend，当CoC的值越大，模糊render texture的权重越高；反之，原始render texture的权重越高：

				half4 FragmentProgram (Interpolators i) : SV_Target {
					half4 source = tex2D(_MainTex, i.uv);
					half coc = tex2D(_CoCTex, i.uv).r;
					half4 dof = tex2D(_DoFTex, i.uv);

					half dofStrength = smoothstep(0.1, 1, abs(coc));
					half3 color = lerp(source.rgb, dof.rgb, dofStrength);
					return half4(color, source.a );
				}

看上去效果不错，不过出现了一个问题，右下角的cube，有一个角变清晰了，显得很不自然。原因肯定是出在这个blend上了，我们在把coc代入计算时使用了绝对值，这就可能出现，本来聚焦的地方在后面，但前面有部分像素也算在了聚焦范围内了。因此，我们有必要把前景颜色和背景颜色分开计算，前景的coc是负值，而背景的coc是正值。

我们首先对模糊圈进行处理，分别计算前景和背景之后，以一个权重的方式进行融合：

				half4 FragmentProgram (Interpolators i) : SV_Target {
					half3 bgColor = 0, fgColor = 0;
					half bgWeight = 0, fgWeight = 0;
					for (int k = 0; k < kernelSampleCount; k++) {
						float2 o = kernel[k] * _BokehRadius;
						half radius = length(o);
						o *= _MainTex_TexelSize.xy;
						half coc = tex2D(_CoCTex, i.uv + o).r * _BokehRadius;
						half3 rgb = tex2D(_MainTex, i.uv + o).rgb;

						half bgw = Weigh(max(0, coc), radius);
						bgColor += rgb * bgw;
						bgWeight += bgw;

						half fgw = Weigh(-coc, radius);
						fgColor += rgb * fgw;
						fgWeight += fgw;
					}
					bgColor *= 1.0 / (bgWeight + (bgWeight == 0));
					fgColor *= 1.0 / (fgWeight + (fgWeight == 0));
					half bgfg = min(1, fgWeight * _ForegroundScale);
					half3 color = lerp(bgColor, fgColor, bgfg);
					return half4(color, bgfg);
				}

这里_ForegroundScale参数是用来灵活调节前景模糊程度的，考虑极端情况，如果参数的值为0，说明前景不参与模糊圈的计算，即前景也是清晰的；反正如果值为1，则前景和背景一样模糊。来看一下这个参数从0到1的变化效果：

看起来，和source render texture的融合效果还是不太对。这也难怪，毕竟我们现在还是只用的abs(coc)作为融合的权重。现在，还要把前景和背景的融合参数也考虑进来：

				half4 FragmentProgram (Interpolators i) : SV_Target {
					half4 source = tex2D(_MainTex, i.uv);
					half coc = tex2D(_CoCTex, i.uv).r;
					half4 dof = tex2D(_DoFTex, i.uv);

					half bgfg = dof.a;
					half dofStrength = smoothstep(0.1, 1, abs(coc));
					half3 color = lerp(source.rgb, dof.rgb, 
					dofStrength + bgfg - dofStrength * bgfg);
					return half4(color, source.a );
				}

这里最终的融合参数为dofStrength + bgfg - dofStrength * bgfg，推导起来其实很简单，就是source和dof融合两次，一次使用dofStrength ，另一次使用bgfg作为参数：
$$\begin{gathered} c=a+(b-a)\cdot x \\ d=c+(b-c)\cdot y \\ d=a+bx-ax+(b-a-bx+ax)y \\ d=a+(b-a)(x+y-xy) \end{gathered}$$
来看一下最终的效果，依旧是调节前景的融合系数_ForegroundScale从0到1：

看上去还不错。自此我们可以自由地调节前景的模糊程度，聚焦的距离与范围，还有模糊的半径了。最后是一张静态效果：

如果你觉得我的文章有帮助，欢迎关注我的微信公众号：我是真的想做游戏啊

Reference

[1] Depth of Field