Mask裁剪UI粒子特效

核心原理

GPU 每次刷新屏幕时，会重新计算物体上的 Shader 中的顶点着色器和片面着色器，然后输出计算结果并显示到屏幕上。在计算片面着色器时，需要将材质的顶点的世界坐标和 Mask 裁剪区域的边界进行比对，判断该顶点是否在裁剪区域内，如果不是就将该顶点的透明通道设为零。

下面附上Shader代码：
//add 注释中的内容是修改的地方

//Mask裁切UI粒子系统
Shader "Particles/AdditiveMask" {
	Properties {
		_TintColor ("Tint Color", Color) = (0.5,0.5,0.5,0.5)
		_MainTex ("Particle Texture", 2D) = "white" {}
		_InvFade ("Soft Particles Factor", Range(0.01,3.0)) = 1.0
	
		//-------------------add----------------------
		_MinX ("Min X", Float) = -10
		_MaxX ("Max X", Float) = 10
		_MinY ("Min Y", Float) = -10
		_MaxY ("Max Y", Float) = 10
		//-------------------add----------------------
	}
 
	Category {
		Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
		Blend SrcAlpha One
		AlphaTest Greater .01
		ColorMask RGB
		Cull Off Lighting Off ZWrite Off Fog { Color (0,0,0,0) }
	
		SubShader {
			Pass {
		
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag
				#pragma multi_compile_particles
 
				#include "UnityCG.cginc"
 
				sampler2D _MainTex;
				fixed4 _TintColor;
				//-------------------add----------------------
				float _MinX;
				float _MaxX;
				float _MinY;
				float _MaxY;
				//-------------------add----------------------
			
				struct appdata_t {
					float4 vertex : POSITION;
					fixed4 color : COLOR;
					float2 texcoord : TEXCOORD0;
				};
 
				struct v2f {
					float4 vertex : SV_POSITION;
					fixed4 color : COLOR;
					float2 texcoord : TEXCOORD0;
					#ifdef SOFTPARTICLES_ON
					float4 projPos : TEXCOORD1;
					#endif
					//-------------------add----------------------
					float3 vpos : TEXCOORD2;
					//-------------------add----------------------
				};
			
				float4 _MainTex_ST;
 
				v2f vert (appdata_t v)
				{
					v2f o;
					//-------------------add----------------------
					o.vpos = v.vertex.xyz;
					//-------------------add----------------------
					o.vertex = UnityObjectToClipPos(v.vertex);
					#ifdef SOFTPARTICLES_ON
					o.projPos = ComputeScreenPos (o.vertex);
					COMPUTE_EYEDEPTH(o.projPos.z);
					#endif
					o.color = v.color;
					o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
					return o;
				}
 
				sampler2D_float _CameraDepthTexture;
				float _InvFade;
			
				fixed4 frag (v2f i) : SV_Target
				{
					#ifdef SOFTPARTICLES_ON
					float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos)));
					float partZ = i.projPos.z;
					float fade = saturate (_InvFade * (sceneZ-partZ));
					i.color.a *= fade;
					#endif
				
					//-------------------add----------------------
					fixed4 c =2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord);
					c.a *= (i.vpos.x >= _MinX );
	           		c.a *= (i.vpos.x <= _MaxX);
					c.a *= (i.vpos.y >= _MinY);
					c.a *= (i.vpos.y <= _MaxY);
					c.rgb *= c.a;
					return c;
					//-------------------add----------------------
				}
				ENDCG 
			}
		}	
	}
}

下面附上C#代码：

using UnityEngine;
using UnityEngine.UI;

//Mask裁切UI粒子系统
public class MaskShader : MonoBehaviour
{
    private Material material;
    private RectMask2D mask;
    public void Start()
    {
        material = GetComponent<ParticleSystem>().GetComponent<Renderer>().material;
        mask = GetComponentInParent<RectMask2D>();
        SetClip();
        //如果运行时裁剪区域不会发生改变，可以注释掉下面这句代码
        GetComponentInParent<ScrollRect>().onValueChanged.AddListener(v => { SetClip(); });
    }
    public void SetClip()
    {
        //获取到需要裁剪的区域
        Vector3[] corners = new Vector3[4];
        mask.GetComponent<RectTransform>().GetWorldCorners(corners);
        //将裁剪区域传入到Shader中
        material.SetFloat("_MinX", corners[0].x);
        material.SetFloat("_MinY", corners[0].y);
        material.SetFloat("_MaxX", corners[2].x);
        material.SetFloat("_MaxY", corners[2].y);
    }
}

将C#脚本挂到需要裁剪的粒子系统对象身上

效果展示：

裁剪后

裁剪前

附参考链接：
1.https://www.huangshengbo.com/2019/12/12/learnrecord/
2.https://www.xuanyusong.com/archives/3518