Unity Shader-遮挡处理（X-Ray，遮挡描边，遮挡半透，遮挡溶解）

简介

 

第三人称游戏，我们经常会遇到相机被场景中的建筑物遮挡的情况。今天，本人就来研究一下相机被遮挡之后的处理。最简单的就是传说中的“鸵鸟法”，假装看不见，在一些游戏里面也有一些玩法设定，或者是本身遮挡较少，影响不大的情况，也可以直接不进行处理。

当然，更好一些的遮挡处理，就是X光的效果。在人物被遮挡的部分会透过遮挡物，用一个其他的颜色渲染出来。《火炬之光》中就使用过这个效果：

类似的，《耻辱2》中的透视效果也是游戏中经常使用的，这种暂且叫其遮挡高亮或者遮挡描边吧，对于刺杀类型的游戏，这种透视技能简直是神技，比如在柱子后面就能瞄见这货：

还有一种对于遮挡的处理，就是遮挡半透，这个在很多游戏里面都有出现，比如《黑魂2》，《奥瑞与黑暗森林》，下面是Ori中的一个遮挡半透的效果动图：

还有一个效果，暂且叫其遮挡溶解吧。这个效果我是在《神界3：原罪》中看到的，说实话，第一次看到这个效果的时候，着实被惊艳到了。

翻箱倒柜找出来这几个游戏，截了一发图，顺道怀念一下。哎呀，一不小心就给自己挖了个超级大的坑。四个效果，下面开始慢慢填坑吧。

 X光效果

先来看一下最为古老的X光效果，所谓X光，就是在被遮挡的部分呈现一个其他的颜色。我们需要获得哪个地方被遮挡了，先复习一下 深度测试，渲染队列相关内容。Unity内置了一些渲染队列，并且我们可以自定义一些渲染队列。在同一个渲染队列的情况下，Unity对于不透明物体会按照从前向后的顺序渲染；对于透明物体，会按照从后向前的顺序渲染。比如我们有一个如下的场景：

正常渲染的情况下，首先渲染的是前面遮挡的栅栏，此时深度缓存中有了栅栏的深度值。然后再渲染人模（其实前后无所谓的，因为即使是先渲染人模，再渲染栅栏，遮挡部分深度测试成功也会替代人模的部分，这样会造成OverDraw，所以Unity对于不透明物体一般采用从前向后的顺序），人模被遮挡的部分深度测试失败，颜色不会输出。

下面再来看一下X光效果的流程。首先，还是先渲染栅栏，必须优先保证栅栏的渲染，所以用渲染队列进行控制渲染顺序更加靠谱一点，毕竟按照物体进行的简单深度排序的不一定完全靠谱。下面，设置人模的渲染队列比栅栏靠后一些，人物通过两个Pass渲染，第一个Pass渲染X光的Pass，这个Pass在渲染的时候使用ZTest Greater，在渲染的时候，有遮挡的部分之前的栅栏的深度，而未遮挡的部分由于深度无穷大深度测试不会通过，不显示任何内容，而被遮挡的部分，深度是栅栏的深度，人物在栅栏后，深度大于栅栏，深度测试通过，会将遮挡部分渲染成Pass的输出，而且，这个Pass不能写入深度，因为我们还需要正常画出人物未被遮挡的部分，此时就可以正常的深度测试ZTest LEqual，被遮挡的部分不渲染，只渲染未被遮挡的部分。我们用一个最简单的shader先试一下效果：

//X光效果
//by：puppet_master
//2017.6.20

Shader "ApcShader/XRayEffect"
{
	Properties
	{
		_MainTex("Base 2D", 2D) = "white"{}
	}

	SubShader
	{
		Tags{ "Queue" = "Geometry" "RenderType" = "Opaque" }
		
		//渲染X光效果的Pass
		Pass
		{
			Blend SrcAlpha One
			ZWrite Off
			ZTest Greater

			CGPROGRAM
			#include "Lighting.cginc"
			struct v2f
			{
				float4 pos : SV_POSITION;
			};

			v2f vert (appdata_base v)
			{
				v2f o;
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				return fixed4(1,1,1,0.5);
			}
			#pragma vertex vert
			#pragma fragment frag
			ENDCG
		}
		
		//正常渲染的Pass
		Pass
		{
			ZWrite On
			CGPROGRAM
			#include "Lighting.cginc"
			sampler2D _MainTex;
			float4 _MainTex_ST;

			struct v2f
			{
				float4 pos : SV_POSITION;
				float2 uv : TEXCOORD1;
			};

			v2f vert(appdata_base v)
			{
				v2f o;
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				return tex2D(_MainTex, i.uv);
			}

			#pragma vertex vert
			#pragma fragment frag	
			ENDCG
		}
	}
	
	FallBack "Diffuse"
}

效果如下：

上图基本实现了X光的效果，不过效果不是很美观，我们将X光的Pass更换一下，使用半透+边缘光的效果进行渲染，代码如下：

//X光效果
//by：puppet_master
//2017.6.20

Shader "ApcShader/XRayEffect"
{
	Properties
	{
		_MainTex("Base 2D", 2D) = "white"{}
		_XRayColor("XRay Color", Color) = (1,1,1,1)
	}

	SubShader
	{
		Tags{ "Queue" = "Geometry+100" "RenderType" = "Opaque" }
		
		//渲染X光效果的Pass
		Pass
		{
			Blend SrcAlpha One
			ZWrite Off
			ZTest Greater

			CGPROGRAM
			#include "Lighting.cginc"
			fixed4 _XRayColor;
			struct v2f
			{
				float4 pos : SV_POSITION;
				float3 normal : normal;
				float3 viewDir : TEXCOORD0;
			};

			v2f vert (appdata_base v)
			{
				v2f o;
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
				o.viewDir = ObjSpaceViewDir(v.vertex);
				o.normal = v.normal;
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				float3 normal = normalize(i.normal);
				float3 viewDir = normalize(i.viewDir);
				float rim = 1 - dot(normal, viewDir);
				return _XRayColor * rim;
			}
			#pragma vertex vert
			#pragma fragment frag
			ENDCG
		}
		
		//正常渲染的Pass
		Pass
		{
			ZWrite On
			CGPROGRAM
			#include "Lighting.cginc"
			sampler2D _MainTex;
			float4 _MainTex_ST;

			struct v2f
			{
				float4 pos : SV_POSITION;
				float2 uv : TEXCOORD0;
			};

			v2f vert(appdata_base v)
			{
				v2f o;
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				return tex2D(_MainTex, i.uv);
			}

			#pragma vertex vert
			#pragma fragment frag	
			ENDCG
		}
	}
	
	FallBack "Diffuse"
}

来一张动图看一下X光的效果：

遮挡描边效果

除了