Unity Shaderlab学习系列-2 特效案例-遮罩效果

在Unity当中，要实现遮罩效果，有一下几种方式：

1. 使用固定遮罩图片，叠加在需要被遮的图片之上

2. 使用Unity的Mask组件，实现遮罩

3. 利用Shader实现遮罩效果

目前并没有看过Mask组件的实现方式，就不扯太多关于这个组件的内容了。1和2的实现方式，都不够自由，都需要利用图片来实现。而通过Shader的方式实现，则显得非常自由，效果上也可以由自己定义，难就难咋，shader相对比较难以学习。本次就来说如何用shader实现遮罩效果。

先来看一下实现思路。以圆形遮罩为例，有两种实现方法。第一种就是纯shader实现，另一种是通过制作圆形遮罩图，在shader中决定显示或丢弃像素值。纯shader实现，需要用到标准圆形公式(x-a)²+(y-b)²=r²。通过计算像素值是否在圆内，圆内显示，圆外丢弃。通过制作圆形遮罩相对简单许多，只需要在面片着色器中判断RGB的其中一个通道的值是否为1,1显示，0丢弃像素值就可以。

下面贴上实现代码

纯shader实现

Shader "Custom/CycleMask"
{
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}//纹理贴图
		_CenterX ("CenterX", Range(0, 1)) = 0.5//中心点x
		_CenterY ("CenterY", Range(0, 1)) = 0.5//中心点y
		_Ridus("R", Range(0, 1)) = 0.5//半径
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

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

			//声明变量
			float _Ridus;
			float _CenterX;
			float _CenterY;
			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{

				fixed4 col = tex2D(_MainTex, i.uv);//纹理采样
				float val = (i.uv.x - _CenterX)*(i.uv.x - _CenterX) + (i.uv.y - _CenterY)* (i.uv.y - _CenterY);//计算标准圆形公式左值
				if(val > _Ridus * _Ridus)//对点是否在圆内做判断
				{

					return fixed4(0,0,0,1);//超出则返回黑色
				}
				else
				{
					return col;
				}
			}
			ENDCG
		}
	}
}

由制作圆形遮罩实现

Shader "Custom/CycleMask"
{
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}//纹理贴图
		_Mask ("Mask", 2D) = "white" {}//遮罩贴图
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

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

			//声明变量
			sampler2D _MainTex;
            sampler2D _Mask;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{

				fixed4 col = tex2D(_MainTex, i.uv);//纹理采样
                fixed4 mask = tex2D(_Mask, i.uv);
				if(mask.r < 1)//对点是否在圆内做判断
				{
					return fixed4(0,0,0,1);
				}
				else
				{
					return col;
				}
			}
			ENDCG
		}
	}
}

以上是代码实现

通过shader，可以给遮罩加上渐变效果

Shader "Custom/CycleMask"
{
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}//纹理贴图
		_CenterX ("CenterX", Range(0, 1)) = 0.5//中心点x
		_CenterY ("CenterY", Range(0, 1)) = 0.5//中心点y
		_Ridus("R", Range(0, 1)) = 0.5//半径
		_Ran("Ran", Range(0,0.1)) = 0.05//渐变宽度半径
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

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

			//声明变量
			float _Ran;
			float _Ridus;
			float _CenterX;
			float _CenterY;
			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{

				fixed4 col = tex2D(_MainTex, i.uv);//纹理采样
				float val = (i.uv.x - _CenterX)*(i.uv.x - _CenterX) + (i.uv.y - _CenterY)* (i.uv.y - _CenterY);//计算标准圆形公式左值
				if(val > _Ridus * _Ridus)//对点是否在圆内做判断
				{
					float dis = sqrt(val) - _Ridus;//获取超出半径偏移量
					if(dis < _Ran)
						return col * saturate(((_Ran - dis)/_Ran));//超出半径偏移量小于限定渐变半径，则将该值归一化，并和采样颜色相乘
					else
						return fixed4(0,0,0,1);//超出则返回黑色
				}
				else
				{
					return col;
				}
			}
			ENDCG
		}
	}
}