Unity修改Shader使UI支持Mask功能

最新推荐文章于 2024-07-26 13:16:21 发布
最新推荐文章于 2024-07-26 13:16:21 发布
阅读量3k 收藏 5
点赞数 2
分类专栏： Unity3D UGUI Unity Shader 文章标签： unity shader UI Mask
本文为博主原创文章，转载请附上原文出处链接和本声明。我的网站：https://www.hewen.site
本文链接：https://blog.csdn.net/qq_33461689/article/details/108825215
版权
Unity3D 同时被 3 个专栏收录
54 篇文章 7 订阅
订阅专栏
UGUI
8 篇文章 7 订阅
订阅专栏
Unity Shader
1 篇文章 0 订阅
订阅专栏

当UI界面上有很多UI元素，在固定区域内显示不完全时，我们通常会添加UGUI自带的Scroll View，或者添加ScrollRect和Mask组件，使内容可滑动，辅助实现该功能。

但当UI元素里面有粒子特效的时候，我们就会发现特效滑动到Mask以外的区域时，界面上的粒子特效会穿透UI面板。

这时候你可以修改Mask组件，添加MaskPlus代码，将UI上的Mask替换成MaskPlus！

using UnityEngine;
using UnityEngine.UI;

public class MaskPlus : Mask
{
    Camera cam;
    protected override void Start()
    {
        base.Start();
        ResetShaderMaskClip();
    }

    protected override void OnEnable()
    {
        base.OnEnable();
        ResetShaderMaskClip();
    }

    public void ResetShaderMaskClip()
    {
        Vector3[] points = new Vector3[4];
        (transform as RectTransform).GetWorldCorners(points);

        if (cam == null)
            cam = GameObject.Find("XXXXXXX").GetComponent<Camera>();

        float x;
        float y;
        float x1;
        float y1;

        Vector3 scPos = cam.WorldToScreenPoint(points[0]);
        x = scPos.x;
        y = scPos.y;
        x1 = scPos.x;
        y1 = scPos.y;

        for (int i = 0; i < points.Length; i++)
        {
            scPos = cam.WorldToScreenPoint(points[i]);
            //取最小xy
            x = scPos.x < x ? scPos.x : x;
            y = scPos.y < y ? scPos.y : y;

            //取最大
            x1 = scPos.x > x1 ? scPos.x : x1;
            y1 = scPos.y > y1 ? scPos.y : y1;
        }

        Vector4 normalize = new Vector4(x / Screen.width, y / (float)Screen.height, x1 / (float)Screen.width, y1 / (float)Screen.height);

        Shader.SetGlobalVector("_MaskClip", normalize);
    }
}

接下来新加一个shader，替换掉粒子特效的shader。

//@@@DynamicShaderInfoStart
//自发光贴图材质 支持UGUI Mask
//@@@DynamicShaderInfoEnd

