NGUI的ScrollView剪裁粒子

NGUI中的ScrollView中的UIPanel的cliping模式为SoftClip,也就是会将区域外的东西剪裁掉然后看不到,但是却剪裁不掉粒子特效从而会造成穿层。解决方案,思路就是计算出这个滑动的可见区域,然后设置到自定义的粒子Shader中,在Shader中计算渲染的粒子是否在可见的区域内,通过透明度测试把不在区域的剔除掉。

using System;
using UnityEngine;

[RequireComponent(typeof(UIPanel))]
public class ParticleSystemClipper : MonoBehaviour
{
    const string ShaderName = "Bleach/Particles Additive Area Clip";

    UIPanel m_targetPanel;
    Shader m_shader;
    public UIRoot uiRoot;
    void Start()
    {
        m_targetPanel = GetComponent<UIPanel>();

        if (m_targetPanel == null) //确保UIPanel不为空
            throw new ArgumentNullException("Cann't find the right UIPanel");
        if (m_targetPanel.clipping != UIDrawCall.Clipping.SoftClip)//确保是剪裁模式的
            throw new InvalidOperationException("Don't need to clip");

        m_shader = Shader.Find(ShaderName); //根据世界坐标区域 通过透明度测试剔除区域外粒子
        Clip();//如果Scroll的可见区域不变的话,设置一次就行了
    }

    Vector4 CalcClipArea()
    {
        var clipRegion = m_targetPanel.finalClipRegion;
        Vector4 nguiArea = new Vector4()
        {
            x = clipRegion.x - clipRegion.z / 2,
            y = clipRegion.y - clipRegion.w / 2,
            z = clipRegion.x + clipRegion.z / 2,
            w = clipRegion.y + clipRegion.w / 2
        }; //中心到四周的像素偏移
        
        var pos = m_targetPanel.transform.position; //起始位置 在整个区域的中间
        float h = 2;//NGUI的Camera的Size为1,是可见区域的一半,也就是整个NGUI可见区域世界高度为2
        float temp = h / uiRoot.manualHeight;//计算一个比例 每个像素对应的世界高度

        return new Vector4()
        {
            x = pos.x + nguiArea.x * temp,
            y = pos.y + nguiArea.y * temp,
            z = pos.x + nguiArea.z * temp,
            w = pos.y + nguiArea.w * temp
        }; //像素转变为世界坐标区域
    }

    void Clip()
    {
        Vector4 clipArea = CalcClipArea();
        var particleSystems = this.GetComponentsInChildren<ParticleSystem>();//获取到左右的粒子

        for (int i = 0; i < particleSystems.Length; i++)
        {
            var ps = particleSystems[i];
            var mat = ps.GetComponent<Renderer>().material;

            if (mat.shader.name != ShaderName)
                mat.shader = m_shader; //设置Shader

            mat.SetVector("_Area", clipArea);//设置剪裁区域四个角的世界坐标
        }
    }
}


Shader "Bleach/Particles Additive Area Clip"
{
	Properties
	{
		_TintColor("Tint Color", Color) = (0.5,0.5,0.5,0.5) //粒子颜色,会保留原Shader的使用
		_MainTex("Particle Texture", 2D) = "white" {}  //粒子的贴图,会保留原Shader的使用
		_Area("Area", Vector) = (0,0,1,1)  //滑动区域的可见区域,世界坐标系
	}

	Category
	{
		Tags{ "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
		Blend SrcAlpha One //开启透明度混合,粒子贴图是有透明的
		AlphaTest Greater .01  //开启透明度测试,低于0.1的剔除
		ColorMask RGB  //透明通道不写入到Buffer中
		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;
				float4 _Area;

				struct appdata_t
				{
					float4 vertex : POSITION;
					fixed4 color : COLOR;
					float2 texcoord : TEXCOORD0;
				};

				struct v2f
				{
					float4 vertex : SV_POSITION;
					fixed4 color : COLOR;
					float2 texcoord : TEXCOORD0;
					float2 worldPos : TEXCOORD1;
				};

				float4 _MainTex_ST;

				v2f vert(appdata_t v)
				{
					v2f o;
					o.vertex = UnityObjectToClipPos(v.vertex);
					o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
					o.color = v.color;
					o.worldPos = mul(unity_ObjectToWorld, v.vertex).xy;//世界坐标
					return o;
				}

				fixed4 frag(v2f i) : SV_Target
				{
					//判断是否在区域内
					bool inArea = i.worldPos.x >= _Area.x && i.worldPos.x <= _Area.z && i.worldPos.y >= _Area.y && i.worldPos.y <= _Area.w;
					return inArea ? 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord) : fixed4(0,0,0,0);//前面那个估计是粒子的计算公式
				}
				ENDCG
			}
		}
	}
}


GIF.gif

GIF1.gif


首页 我的博客
粤ICP备17103704号