第13章 使用深度和法线纹理
在第12 章中，我们学习的屏幕后处理效果都只是在屏幕颜色图像上进行各种操作来实现的。然而，很多时候我们不仅需要当前屏幕的颜色信息，还希望得到深度和法线信息。例如，在进行边缘检测时，直接利用颜色信息会使检测到的边缘信息受物体纹理和光照等外部因素的影响，得到很多我们不需要的边缘点。一种更好的方法是，我们可以在深度纹理和法线纹理上进行边缘检测，这些图像不会受纹理和光照的影响，而仅仅保存了当前渲染物体的模型信息，通过这样的方式检测出来的边缘更加可靠。
在本章中，我们将学习如何在Unity 中获取深度纹理和法线纹理来实现特定的屏幕后处理效果。
在13.1 节中，我们首先会学习如何在Unity 中获取这两种纹理。
在13.2 节中，我们会利用深度纹理来计算摄像机的移动速度，实现摄像机的运动模糊效果。
在13.3 节中，我们会学习如何利用深度纹理来重建屏幕像素在世界空间中的位置，从而模拟屏幕雾效。
13.4 节会再次学习边缘检测的另一种实现，即利用深度和法线纹理进行边缘检测。
13.1 获取深度和法线纹理
虽然在Unity 里获取深度和法线纹理的代码非常简单，但是我们有必要在这之前首先了解它们背后的实现原理。
13.1.1 背后的原理
深度纹理实际就是一张渲染纹理，只不过它里面存储的像素值不是颜色值，而是一个高精度的深度值。由于被存储在一张纹理中，深度纹理里的深度值范围是［0, 1］，而且通常是非线性分布的。那么，这些深度值是从哪里得到的呢？要回答这个问题，我们需要回顾在第4 章学过的顶点变换的过程。总体来说，这些深度值来自于顶点变换后得到的归一化的设备坐标（ Normalized Device Coordinates , NDC ）。回顾一下，一个模型要想最终被绘制在屏幕上，需要把它的顶点从模型空间变换到齐次裁剪坐标系下，这是通过在顶点着色器中乘以MVP 变换矩阵得到的。在变换的最后一步，我们需要使用一个投影矩阵来变换顶点，当我们使用的是透视投影类型的摄像机时，这个投影矩阵就是非线性的，具体过程可回顾4.6.7 小节。
图13.2 显示了在使用正交摄像机时投影变换的过程。同样，变换后会得到一个范围为［-1， 1] 的立方体。正交投影使用的变换矩阵是线性的。
在得到NDC 后，深度纹理中的像素值就可以很方便地计算得到了，这些深度值就对应了NDC 中顶点坐标的z 分量的值。由于NDC 中z 分量的范围在［-1, 1］，为了让这些值能够存储在一张图像中，我们需要使用下面的公式对其进行映射：
其中， d 对应了深度纹理中的像素值， Zndc 对应了NDC 坐标中的z 分量的值。
那么Unity 是怎么得到这样一张深度纹理的呢？在Unity 中，深度纹理可以直接来自于真正的深度缓存，也可以是由一个单独的Pass 渲染而得，这取决于使用的渲染路径和硬件。通常来讲，当使用延迟渲染路径（包括遗留的延迟渲染路径）时，深度纹理理所当然可以访问到，因为延迟渲染会把这些信息渲染到G-buffer 中。而当无法直接获取深度缓存时，深度和法线纹理是通过一个单独的Pass 渲染而得的。具体实现是， Unity 会使用着色器替换（ Shader Replacement ）技术选择那些渲染类型〈即SubShader 的RenderType 标签）为Opaque 的物体，判断它们使用的渲染队列是否小于等于2 500 （内置的Background 、Geometry 和AlphaTest 渲染队列均在此范围内），如果满足条件，就把它渲染到深度和法线纹理中。因此，要想让物体能够出现在深度和法线纹理中，就必须在Shader 中设置正确的RenderType 标签。
在Unity 中，我们可以选择让一个摄像机生成一张深度纹理或是一张深度＋法线纹理。当选择前者，即只需要一张单独的深度纹理时， Unity 会直接获取深度缓存或是按之前讲到的着色器替换技术，选取需要的不透明物体，并使用它投射阴影时使用的Pass （即LightMode 被设置为ShadowCaster 的Pass，详见9.4 节）来得到深度纹理。如果Shader 中不包含这样一个Pass，那么这个物体就不会出现在深度纹理中（当然，它也不能向其他物体投射阴影）。深度纹理的精度通常是24 位或16 位，这取决于使用的深度缓存的精度。如果选择生成一张深度＋法线纹理， Unity 会创建一张和屏幕分辨率相同、精度为32 位〈每个通道为8 位）的纹理，其中观察空间下的法线信息会被编码进纹理的R 和G 通道，而深度信息会被编码进B 和A 通道。法线信息的获取在延迟渲染中是可以非常容易就得到的， Unity 只需要合并深度和法线缓存即可。而在前向渲染中，默认情况下是不会创建法线缓存的，因此Unity 底层使用了一个单独的Pass 把整个场景再次渲染一遍来完成。这个Pass 被包含在Unity 内置的一个Unity Shader 中，我们可以在内置的
builtin_shaders-xxx/DefaultResources/Camera-DepthNormalTexture.shader 文件中找到这个用于渲染深度和法线信息的Pass。
那么Unity 是怎么得到这样一张深度纹理的呢？在Unity 中，深度纹理可以直接来自于真正的深度缓存，也可以是由一个单独的Pass 渲染而得，这取决于使用的渲染路径和硬件。通常来讲，当使用延迟渲染路径（包括遗留的延迟渲染路径）时，深度纹理理所当然可以访问到，因为延迟渲染会把这些信息渲染到G-buffer 中。而当无法直接获取深度缓存时，深度和法线纹理是通过一个单独的Pass 渲染而得的。具体实现是， Unity 会使用着色器替换（ Shader Replacement ）技术选择那些渲染类型〈即SubShader 的RenderType 标签）为Opaque 的物体，判断它们使用的渲染队列是否小于等于2 500 （内置的Background 、Geometry 和AlphaTest 渲染队列均在此范围内），如果满足条件，就把它渲染到深度和法线纹理中。因此，要想让物体能够出现在深度和法线纹理中，就必须在Shader 中设置正确的RenderType 标签。
在Unity 中，我们可以选择让一个摄像机生成一张深度纹理或是一张深度＋法线纹理。当选择前者，即只需要一张单独的深度纹理时， Unity 会直接获取深度缓存或是按之前讲到的着色器替换技术，选取需要的不透明物体，并使用它投射阴影时使用的Pass （即LightMode 被设置为ShadowCaster 的Pass，详见9.4 节）来得到深度纹理。如果Shader 中不包含这样一个Pass，那么这个物体就不会出现在深度纹理中（当然，它也不能向其他物体投射阴影）。深度纹理的精度通常是24 位或16 位，这取决于使用的深度缓存的精度。如果选择生成一张深度＋法线纹理， Unity 会创建一张和屏幕分辨率相同、精度为32 位〈每个通道为8 位）的纹理，其中观察空间下的法线信息会被编码进纹理的R 和G 通道，而深度信息会被编码进B 和A 通道。法线信息的获取在延迟渲染中是可以非常容易就得到的， Unity 只需要合并深度和法线缓存即可。而在前向渲染中，默认情况下是不会创建法线缓存的，因此Unity 底层使用了一个单独的Pass 把整个场景再次渲染一遍来完成。这个Pass 被包含在Unity 内置的一个Unity Shader 中，我们可以在内置的
builtin_shaders-xxx/DefaultResources/Camera-DepthNormalTexture.shader 文件中找到这个用于渲染深度和法线信息的Pass。
13.1.2 如何获取
在Unity 中，获取深度纹理是非常简单的，我们只需要告诉Unity：“嘿，把深度纹理给我！”然后再在Shader 中直接访问特定的纹理属性即可。这个与Unity 沟通的过程是通过在脚本中设置摄像机的depthTextureMode 来完成的，例如我们可以通过下面的代码来获取深度纹理：
camera.depthTextureMode = DepthTextureMode.Depth;
同理，如果想要获取深度＋法线纹理，我们只需要在代码中这样设置：
camera.depthTextureMode = DepthTextureMode.DepthNormals;
我们还可以组合这些模式，让一个摄像机同时产生一张深度和深度＋法线纹理：
在Unity 5 中，我们还可以在摄像机的Camera 组件上看到当前摄像机是否需要渲染深度或深度＋法线纹理。当在Shader 中访问到深度纹理 _CameraDepthTexture 后，我们就可以使用当前像素的纹理坐标对它进行采样。绝大多数情况下，我们直接使用tex2D 函数采样即可，但在某些平台（例如PS3 和PSP2 ）上，我们需要一些特殊处理。Unity 为我们提供了一个统一的宏
SAMPLE_DEPTH_TEXTURE，用来处理这些由于平台差异造成的问题。而我们只需要在Shader中使用
SAMPLE_DEPTH_TEXTURE 宏对深度纹理进行采样，例如：
float d = SAMPLE_DEPTH_TEXTURE(_CarneraDepthTexture, i.uv);
SAMPLE_DEPTH_TEXTURE_LOD。 SAMPLE_DEPTH_TEXTURE_PROJ 宏同样接受两个参数一一深度纹理和一个float3 或float4 类型的纹理坐标，它的内部使用了tex2Dproj 这样的函数进行投影纹理采样，纹理坐标的前两个分量首先会除以最后一个分量，再进行纹理采样。如果提供了第四个分量，还会进行一次比较，通常用于阴影的实现中。SAMPLE_DEPTH_TEXTURE PROJ 的第二个参数通常是由顶点着色器输出插值而得的屏幕坐标，例如：
float d = SAMPLE_DEPTH_TEXTURE_PROJ(_CarneraDepthTexture, UNITY_PROJ_COORD(i.scrPos));
当通过纹理采样得到深度值后，这些深度值往往是非线性的，这种非线性来自于透视投影使用的裁剪矩阵。然而，在我们的计算过程中通常是需要线性的深度值，也就是说，我们需要把投影后的深度值变换到线性空间下，例如视角空间下的深度值。那么，我们应该如何进行这个转换呢？实际上，我们只需要倒推顶点变换的过程即可。下面我们以透视投影为例，推导如何由深度纹理中的深度信息计算得到视角空间下的深度值。
幸运的是， Unity 提供了两个辅助函数来为我们进行上述的计算过程一一LinearEyeDepth 和 Linear01Depth。 LinearEyeDepth 负责把深度纹理的采样结果转换到视角空间下的深度值，也就是我们上面得到的Zview。而Linear01Depth 则会返回一个范围在[0, 1］的线性深度值，也就是我们上面得到的Z 01 。这两个函数内部使用了内置的 _ZBufferParams 变量来得到远近裁剪平面的距离。
如果我们需要获取深度＋法线纹理，可以直接使用tex2D 函数对 _CameraDepthNormalsTexture 进行采样，得到里面存储的深度和法线信息。Unity 提供了辅助函数来为我们对这个采样结果进行解码，从而得到深度值和法线方向。这个函数DecodeDepthNorrnal, 它在UnityCG.cginc 里被定义：
-
inline void DecodeDepthNormal( float4 enc, out float depth, out float3 normal)
-
{
-
depth = DecodeFloatRG (enc.zw);
-
normal= DecodeViewNormalStereo(enc);
-
}
至此，我们已经学会了如何在Unity 里获取及使用深度和法线纹理。下面， 我们会学习如何使用它们实现各种屏幕特效。
13.1.3 查看深度和法线纹理
很多时候， 我们希望可以查看生成的深度和法线纹理，以便对Shader 进行调试。Unity 5 提供了一个方便的方法来查看摄像机生成的深度和法线纹理， 这个方法就是利用帧调试器（ Frame Debugger）。图13.3 显示了使用帧调试器查看到的深度纹理和深度＋法线纹理。
-
float depth= SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv);
-
float linearDepth = LinearOlDepth(depth);
-
return fixed4(linearDepth, linearDepth, linearDepth,
1.0);
-
fixed3 normal = DecodeViewNormalStereo(tex2D( _CameraDepthNormalsTexture, i.uv).xy);
-
return fixed4 (normal *
0.5 +
0.5,
1.0);
13.2 再谈运动模糊
在12.6 节中，我们学习了如何通过混合多张屏幕图像来模拟运动模糊的效果。但是，另一种应用更加广泛的技术则是使用速度映射图。速度映射图中存储了每个像素的速度，然后使用这个速度来决定模糊的方向和大小。速度缓冲的生成有多种方法，一种方法是把场景中所有物体的速度渲染到一张纹理中。但这种方法的缺点在于需要修改场景中所有物体的Shader 代码，使其添加计算速度的代码并输出到一个渲染纹理中。《GPU Gems3》在第27 章（http:http.developer.nvidia.com/GPUGems3/gpugems3_ch27.html) 中介绍了一种生成速度映射图的方法。这种方法利用深度纹理在片元着色器中为每个像素计算其在世界空间下的位置，这是通过使用当前的视角＊投影矩阵的逆矩阵对NDC 下的顶点坐标进行变换得到的。当得到世界空间中的顶点坐标后，我们使用前一帧的视角＊投影矩阵对其进行变换，得到该位置在前一帧中的NDC 坐标。然后，我们计算前一帧和当前帧的位置差，生成该像素的速度。这种方法的优点是可以在一个屏幕后处理步骤中完成整个效果的模拟，但缺点是需要在片元着色器中进行两次矩阵乘法的操作，对性能有所影响。
为了使用深度纹理模拟运动模糊，我们需要进行如下准备工作。
( 1）新建一个场景。在本书资源中， 该场景名为Scene_13_2 。在Unity 5.2 中，默认情况下场景将包含一个摄像机和一个平行光，并且使用了内置的天空盒子。在Window → Lighting → Skybox 中去掉场景中的天空盒子。
( 2 ） 我们需要搭建一个测试运动模糊的场景。在本书资源的实现中，我们构建了一个包含3 面墙的房间，并放置了4 个立方体，它们都使用了我们在9.5 节中创建的标准材质。同时， 我们把本书资源中的Translating.cs 脚本拖曳给摄像机，让其在场景中不断运动。
(3）新建一个脚本。在本书资源中，该脚本名为MotionBlurWithDepthTexture.cs。把该脚本拖曳到摄像机上。
( 4 ）新建一个Unity Shader。在本书资源中， 该Shader 名为Chapter13-MotionBlurWithDepthTexture。
我们首先来编写MotionBlurWithDepthTexture.cs 脚本。打开该脚本，并进行如下修改。
（1）首先， 继承12.1 节中创建的基类：
public class MotionBlurWithDepthTexture : PostEffectsBase {
-
public Shader motionBlurShader;
-
private Material motionBlurMaterial = null;
-
-
public Material material {
-
get {
-
motionBlurMaterial = CheckShaderAndCreateMaterial(motionBlurShader, motionBlurMaterial);
-
return motionBlurMaterial;
-
}
-
}
-
[Range(
0.0f,
1.0f)]
-
public
float blurSize =
0.5f;
-
private Camera myCamera;
-
public Camera camera {
-
get {
-
if (myCamera == null) {
-
myCamera = GetComponent
();
-
}
-
return myCamera;
-
}
-
}
private Matrix4x4 previousViewProjectionMatrix;
-
void OnEnable() {
-
camera.depthTextureMode |= DepthTextureMode.Depth;
-
void OnRenderImage (RenderTexture src, RenderTexture dest) {
-
if (material != null) {
-
material.SetFloat(
"_BlurSize", blurSize);
-
-
material.SetMatrix(
"_PreviousViewProjectionMatrix", previousViewProjectionMatrix);
-
Matrix4x4 currentViewProjectionMatrix = camera.projectionMatrix * camera.worldToCameraMatrix;
-
Matrix4x4 currentViewProjectionInverseMatrix = currentViewProjectionMatrix.inverse;
-
material.SetMatrix(
"_CurrentViewProjectionInverseMatrix", currentViewProjectionInverseMatrix);
-
previousViewProjectionMatrix = currentViewProjectionMatrix;
-
-
Graphics.Blit (src, dest, material);
-
}
else {
-
Graphics.Blit(src, dest);
-
}
-
}
_PreviousViewProjectionMatrix 属性。
下面， 我们来实现Shader 的部分。打开Chapter13-MotionBiurWithDepthTexture，进行如下修改。
下面， 我们来实现Shader 的部分。打开Chapter13-MotionBiurWithDepthTexture，进行如下修改。
( 1）我们首先需要声明本例使用的各个属性：
-
Properties {
-
_MainTex (
"Base (RGB)",
2D) =
"white" {}
-
_BlurSize (
"Blur Size", Float) =
1.0
-
}
_PreviousViewProjectionMatrix 和 _CurrentViewProjectionInverseMatrix 属性，但并没有在Properties 块中声明它们。这是因为Unity 没有提供矩阵类型的属性， 但我们仍然可以在CG 代码块中定义这些矩阵， 并从脚本中设置它们。
( 2 ）在本节中， 我们使用CGINCLUDE 来组织代码。我们在SubShader 块中利用CGINCLUDE 和 ENDCG 语义来定义一系列代码：
( 2 ）在本节中， 我们使用CGINCLUDE 来组织代码。我们在SubShader 块中利用CGINCLUDE 和 ENDCG 语义来定义一系列代码：
(3）声明代码中需要使用的各个变量：
在上面的代码中， 除了定义在Propertity声明的 _MainTex 和 _BlurSize 属性， 我们还声明了其他三个变量。_CameraDepthTexture 是Unity 传递给我们的深度纹理，而 _CurrentViewProjectionlnverseMatrix 和 _PreviousViewProjectionMatrix 是由脚本传递而来的矩阵。除此之外，我们还声明了 _MainTex_TexelSize 变量，它对应了主纹理的纹素大小，我们需要使用该变量来对深度纹理的采
样坐标进行平台差异化处理（详见5.6.1 节〉。
( 4 ）顶点着色器的代码和之前使用多次的代码基本一致，只是增加了专门用于对深度纹理采样的纹理坐标变量：
-
struct v2f {
-
float4 pos : SV_POSITION;
-
half2 uv : TEXCOORD0;
-
half2 uv_depth : TEXCOORD1;
-
};
-
-
v2f vert(appdata_img v) {
-
v2f o;
-
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
-
-
o.uv = v.texcoord;
-
o.uv_depth = v.texcoord;
-
-
#if UNITY_UV_STARTS_AT_TOP
-
if (_MainTex_TexelSize.y <
0)
-
o.uv_depth.y =
1 - o.uv_depth.y;
-
#endif
-
-
return o;
-
}
( 5 ）片元着色器是算法的重点所在：
-
fixed4 frag(v2f i) : SV_Target {
-
// Get the depth buffer value at this pixel.
-
float d = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth);
-
// H is the viewport position at this pixel in the range -1 to 1.
-
float4 H = float4(i.uv.x *
2 -
1, i.uv.y *
2 -
1, d *
2 -
1,
1);
-
// Transform by the view-projection inverse.
-
float4 D = mul(_CurrentViewProjectionInverseMatrix, H);
-
// Divide by w to get the world position.
-
float4 worldPos = D / D.w;
-
-
// Current viewport position
-
float4 currentPos = H;
-
// Use the world position, and transform by the previous view-projection matrix.
-
float4 previousPos = mul(_PreviousViewProjectionMatrix, worldPos);
-
// Convert to nonhomogeneous points [-1,1] by dividing by w.
-
previousPos /= previousPos.w;
-
-
// Use this frame's position and last frame's to compute the pixel velocity.
-
float2 velocity = (currentPos.xy - previousPos.xy)/
2.0f;
-
-
float2 uv = i.uv;
-
float4 c = tex2D(_MainTex, uv);
-
uv += velocity * _BlurSize;
-
for (
int it =
1; it <
3; it++, uv += velocity * _BlurSize) {
-
float4 currentColor = tex2D(_MainTex, uv);
-
c += currentColor;
-
}
-
c /=
3;
-
-
return fixed4(c.rgb,
1.0);
-
}
[ -1, 1] ）。当得到NDC 下的坐标H 后，我们就可以使用当前帧的视角＊投影矩阵的逆矩阵对其进行变换，并把结果值除以它的w 分量来得到世界空间下的坐标表示worldPos。
一旦得到了世界空间下的坐标，我们就可以使用前一帧的视角＊投影矩阵对它进行变换， 得到前一帧在NDC 下的坐 previousPos。然后，我们计算前一帧和当前帧在屏幕空间下的位置差，得到该像素的速度velocity 。
当得到该像素的速度后，我们就可以使用该速度值对它的邻域像素进行采样，相加后取平均值得到一个模糊的效果。采样时我们还使用了 _BlurSize 来控制采样距离。
( 6 ）然后，我们定义了运动模糊所需的Pass:
一旦得到了世界空间下的坐标，我们就可以使用前一帧的视角＊投影矩阵对它进行变换， 得到前一帧在NDC 下的坐 previousPos。然后，我们计算前一帧和当前帧在屏幕空间下的位置差，得到该像素的速度velocity 。
当得到该像素的速度后，我们就可以使用该速度值对它的邻域像素进行采样，相加后取平均值得到一个模糊的效果。采样时我们还使用了 _BlurSize 来控制采样距离。
( 6 ）然后，我们定义了运动模糊所需的Pass:
-
Pass {
-
ZTest Always Cull Off ZWrite Off
-
-
CGPROGRAM
-
-
#pragma vertex vert
-
#pragma fragment frag
-
-
ENDCG
-
}
FallBack Off
本节实现的运动模糊适用于场景静止、摄像机快速运动的情况，这是因为我们在计算时只考虑了摄像机的运动。因此，如果读在把本节中的代码应用到一个物体快速运动而摄像机静止的场景，会发现不会产生任何运动模糊效果。如果我们想要对快速移动的物体产生运动模糊的效果，就需要生成更加精确的速度映射图。读者可以在Unity 自带的lmageEffect 包中找到更多的运动模糊的实现方法。
本节选择在片元着色器中使用逆矩阵来重建每个像素在世界空间下的位置。但是，这种做法往往会影响性能，在13.3 节中，我们会介绍一种更快速的由深度纹理重建世界坐标的方法。
13.3 全局雾效
雾效（Fog ）是游戏里经常使用的一种效果。Unity 内置的雾效可以产生基于距离的线性或指数雾效。然而，要想在自己编写的顶点／片元着色器中实现这些雾效，我们需要在Shader 中添加 #pragma multi_compile_fog 指令，同时还需要使用相关的内置宏，例如UNITY_FOG_COORDS, UNITY_TRANSFER_FOG 和 UNITY_APPLY_FOG 等。这种方法的缺点在于，我们不仅需要为场景中所有物体添加相关的渲染代码，而且能够实现的效果也非常有限。当我们需要对雾效进行一些个性化操作时，例如使用基于高度的雾效等，仅仅使用Unity 内置的雾效就变得不再可行。在本节中，我们将会学习一种基于屏幕后处理的全局雾效的实现。使用这种方法，我们不需要更改场景内渲染的物体所使用的Shader代码，而仅仅依靠一次屏幕后处理的步骤即可。这种方法的自由性很高，我们可以方便地模拟各种雾效，例如均匀的雾效、基于距离的线性／指数雾效、基于高度的雾效等。在学习完本节后，我们可以得到类似图13.5 中的效果。
基于屏幕后处理的全局第效的关键是，根据深度纹理来重建每个像素在世界空间下的位置。尽管在13.2 节中，我们在模拟运动模糊时已经实现了这个要求，即构建出当前像素的NDC 坐标，再通过当前摄像机的视角＊投影矩阵的逆矩阵来得到世界空间下的像索坐标，但是，这样的实现需要在片元着色器中进行矩阵乘法的操作，而这通常会影响游戏性能。在本节中，我们将会学习一个快速从深度纹理中重建世界坐标的方法。这种方法首先对图像空间下的视锥体射线（从摄像机出发，指向图像上的某点的射线〉进行插值，这条射线存储了该像素在世界空间下到摄像机的方向信息。然后，我们把该射线和线性化后的视角空间下的深度值相乘，再加上摄像机的世界位置，就可以得到该像素在世界空间下的位置。当我们得到世界坐标后，就可以轻松地使用各个公式来模拟全局雾效了。
13.3.1 重建世界坐标
在开始动手写代码之前，我们首先来了解如何从深度纹理中重建世界坐标。我们知道，坐标系中的一个顶点坐标可以通过它相对于另一个顶点坐标的偏移量来求得。重建像素的世界坐标也是基于这样的思想。我们只需要知道摄像机在世界空间下的位置，以及世界空间下该像素相对于摄像机的偏移量，把它们相加就可以得到该像素的世界坐标。整个过程可以使用下面的代码来表示：
其中， _WorldSpaceCameraPos 是摄像机在世界空间下的位置，这可以由Unity 的内置变量直接访问得到。而
linearDepth * interpolatedRay 则可以计算得到该像素相对于摄像机的偏移量， linearDepth 是由深度纹理得到的线性深度值， interpolatedRay 是由顶点着色器输出并插值后得到的射线，它不仅包含了该像素到摄像机的方向，也包含了距离信息。linearDepth 的获取我们己经在13.1.2 节中详细解释过了，因此，本节着重解释 interpolatedRay 的求法。
interpolatedRay 来源于对近裁剪平面的4 个角的某个特定向量的插值，这4 个向量包含了它们到摄像机的方向和距离信息，我们可以利用摄像机的近裁剪平面距离、FOV、横纵比计算而得。图13.6显示了计算时使用的一些辅助向量。为了方便计算，我们可以先计算两个向量——toTop 和 toRight, 它们是起点位于近裁剪平面中心、分别指向摄像机正上方和正右方的向量。它们的计算公式如下：
interpolatedRay 来源于对近裁剪平面的4 个角的某个特定向量的插值，这4 个向量包含了它们到摄像机的方向和距离信息，我们可以利用摄像机的近裁剪平面距离、FOV、横纵比计算而得。图13.6显示了计算时使用的一些辅助向量。为了方便计算，我们可以先计算两个向量——toTop 和 toRight, 它们是起点位于近裁剪平面中心、分别指向摄像机正上方和正右方的向量。它们的计算公式如下：
注意，上面求得的4 个向量不仅包含了方向信息，它们的模对应了4 个点到摄像机的空间距离。由于我们得到的线性深度值并非是点到摄像机的欧式距离，而是在z 方向上的距离，因此，我们不能直接使用深度值和4 个角的单位方向的乘积来计算它们到摄像机的偏移量，如图13.7 所示。想要把深度值转换成到摄像机的欧式距离也很简单，我们以TL 点为例，根据相似三角形原理， TL 所在的射线上，像素的深度值和它到摄像机的实际距离的比等于近裁剪平面的距离和TL向量的模的比，即
屏幕后处理的原理是使用特定的材质去渲染一个刚好填充整个屏幕的四边形面片。这个四边形面片的4 个顶点就对应了近裁剪平面的4 个角。因此，我们可以把上面的计算结果传递给顶点着色器，顶点着色器根据当前的位置选择它所对应的向量，然后再将其输出，经插值后传递给片元着色器得到interpoIatedRay，我们就可以直接利用本节一开始提到的公式重建该像素在世界空间下的位置了。
13.3.2 雾的计算
在简单的雾效实现中，我们需要计算一个雾效系数 f，作为混合原始颜色和雾的颜色的混合系数：
13.3.3 实现
为了在Unity 中实现基于屏幕后处理的雾效，我们需要进行如下准备工作。
(1）新建一个场景。在本书资源中，该场景名为Scene_13_3 。在Unity 5.2 中，默认情况下场景将包含一个摄像机和一个平行光，并且使用了内置的天空盒子。在Window -> Lighting -> Skybox 中去掉场景中的天空盒子。
(2）我们需要搭建一个测试雾效的场景。在本书资源的实现中，我们构建了一个包含3 面墙的房间，并放置了两个立方体和两个球体，它们都使用了我们在9.5 节中创建的标准材质。同时，我们把本书资源中的Translating.cs 脚本拖曳给摄像机，让其在场景中不断运动。
(3）新建一个脚本。在本书资源中，该脚本名为FogWithDepthTexture.cs . 把该脚本拖曳到摄像机上。
(4）新建－个Unity Shader。在本书资源中，该Shader 名为Chapterl3-FogWithDepthTexture 。
我们首先来编写FogWithDepthTexture.cs 脚本。打开该脚本，并进行如下修改。
(1）首先，继承12.1 节中创建的基类：
(2）我们需要搭建一个测试雾效的场景。在本书资源的实现中，我们构建了一个包含3 面墙的房间，并放置了两个立方体和两个球体，它们都使用了我们在9.5 节中创建的标准材质。同时，我们把本书资源中的Translating.cs 脚本拖曳给摄像机，让其在场景中不断运动。
(3）新建一个脚本。在本书资源中，该脚本名为FogWithDepthTexture.cs . 把该脚本拖曳到摄像机上。
(4）新建－个Unity Shader。在本书资源中，该Shader 名为Chapterl3-FogWithDepthTexture 。
我们首先来编写FogWithDepthTexture.cs 脚本。打开该脚本，并进行如下修改。
(1）首先，继承12.1 节中创建的基类：
public class FogWithDepthTexture : PostEffectsBase {
-
public Shader fogShader;
-
private Material fogMaterial = null;
-
-
public Material material {
-
get {
-
fogMaterial = CheckShaderAndCreateMaterial(fogShader, fogMaterial);
-
return fogMaterial;
-
}
-
}
-
private Camera myCamera;
-
public Camera camera {
-
get {
-
if (myCamera == null) {
-
myCamera = GetComponent
();
-
}
-
return myCamera;
-
}
-
}
-
-
private Transform myCameraTransform;
-
public Transform cameraTransform {
-
get {
-
if (myCameraTransform == null) {
-
myCameraTransform = camera.transform;
-
}
-
-
return myCameraTransform;
-
}
-
}
-
[Range(
0.0f,
3.0f)]
-
public
float fogDensity =
1.0f;
-
-
public Color fogColor = Color.white;
-
-
public
float fogStart =
0.0f;
-
public
float fogEnd =
2.0f;
( 5 ）由于本例需要获取摄像机的深度纹理，我们在脚本的OnEnable 函数中设置摄像机的相应状态：
-
void OnEnable() {
-
camera.depthTextureMode |= DepthTextureMode.Depth;
-
}
-
void OnRenderImage (RenderTexture src, RenderTexture dest) {
-
if (material != null) {
-
Matrix4x4 frustumCorners = Matrix4x4.identity;
-
-
float fov = camera.fieldOfView;
-
float near = camera.nearClipPlane;
-
float aspect = camera.aspect;
-
-
float halfHeight = near * Mathf.Tan(fov *
0.5f * Mathf.Deg2Rad);
-
Vector3 toRight = cameraTransform.right * halfHeight * aspect;
-
Vector3 toTop = cameraTransform.up * halfHeight;
-
-
Vector3 topLeft = cameraTransform.forward * near + toTop - toRight;
-
float scale = topLeft.magnitude / near;
-
-
topLeft.Normalize();
-
topLeft *= scale;
-
-
Vector3 topRight = cameraTransform.forward * near + toRight + toTop;
-
topRight.Normalize();
-
topRight *= scale;
-
-
Vector3 bottomLeft = cameraTransform.forward * near - toTop - toRight;
-
bottomLeft.Normalize();
-
bottomLeft *= scale;
-
-
Vector3 bottomRight = cameraTransform.forward * near + toRight - toTop;
-
bottomRight.Normalize();
-
bottomRight *= scale;
-
-
frustumCorners.SetRow(
0, bottomLeft);
-
frustumCorners.SetRow(
1, bottomRight);
-
frustumCorners.SetRow(
2, topRight);
-
frustumCorners.SetRow(
3, topLeft);
-
-
material.SetMatrix(
"_FrustumCornersRay", frustumCorners);
-
-
material.SetFloat(
"_FogDensity", fogDensity);
-
material.SetColor(
"_FogColor", fogColor);
-
material.SetFloat(
"_FogStart", fogStart);
-
material.SetFloat(
"_FogEnd", fogEnd);
-
-
Graphics.Blit (src, dest, material);
-
}
else {
-
Graphics.Blit(src, dest);
-
}
-
}
下面，我们来实现Shader 的部分。打开Chapter13-FogWithDepthTexture，进行如下修改。
(1）我们首先需要声明本例使用的各个属性：
-
Properties {
-
_MainTex (
"Base (RGB)",
2D) =
"white" {}
-
_FogDensity (
"Fog Density", Float) =
1.0
-
_FogColor (
"Fog Color", Color) = (
1,
1,
1,
1)
-
_FogStart (
"Fog Start", Float) =
0.0
-
_FogEnd (
"Fog End", Float) =
1.0
-
}
(3）声明代码中需要使用的各个变量：
-
float4x4 _FrustumCornersRay;
-
-
sampler2D _MainTex;
-
half4 _MainTex_TexelSize;
-
sampler2D _CameraDepthTexture;
-
half _FogDensity;
-
fixed4 _FogColor;
-
float _FogStart;
-
float _FogEnd;
( 4）定义顶点着色器：
-
struct v2f {
-
float4 pos : SV_POSITION;
-
half2 uv : TEXCOORD0;
-
half2 uv_depth : TEXCOORD1;
-
float4 interpolatedRay : TEXCOORD2;
-
};
-
-
v2f vert(appdata_img v) {
-
v2f o;
-
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
-
-
o.uv = v.texcoord;
-
o.uv_depth = v.texcoord;
-
-
#if UNITY_UV_STARTS_AT_TOP
-
if (_MainTex_TexelSize.y <
0)
-
o.uv_depth.y =
1 - o.uv_depth.y;
-
#endif
-
-
int index =
0;
-
if (v.texcoord.x <
0.5 && v.texcoord.y <
0.5) {
-
index =
0;
-
}
else
if (v.texcoord.x >
0.5 && v.texcoord.y <
0.5) {
-
index =
1;
-
}
else
if (v.texcoord.x >
0.5 && v.texcoord.y >
0.5) {
-
index =
2;
-
}
else {
-
index =
3;
-
}
-
-
#if UNITY_UV_STARTS_AT_TOP
-
if (_MainTex_TexelSize.y <
0)
-
index =
3 - index;
-
#endif
-
-
o.interpolatedRay = _FrustumCornersRay[index];
-
-
return o;
-
}
尽管我们这里使用了很多判断语句，但由于屏幕后处理所用的模型是一个四边形网格，只包含4 个顶点，因此这些操作不会对性能造成很大影响。
(5）我们定义了片元着色器来产生雾效：
-
fixed4 frag(v2f i) : SV_Target {
-
float linearDepth = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth));
-
float3 worldPos = _WorldSpaceCameraPos + linearDepth * i.interpolatedRay.xyz;
-
-
float fogDensity = (_FogEnd - worldPos.y) / (_FogEnd - _FogStart);
-
fogDensity = saturate(fogDensity * _FogDensity);
-
-
fixed4 finalColor = tex2D(_MainTex, i.uv);
-
finalColor.rgb = lerp(finalColor.rgb, _FogColor.rgb, fogDensity);
-
-
return finalColor;
-
}
得到世界坐标后，模拟雾效就变得非常容易。在本例中，我们选择实现基于高度的雾效模拟，计算公式可参见13.3.2 节。我们根据材质属性 _FogEnd 和 _FogStart 计算当前的像素高度 worldPos.y 对应的雾效系数 fogDensity，再和参数 _FogDensity 相乘后，利用saturate 函数截取到［0, 1］范围内，作为最后的雾效系数。然后，我们使用该系数将雾的颜色和原始颜色进行、混合后返回。读者也可以使用不同的公式来实现其他种类的雾效。
(6）随后，我们定义了雾效渲染所需的Pass :
-
Pass {
-
ZTest Always Cull Off ZWrite Off
-
-
CGPROGRAM
-
-
#pragma vertex vert
-
#pragma fragment frag
-
-
ENDCG
-
}
FallBack Off
本节介绍的使用深度纹理重建像素的世界坐标的方法是非常有用的。但需要注意的是，这里的实现是基于摄像机的投影类型是透视投影的前提下。如果需要在正交投影的情况下重建世界坐标，需要使用不同的公式，但请读者相信，这个过程不会比透视投影的情况更加复杂。有兴趣的读者可以尝试自行推导，或参考这篇博客
（ http://www.derschmale.com/2014/03/19/reconstructing-positions-from-the-depth-buffer-pt-2-perspective-and-orthographic-general-case／）来实现。
13.4 再谈边缘检测
在12.3 节中，我们曾介绍如何使用Sobel 算子对屏幕图像进行边缘检测， 实现描边的效果。但是，这种直接利用颜色信息进行边缘检测的方法会产生很多我们不希望得到的边缘线，如图13.8 所示。
与12.3 节使用Sobel 算子不同，本节将使用Roberts 算子来进行边缘检测。它使用的卷积核如图13.10 所示。
首先，我们需要进行如下准备工作。
( 1）新建一个场景。在本书资源中，该场景名为Scene_13_4 。在Unity 5.2 中，默认情况下场景将包含一个摄像机和一个平行光，并且使用了内置的天空盒子。在Window→ Lighting→ Skybox 中去掉场景中的天空盒子。
( 2 ）我们需要搭建一个测试雾效的场景。在本书资源的实现中，我们构建了一个包含3 面墙的房间，并放置了两个立方体和两个球体，它们都使用了我们在9.5 节中创建的标准材质。同时，我们把本书资源中的Translating.cs 脚本拖曳给摄像机，让其在场景中不断运动。
( 3）新建一个脚本。在本书资源中，该脚本名为EdgeDetectNormalsAndDepth.cs。把该脚本拖曳到摄像机上。
( 4） 新建一个Unity Shader。在本书资源中，该Shader 名为Chapter13-EdgeDetectNormalAndDepth。
我们首先来编写EdgeDetecNormalsAndDepth.cs 脚本。该脚本与12.3 节中实现的EdgeDetection.cs脚本几乎完全一样，只是添加了一些新的属性。为了完整性，我们再次说明对该脚本进行的修改。
(1）首先，继承12.1 节中创建的基类：
public class EdgeDetectNormalsAndDepth : PostEffectsBase {
-
public Shader edgeDetectShader;
-
private Material edgeDetectMaterial = null;
-
public Material material {
-
get {
-
edgeDetectMaterial = CheckShaderAndCreateMaterial(edgeDetectShader, edgeDetectMaterial);
-
return edgeDetectMaterial;
-
}
-
}
-
[Range(
0.0f,
1.0f)]
-
public
float edgesOnly =
0.0f;
-
-
public Color edgeColor = Color.black;
-
-
public Color backgroundColor = Color.white;
-
-
public
float sampleDistance =
1.0f;
-
-
public
float sensitivityDepth =
1.0f;
-
-
public
float sensitivityNormals =
1.0f;
( 4 ）由于本例需要获取摄像机的深度＋法线纹理，我们在脚本的OnEnable 函数中设置摄像机的相应状态：
-
void OnEnable() {
-
GetComponent
().depthTextureMode |= DepthTextureMode.DepthNormals;
-
}
-
[ImageEffectOpaque]
-
void OnRenderImage (RenderTexture src, RenderTexture dest) {
-
if (material != null) {
-
material.SetFloat(
"_EdgeOnly", edgesOnly);
-
material.SetColor(
"_EdgeColor", edgeColor);
-
material.SetColor(
"_BackgroundColor", backgroundColor);
-
material.SetFloat(
"_SampleDistance", sampleDistance);
-
material.SetVector(
"_Sensitivity",
new Vector4(sensitivityNormals, sensitivityDepth,
0.0f,
0.0f));
-
-
Graphics.Blit(src, dest, material);
-
}
else {
-
Graphics.Blit(src, dest);
-
}
-
}
下面，我们来实现Shader 的部分。打开Chapter13-EdgeDetectNormalAndDep血，进行如下修改。
(1）我们首先需要声明本例使用的各个属性：
-
Properties {
-
_MainTex (
"Base (RGB)",
2D) =
"white" {}
-
_EdgeOnly (
"Edge Only", Float) =
1.0
-
_EdgeColor (
"Edge Color", Color) = (
0,
0,
0,
1)
-
_BackgroundColor (
"Background Color", Color) = (
1,
1,
1,
1)
-
_SampleDistance (
"Sample Distance", Float) =
1.0
-
_Sensitivity (
"Sensitivity", Vector) = (
1,
1,
1,
1)
-
}
( 2 ）在本节中，我们使用CGINCLUDE 来组织代码。我们在SubShader 块中利用CGINCLUDE 和 ENDCG 语义来定义一系列代码：
(3）为了在代码中访问各个属性，我们需要在CG 代码块中声明对应的变量：
-
sampler2D _MainTex;
-
half4 _MainTex_TexelSize;
-
fixed _EdgeOnly;
-
fixed4 _EdgeColor;
-
fixed4 _BackgroundColor;
-
float _SampleDistance;
-
half4 _Sensitivity;
-
-
sampler2D _CameraDepthNormalsTexture;
( 4 ）定义顶点着色器：
-
struct v2f {
-
float4 pos : SV_POSITION;
-
half2 uv[
5]: TEXCOORD0;
-
};
-
-
v2f vert(appdata_img v) {
-
v2f o;
-
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
-
-
half2 uv = v.texcoord;
-
o.uv[
0] = uv;
-
-
#if UNITY_UV_STARTS_AT_TOP
-
if (_MainTex_TexelSize.y <
0)
-
uv.y =
1 - uv.y;
-
#endif
-
-
o.uv[
1] = uv + _MainTex_TexelSize.xy * half2(
1,
1) * _SampleDistance;
-
o.uv[
2] = uv + _MainTex_TexelSize.xy * half2(
-1,
-1) * _SampleDistance;
-
o.uv[
3] = uv + _MainTex_TexelSize.xy * half2(
-1,
1) * _SampleDistance;
-
o.uv[
4] = uv + _MainTex_TexelSize.xy * half2(
1,
-1) * _SampleDistance;
-
-
return o;
-
}
( 5 ）然后，我们定义了片元着色器：
-
fixed4 fragRobertsCrossDepthAndNormal(v2f i) : SV_Target {
-
half4 sample1 = tex2D(_CameraDepthNormalsTexture, i.uv[
1]);
-
half4 sample2 = tex2D(_CameraDepthNormalsTexture, i.uv[
2]);
-
half4 sample3 = tex2D(_CameraDepthNormalsTexture, i.uv[
3]);
-
half4 sample4 = tex2D(_CameraDepthNormalsTexture, i.uv[
4]);
-
-
half edge =
1.0;
-
-
edge *= CheckSame(sample1, sample2);
-
edge *= CheckSame(sample3, sample4);
-
-
fixed4 withEdgeColor = lerp(_EdgeColor, tex2D(_MainTex, i.uv[
0]), edge);
-
fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);
-
-
return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);
-
}
-
half CheckSame(half4 center, half4 sample) {
-
half2 centerNormal = center.xy;
-
float centerDepth = DecodeFloatRG(center.zw);
-
half2 sampleNormal = sample.xy;
-
float sampleDepth = DecodeFloatRG(sample.zw);
-
-
// difference in normals
-
// do not bother decoding normals - there's no need here
-
half2 diffNormal =
abs(centerNormal - sampleNormal) * _Sensitivity.x;
-
int isSameNormal = (diffNormal.x + diffNormal.y) <
0.1;
-
// difference in depth
-
float diffDepth =
abs(centerDepth - sampleDepth) * _Sensitivity.y;
-
// scale the required threshold by the distance
-
int isSameDepth = diffDepth <
0.1 * centerDepth;
-
-
// return:
-
// 1 - if normals and depth are similar enough
-
// 0 - otherwise
-
return isSameNormal * isSameDepth ?
1.0 :
0.0;
-
}
当通过CheckSame 函数得到边缘信息后，片元着色器就利用该值进行颜色混合，这和12.3节中的步骤一致。
(6）然后，我们定义了边缘检测需要使用的Pass:
-
Pass {
-
ZTest Always Cull Off ZWrite Off
-
-
CGPROGRAM
-
-
#pragma vertex vert
-
#pragma fragment fragRobertsCrossDepthAndNormal
-
-
ENDCG
-
}
FallBack Off
本节实现的描边效果是基于整个屏幕空间进行的，也就是说，场景内的所有物体都会被添加描边效果。但有时，我们希望只对特定的物体进行描边，例如当玩家选中场景中的某个物体后，我们想要在该物体周围添加一层描边效果。这时，我们可以使用Unity 提供的Graphics.DrawMesh 或 Graphics.DrawMeshNow 函数把需要描边的物体再次渲染一遍（在所有不透明物体渲染完毕之后），然
后再使用本节提到的边缘检测算法计算深度或法线纹理中每个像素的梯度值，判断它们是否小于某个阀值，如果是，就在Shader 中使用clip() 函数将该像素剔除掉，从而显示出原来的物体颜色。
13.5 扩展阅读
在本章中，我们介绍了如何使用深度和法线纹理实现诸如全局雾效、边缘检测等效果。尽管我们只使用了深度和法线纹理，但实际上我们可以在Unity 中创建任何需要的缓存纹理。这可以通过使用Unity 的着色器替换（ Shader Replacement ）功能（即调用Camera.RenderWithShader(shader, replacementTag）函数）把整个场景再次渲染一遍来得到，而在很多时候，这实际也是Unity 创建深度和法线纹理时使用的方法。深度和法线纹理在屏幕特效的实现中往往扮演了重要的角色。许多特殊的屏幕效果都需要依靠这两种纹理的帮助。Unity 曾在2011 年的SIGGRAPH （计算图形学的顶级会议〉上做了一个关于使用深度纹理实现各种特效的演讲
（http://blogs.unity3d.com/2011/09/08/special-effects-with-depth-talk-at-siggraph/ ）。在这个演讲中， Unity 的工作人员解释了如何利用深度纹理来实现特定物体的描边、角色护盾、相交线的高光模拟等效果。在Unity 的 Image Effect
( http://docs.unity3d.com/Manual/comp-ImageEffects.html ）包中，读者也可以找到一些传统的使用深度纹理实现屏幕特效的例子，例如屏幕空间的环境遮挡（Screen Space Ambient Occlusion, SSAO ）等效果。