//@@@DynamicShaderTitleRepaceStart
Shader "Custom/NoLight/Unlit - Color - UIMaskClip##" {
//@@@DynamicShaderTitleRepaceEnd

	Properties{
	 _MainTex("Texture", 2D) = "white" { }
	_TintColor("Color", Color) = (0.5,0.5,0.5,0.5)
	_Lighting("Lighting",  float) = 1
	_CutOut("CutOut", float) = 0.1

		//此段可以将 ZWrite 选项暴露在Unity的Inspector中
		[Enum(Off, 0, On, 1)] _zWrite("Zwrite", Float) = 0
		//此段可以将 Ztest  选项暴露在Unity的Inspector中
		[Enum(UnityEngine.Rendering.CompareFunction)] _zTest("ZTest", Float) = 4
		//此段可以将 Cull  选项暴露在Unity的Inspector中
		[Enum(UnityEngine.Rendering.CullMode)] _cull("Cull Mode", Float) = 2
		//此段可以将 Blend 选项暴露在Unity的Inspector中
		[Enum(UnityEngine.Rendering.BlendMode)] _SrcBlend("Src Blend Mode", Float) = 5
		[Enum(UnityEngine.Rendering.BlendMode)] _DstBlend("Dst Blend Mode", Float) = 10
		[Enum(UnityEngine.Rendering.BlendMode)] _SrcAlphaBlend("Src Alpha Blend Mode", Float) = 1
		[Enum(UnityEngine.Rendering.BlendMode)] _DstAlphaBlend("Dst Alpha Blend Mode", Float) = 10
	}
	
	

		SubShader{
		//@@@DynamicShaderTagsRepaceStart
	Tags {"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
	//@@@DynamicShaderTagsRepaceEnd

   Pass
   {
		//面板化
		Blend[_SrcBlend][_DstBlend],[_SrcAlphaBlend][_DstAlphaBlend]
		Zwrite[_zWrite]
		ZTest[_zTest]
		Cull[_cull]
		//@@@DynamicShaderBlendRepaceStart
	   //@@@DynamicShaderBlendRepaceEnd

			  CGPROGRAM

			  #pragma vertex vert
			  #pragma fragment frag
			  #include "UnityCG.cginc"
			 // #pragma multi_compile CLIP_OFF CLIP_ON

			  sampler2D _MainTex;
			  float4 _MainTex_ST;
			  float _Lighting;
			  float4 _MaskClip;


			  struct v2f {
				  float4  pos : SV_POSITION;

				  float2  uv : TEXCOORD0;
				  float4 color : COLOR;
				  float4  projPos : TEXCOORD2;
			  }

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

  ;
			  //顶点函数没什么特别的，和常规一样 
			  v2f vert(appdata v)
			  {
				  v2f o;
				  o.pos = UnityObjectToClipPos(v.vertex);
				  o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
				  o.color = v.color;
				  o.projPos = ComputeScreenPos(o.pos);

 
				  return o;
			  }



			   fixed4 _TintColor;
			  float4 frag(v2f i) : COLOR
			  {

			float4 col = tex2D(_MainTex,i.uv);
			col = col* _TintColor*i.color;
			col.rgb *= _Lighting;

			//先clip，再fog 不然会出错	
		
			int o;
			 o = sign(i.projPos.x - _MaskClip.x) + sign(i.projPos.y - _MaskClip.y) + sign(_MaskClip.z - i.projPos.x) + sign(_MaskClip.w - i.projPos.y);
			 clip(o / 4 - 0.5);
	
 
		return col;
		}


		ENDCG
	}


	}
}

如果你使用的是UI特效，你会发现Unity一直报 doesn't have _Stencil property的警告，可以参考unity 让自定义 ui shader 支持 UGUI 的 Mask 功能  修改你的shader。

shader示例：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

//@@@DynamicShaderInfoStart
//简单的UV双色控制
//@@@DynamicShaderInfoEnd

//@@@DynamicShaderTitleRepaceStart
Shader "Custom/UI/Image-UVColor##"{
//@@@DynamicShaderTitleRepaceEnd
 Properties
 {
     [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
     [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
	
	_ColorStart ("Start Color", Color) = (1,1,1,1)
   _ColorEnd ("End Color", Color) = (1,1,1,1)
   _lerp ("Lerp", Range(0,1)) = 0
	
	 [HideInInspector]_StencilComp ("Stencil Comparison", Float) = 8
	[HideInInspector]_Stencil ("Stencil ID", Float) = 0
	[HideInInspector]_StencilOp ("Stencil Operation", Float) = 0
	[HideInInspector]_StencilWriteMask ("Stencil Write Mask", Float) = 255
	[HideInInspector]_StencilReadMask ("Stencil Read Mask", Float) = 255
	[HideInInspector]_ColorMask ("Color Mask", Float) = 15


		 //此段可以将 ZWrite 选项暴露在Unity的Inspector中
		 [Enum(Off, 0, On, 1)] _zWrite("ZWrite", Float) = 1
		 //此段可以将 Ztest  选项暴露在Unity的Inspector中
		 [Enum(UnityEngine.Rendering.CompareFunction)] _zTest("ZTest", Float) = 4
		 //此段可以将 Cull  选项暴露在Unity的Inspector中
		 [Enum(UnityEngine.Rendering.CullMode)] _cull("Cull Mode", Float) = 2
		 //此段可以将 Blend 选项暴露在Unity的Inspector中
		 [Enum(UnityEngine.Rendering.BlendMode)] _SrcBlend("Src Blend Mode", Float) = 5
		 [Enum(UnityEngine.Rendering.BlendMode)] _DstBlend("Dst Blend Mode", Float) = 10
		 [Enum(UnityEngine.Rendering.BlendMode)] _SrcAlphaBlend("Src Alpha Blend Mode", Float) = 1
		 [Enum(UnityEngine.Rendering.BlendMode)] _DstAlphaBlend("Dst Alpha Blend Mode", Float) = 10

 }
Category {

     Tags
     { 
         "Queue"="Transparent" 
         "IgnoreProjector"="True" 
         "RenderType"="Transparent" 
         "PreviewType"="Plane"
         "CanUseSpriteAtlas"="True"
     }

	 Stencil
	{
		Ref [_Stencil]
		Comp [_StencilComp]
		Pass [_StencilOp] 
		ReadMask [_StencilReadMask]
		WriteMask [_StencilWriteMask]
	}
  	 
	Lighting Off
	Fog { Mode Off }
	//@@@DynamicShaderBlendRepaceStart
	//面板化
	Blend[_SrcBlend][_DstBlend],[_SrcAlphaBlend][_DstAlphaBlend]
	ZWrite[_zWrite]
	ZTest[_zTest]
	Cull[_cull]

	//@@@DynamicShaderBlendRepaceEnd
			
 SubShader
 {

  Pass
     {
     Name "SPRITE_BASE"
     CGPROGRAM
         #pragma vertex vert
         #pragma fragment frag
         #pragma multi_compile DUMMY PIXELSNAP_ON
         #include "UnityCG.cginc"
		
         struct appdata_t
         {
             float4 vertex   : POSITION;
             float4 color    : COLOR;
             float2 texcoord : TEXCOORD0;
         };

         struct v2f
         {
             float4 vertex   : SV_POSITION;
             fixed4 color    : COLOR;
             half2 texcoord  : TEXCOORD0;
         };



         v2f vert(appdata_t IN)
         {
             v2f OUT;
             OUT.vertex = UnityObjectToClipPos(IN.vertex);
             OUT.texcoord = IN.texcoord;
             OUT.color = IN.color ;
             #ifdef PIXELSNAP_ON
             OUT.vertex = UnityPixelSnap (OUT.vertex);
             #endif

             return OUT;
         }

		sampler2D _MainTex;
		fixed4 _ColorStart;
		fixed4 _ColorEnd;
		float   _lerp;
		
         fixed4 frag(v2f IN) : COLOR
         {
			 
			 float lp= saturate((1-IN.texcoord.y)*_lerp*10);
			 fixed4 lerpCol=lerp(_ColorStart,_ColorEnd,lp);
			 fixed4	 col= tex2D(_MainTex, IN.texcoord) * IN.color * lerpCol;	
			 
		 return  col;
         }
     ENDCG
     }
 
 }
 }
}

 

Unique_849997563
关注
专栏目录
Unity Shader 之 Mask Shader 实现透明物体遮挡实体的效果
仙魁XAN
12-24 5242
Unity Shader 之 Mask Shader 实现透明物体遮挡实体的效果 目录 Unity Shader 之 Mask Shader 实现透明物体遮挡实体的效果 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、实现步骤 六、Shader 代码 一、简单介绍 Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的...
Unity 灰度Shader(支持UGUI Mask裁剪)
Whislee的博客
06-29 802
本文章只做纪录，来源：https://www.cnblogs.com/grassgarden/p/9784368.html shader源码如下 其中支持mask裁剪部分（注意 有两处地方需要添加）的代码同样适合其他自定义shader Shader "Custom/UISprite" { Properties { _MainTex("Base (RGB), Alpha (A)", 2D) = "white" {} //支持Mask 裁剪的部分 //Start _StencilCom
Unity UGUI 之 Mask
最新发布
咩咩觉主的博客
07-26 620
嘻嘻
Unity Mask Shader
qq_33515628的博客
04-17 1006
这里的原理是：从遮罩纹理中采样透明度来修改片元的透明度, 遮罩的圆形之外的部分透明度为0, 该过度的地方也有不同透明度, 这样就能正确混合也能正确起到遮罩的效果.在使用Unity时，会发现Mask组件，使用像素比较小的图作为Mask会出现锯齿，看到网上有使用Shader去处理。使用Mask组件的效果。具体Shader代码。
Unity2D 让自定义UI shader支持UGUI 的mask
l1179237106的博客
05-07 717
场景：在遮罩层下的ui对象使用material（shader）会导致本身不受mask的影响。如： 以上没有任何配置错误！ 解决办法： 修改自定义shader，使它支持mask参数 Shader "....." { Properties{ ..... //MASK SUPPORT ADD _StencilComp("Stencil Comparison", Float) = 8 _Stencil("Stencil ID", Float
学习100个Unity Shader (13) ---遮罩纹理（mask texture）
weixin_43975743的博客
04-22 492
通常用于法线映射，存储模型顶点的法线，模型的每个顶点，它都有一个属于自己的切线空间 这个切线空间的原点就是该顶点本身，而轴是顶点的法线方向 (n) 轴是顶点的切线方向 (t)，可由法线和切线叉积而得，也被称为是副切线 bitangent, b) 或副法线对应的纹理的叫切线空间的法线纹理。在不同变换中使用的顶点变换矩阵Ma，不能直接用于顶点的法线，两个变换矩阵的关系为，新的矩阵为Ma的转置逆矩阵。让一些地方免于修改，比如不是所有地方都用同样的高光反射。《Unity Shader入门精要》冯乐乐。
Unity使粒子特效支持UI的Mask遮罩
capricorn1245的博客
11-29 466
Tags {... "Queue"="Transparent" ...} //注意tag需要增加这个。//MASK SUPPORT ADD 支持mask所需要添加的内容。//MASK SUPPORT ADD 支持mask所需要添加的内容。
unity 让自定义 ui shader 支持 UGUI 的 Mask 功能
热门推荐
勥小透明
05-05 1万+
unity论坛原文： http://answers.unity3d.com/questions/980924/ui-mask-with-shader.html关键的支持代码：Shader "xxxxxx" { Properties { ......//MASK SUPPORT ADD _StencilComp ("Stencil Comparison", Float) = 8 _Stencil (
Unity UI Soft Mask - 实现Sprite精灵遮罩
12-03
此外，Unity的Soft Mask功能还支持层级关系，这意味着你可以创建嵌套的遮罩结构，每个子遮罩都可以受到其父遮罩的影响，从而实现复杂而精细的遮罩效果。这对于创建多层次、交互式的UI设计非常有用。 总之，Unity UI...
Unity-URP-UI-Blur（2022.2）
05-10
总的来说，Unity-URP-UI-Blur（2022.2）是一个展示如何在Unity中利用URP和Shader Graph创建UI模糊效果的实例。通过学习和实践，开发者可以提升自己在Unity中的视觉表现力，为游戏和应用带来更加生动和沉浸式的用户...
Unity 光圈遮罩聚焦ui引导
07-08
Unity支持创建自定义Shader，以实现不同的视觉效果。以下是一个基本的步骤： 1. 创建Shader：在Unity中创建一个新的Shader，并在Shader Graph或自定义CG代码中编写渲染逻辑。 2. 模拟模糊：在Shader中，可以使用...
Unity 利用UI Mask 对Sprite精灵遮罩处理
12-01
Unity5的unitypackage 利用UI Mask 实现对Sprite精灵遮罩处理。不是插件
DepthMask-Unity-Shader：简单但功能强大的Unity着色器，可为切口，UI，AR和多个摄影机VFX技巧启用几何图形遮罩
02-06
DepthMask-Unity-Shader：简单但功能强大的Unity着色器，可为切口，UI，AR和多个摄影机VFX技巧启用几何图形遮罩
UnityMaskShader:适用于安装应用程序的遮罩着色器
04-30
UnityMaskShader 使用Unity构建的安装应用程序的Mask组件。 您可以在运行时使用键盘调整蒙版的形状，大小和模糊。 完成后，参数将自动保存。 之后，每次启动应用程序时都会加载参数。 安装 。 导入maskshader.unitypackage 。 将MaskController添加到场景的主摄像机。 在MaskController检查器中设置PrefsKey 。 PrefsKey是PrefsKey的键。 将任何与项目中其他场景不冲突的字符串放入项目中。 按键绑定 Shift + ↑ / Shift + ↓ ：模糊 Shift + ← / Shift + → ：垂直度 Ctrl + ↑ Ctrl + ↓ ：高度 Ctrl + ← Ctrl + → ：宽度 R + ↑ / R + ↓ ：旋转 执照 麻省理工学院
Unity shader实现遮罩效果
08-26
主要为大家详细介绍了Unity shader实现遮罩效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Unity Shader 技能冷却效果
05-03
1. **创建Shader**：首先，你需要创建一个新的Shader，选择Unity的Universal Render Pipeline (URP) 或 Legacy Shaders作为基础，因为它们支持自定义颜色和时间变化。在Shader Graph中，可以更直观地创建和编辑...
Unity中UI Shader遮罩RectMask2D
楠溪泽岸的博客
09-23 2438
Unity中UI Shader遮罩RectMask2D
UI shader 增加mask遮罩的支持
拔箭四顾心茫然的博客
01-19 807
年前最后一贴,祝自己在明年能获得更多的Exp. 在为ui写shader时 一定要考虑到 ui mask 的问题, 加入对应的裁剪代码. [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0 ZTest [unity_GUIZTestMode] #include "UnityUI.cginc" ...
我写unity的ui shader无法被Mask遮挡，应该怎么修改
05-26
如果你的UI Shader无法被Mask遮挡，可能是因为你的Shader没有正确地处理Mask。 首先，确保你的Shader支持Stencil Buffer。在Shader的SubShader中添加以下代码： ```glsl Stencil { Ref [MASK_VALUE] Comp always Pass replace } ``` 其中，`[MASK_VALUE]` 是一个整数，代表Mask的值。这个值需要和Mask组件中设置的值相同，才能正确地遮挡。 接着，在Shader的Pass中添加以下代码： ```glsl CGPROGRAM #pragma surface surf Standard alpha // ... void surf (Input IN, inout SurfaceOutputStandard o) { // ... clip (IN.color.a - 0.001); } ENDCG ``` 这里的clip函数用于剔除透明度较小的像素，以避免Mask的边缘出现锯齿。如果你的Shader中已经有类似的代码，可以将其改为clip函数。 最后，在Material中启用Stencil： 1. 打开Material的Inspector面板 2. 在Rendering Mode下选择Transparent或Fade 3. 勾选Enable Stencil Write和Enable Stencil Test 4. 设置Stencil Comp为Always，Stencil Op为Replace，Stencil Ref为[MASK_VALUE]，Stencil Read Mask为255 这样，你的UI Shader就能正确地被Mask遮挡了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值