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光的效果:



遮挡描边效果


除了
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值