Unity中UI Shader遮罩RectMask2D

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： Unity 文章标签： unity ui 游戏引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51603875/article/details/133185157
版权

文章目录

前言

Unity中UI Shader遮罩RectMask2D

一、需要定义一个变体UNITY_UI_CLIP_RECT

UNITY_UI_CLIP_RECT

当父级物体有Rect Mask 2D组件时激活.
需要先手动定义此变体#pragma multi_compile _ UNITY_UI_CLIP_RECT
同时需要声明：_ClipRect(一个四维向量，四个分量分别表示RectMask2D的左下角点的xy坐标与右上角点的xy坐标.)
UnityGet2DClipping (float2 position, float4 clipRect)即可实现遮罩.

//声明一个变体，用于RectMask使用
#pragma multi_compile _ UNITY_UI_CLIP_RECT

注意： 上面的 _ 前后均有空格

在片元着色器使用以下代码测试看看基本功能
#if UNITY_UI_CLIP_RECT
return 1;
#else
return 0.5;
#endif

测试代码：

Shader"MyShader/P1_1_8"
{
    Properties
    {
        //命名要按标准来，这个属性才可以和Unity组件中的属性产生关联
        //比如说，在更改 Image 的源图片时，同时更改这个
        [PerRendererData]_MainTex("MainTex",2D) = "white"{}
        _StencilComp ("Stencil Comparison", Float) = 8.000000
        _Stencil ("Stencil ID", Float) = 0.000000
        _StencilOp ("Stencil Operation", Float) = 0.000000
        _StencilWriteMask ("Stencil Write Mask", Float) = 255.000000
        _StencilReadMask ("Stencil Read Mask", Float) = 255.000000
        _ColorMask ("Color Mask", Float) = 15.000000
    }
    
    SubShader
    {
        //更改渲染队列（UI的渲染队列一般是半透明层的）
        Tags {"Queue" = "TransParent"}
        //混合模式
        Blend SrcAlpha OneMinusSrcAlpha
        
        ColorMask [_ColorMask]
        
        Stencil
        {
            Ref [_Stencil]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
            Comp [_StencilComp]
            Pass [_StencilOp]
        }
        Pass
        {
            CGPROGRAM
            #pragma vertex  vert
            #pragma fragment frag
            //声明一个变体，用于RectMask使用
            #pragma multi_compile _ UNITY_UI_CLIP_RECT
            #include "UnityCG.cginc"
            //存储 应用程序输入到顶点着色器的信息
            struct appdata
            {
                //顶点信息
                float4 vertex:POSITION;
                float2 uv : TEXCOORD;
                //这里定义一个语义为Color的4维向量，用于传入顶点颜色,设置语义为COLOR后，这个变量就会与顶点颜色对应
                fixed4 color:COLOR;
            };
            //存储 顶点着色器输入到片元着色器的信息
            struct v2f
            {
                //裁剪空间下的位置信息（SV_POSITION是必须的）
                float4 pos:SV_POSITION;
                float2 uv : TEXCOORD;
                //这里的语义主要代表精度不同，TEXCOORD 在这里只是代表高精度
                fixed4 color : TEXCOORD1;
            };
            
            sampler2D _MainTex;
            fixed4 _Color;
            v2f vert(appdata v)
            {
                v2f o;
                //把顶点信息转化到裁剪坐标下
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.color = v.color;
                return o;
            }
            fixed4 frag(v2f i) : SV_Target
            {
                #if UNITY_UI_CLIP_RECT
                    return  1;
                #else
                    return 0.5;
                #endif
                
                
                fixed4 mainTex = tex2D(_MainTex,i.uv);
                return  mainTex * i.color;
            }
            
            ENDCG
        }
    }
}

效果：
在这里插入图片描述
在这里插入图片描述

二、需要申明一个_ClipRect,这是使用上面这个变体需要使用的，这个属性并没有在Properties声明

同时需要声明：_ClipRect(一个四维向量，四个分量分别表示RectMask2D的左下角点的xy坐标与右上角点的xy坐标.)

这个坐标是用来存储RectMask所占的位置信息
因为UI是一个矩形，所以记录了 左下角 和 右上角 顶点信息 后就可以知道 RectMask所占的位置
在这里插入图片描述

注意：在UGUI中模型顶点的本地坐标，经过顶点着色器传入片段着色器会转化为屏幕坐标（即看见的坐标值很大不是UI模型的本地坐标，而是UI模型的屏幕坐标）

1、现在我们用简单的代码测试一下 _ClipRect 的使用

主要逻辑：
1、在应用程序阶段传入顶点着色器的结构体中 加入 顶点信息
2、在顶点着色着色器传入片元着色器的结构体中 加入 顶点信息
3、在 片元着色器中，使用 _ClipRect 的坐标信息用于判断，符合条件的返回 1（半透明白） ，不符合返回 0.5（半透明灰）

Shader"MyShader/P1_1_8"
{
    Properties
    {
        //命名要按标准来，这个属性才可以和Unity组件中的属性产生关联
        //比如说，在更改 Image 的源图片时，同时更改这个
        [PerRendererData]_MainTex("MainTex",2D) = "white"{}
        _StencilComp ("Stencil Comparison", Float) = 8.000000
        _Stencil ("Stencil ID", Float) = 0.000000
        _StencilOp ("Stencil Operation", Float) = 0.000000
        _StencilWriteMask ("Stencil Write Mask", Float) = 255.000000
        _StencilReadMask ("Stencil Read Mask", Float) = 255.000000
        _ColorMask ("Color Mask", Float) = 15.000000
    }
    
    SubShader
    {
        //更改渲染队列（UI的渲染队列一般是半透明层的）
        Tags {"Queue" = "TransParent"}
        //混合模式
        Blend SrcAlpha OneMinusSrcAlpha
        
        ColorMask [_ColorMask]
        
        Stencil
        {
            Ref [_Stencil]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
            Comp [_StencilComp]
            Pass [_StencilOp]
        }
        Pass
        {
            CGPROGRAM
            #pragma vertex  vert
            #pragma fragment frag
            //声明一个变体，用于RectMask使用
            #pragma multi_compile _ UNITY_UI_CLIP_RECT
            #include "UnityCG.cginc"
            //存储 应用程序输入到顶点着色器的信息
            struct appdata
            {
                //顶点信息
                float4 vertex:POSITION;
                float2 uv : TEXCOORD;
                //这里定义一个语义为Color的4维向量，用于传入顶点颜色,设置语义为COLOR后，这个变量就会与顶点颜色对应
                fixed4 color:COLOR;
            };
            //存储 顶点着色器输入到片元着色器的信息
            struct v2f
            {
                //裁剪空间下的位置信息（SV_POSITION是必须的）
                float4 pos:SV_POSITION;
                float2 uv : TEXCOORD;
                //这里的语义主要代表精度不同，TEXCOORD 在这里只是代表高精度
                fixed4 color : COLOR;
                //定义一个四维变量存储顶点信息
                float4 vertex : TEXCOORD1;
            };
            
            sampler2D _MainTex;
            fixed4 _Color;
            //在使用 RectMask 需要使用的变体时，需要声明一个四维变量 _ClipRect
            float4 _ClipRect;
            
            
            v2f vert(appdata v)
            {
                v2f o;
                //把顶点信息转化到裁剪坐标下
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.color = v.color;
                o.vertex = v.vertex;
                return o;
            }
            fixed4 frag(v2f i) : SV_Target
            {
                #if UNITY_UI_CLIP_RECT
                    if(_ClipRect.x < i.vertex.x)
                    {
                        return 1;
                    }
                    else
                    {
                        return 0.5;
                    }
                #else
                    return 0.5;
                #endif
                
                fixed4 mainTex = tex2D(_MainTex,i.uv);
                return  mainTex * i.color;
            }
            
            ENDCG
        }
    }
}

效果：
请添加图片描述

然后我们基于以上的基础，让 内层UI只在 _ClipRect 范围内渲染

测试代码：

Shader"MyShader/P1_1_8"
{
    Properties
    {
        //命名要按标准来，这个属性才可以和Unity组件中的属性产生关联
        //比如说，在更改 Image 的源图片时，同时更改这个
        [PerRendererData]_MainTex("MainTex",2D) = "white"{}
        _StencilComp ("Stencil Comparison", Float) = 8.000000
        _Stencil ("Stencil ID", Float) = 0.000000
        _StencilOp ("Stencil Operation", Float) = 0.000000
        _StencilWriteMask ("Stencil Write Mask", Float) = 255.000000
        _StencilReadMask ("Stencil Read Mask", Float) = 255.000000
        _ColorMask ("Color Mask", Float) = 15.000000
    }
    
    SubShader
    {
        //更改渲染队列（UI的渲染队列一般是半透明层的）
        Tags {"Queue" = "TransParent"}
        //混合模式
        Blend SrcAlpha OneMinusSrcAlpha
        
        ColorMask [_ColorMask]
        
        Stencil
        {
            Ref [_Stencil]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
            Comp [_StencilComp]
            Pass [_StencilOp]
        }
        Pass
        {
            CGPROGRAM
            #pragma vertex  vert
            #pragma fragment frag
            //声明一个变体，用于RectMask使用
            #pragma multi_compile _ UNITY_UI_CLIP_RECT
            #include "UnityCG.cginc"
            //存储 应用程序输入到顶点着色器的信息
            struct appdata
            {
                //顶点信息
                float4 vertex:POSITION;
                float2 uv : TEXCOORD;
                //这里定义一个语义为Color的4维向量，用于传入顶点颜色,设置语义为COLOR后，这个变量就会与顶点颜色对应
                fixed4 color:COLOR;
            };
            //存储 顶点着色器输入到片元着色器的信息
            struct v2f
            {
                //裁剪空间下的位置信息（SV_POSITION是必须的）
                float4 pos:SV_POSITION;
                float2 uv : TEXCOORD;
                //这里的语义主要代表精度不同，TEXCOORD 在这里只是代表高精度
                fixed4 color : COLOR;
                //定义一个四维变量存储顶点信息
                float4 vertex : TEXCOORD1;
            };
            
            sampler2D _MainTex;
            fixed4 _Color;
            //在使用 RectMask 需要使用的变体时，需要声明一个四维变量 _ClipRect
            float4 _ClipRect;
            
            
            v2f vert(appdata v)
            {
                v2f o;
                //把顶点信息转化到裁剪坐标下
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.color = v.color;
                o.vertex = v.vertex;
                return o;
            }
            fixed4 frag(v2f i) : SV_Target
            {
                #if UNITY_UI_CLIP_RECT
                    if(_ClipRect.x < i.vertex.x && _ClipRect.z > i.vertex.x && _ClipRect.y < i.vertex.y && _ClipRect.w > i.vertex.y)
                    {
                        fixed4 mainTex = tex2D(_MainTex,i.uv);
                        return  mainTex * i.color;
                    }
                    else
                    {
                        return 0;
                    }
                #else
                    return 0.5;
                #endif
                
                
            }
            
            ENDCG
        }
    }
}

效果：
请添加图片描述

2、因为 if 语句在 Shader 中十分消耗性能，所以要避免使用 if 语句 ，if只适合用于理解原理（三目运算符也是同理）

我们使用Math中的 step(a,b) 函数来解决这个问题
如果a<=b返回1,否则返回0.

如果使用 这个 Math 方法，则可以按这样的思路设计，使用宏判断后，在宏判断中记录 step 后的值，然后最后与需要输出的颜色混合输出即可。（因为0乘任何数等于0）

所以这里把之前的条件语句转化为了如下语句
value = step(_ClipRect.x,i.vertex.x) * step(i.vertex.x,_ClipRect.z) * step(_ClipRect.y,i.vertex.y) * step(i.vertex.y,_ClipRect.w);

3、以上代码还可以再进一步优化，因为 step 不只可以用与点之间的比较，可以用于向量之间的比较，所以在以上代码的基础上，减少step的使用

fixed2 rect = step(_ClipRect.xy,i.vertex.xy) * step(i.vertex.xy,_ClipRect.zw);
value = rect.x * rect.y ;

因为我们使用的混合模式为

Blend SrcAlpha OneMinusSrcAlpha

所以使用 纹理采样后的透明值 与输出结果相乘，即可让透明部分透明

return mainTex * i.color * value * mainTex.a;

4、使用 UnityGet2DClipping (float2 position, float4 clipRect)

需要导入库：#include <UnityUI.cginc>

value = UnityGet2DClipping(i.vertex,_ClipRect);
//函数实现 和 法3一样

5、最终测试代码

Shader"MyShader/P1_1_9"
{
    Properties
    {
        //命名要按标准来，这个属性才可以和Unity组件中的属性产生关联
        //比如说，在更改 Image 的源图片时，同时更改这个
        [PerRendererData]_MainTex("MainTex",2D) = "white"{}
        _StencilComp ("Stencil Comparison", Float) = 8.000000
        _Stencil ("Stencil ID", Float) = 0.000000
        _StencilOp ("Stencil Operation", Float) = 0.000000
        _StencilWriteMask ("Stencil Write Mask", Float) = 255.000000
        _StencilReadMask ("Stencil Read Mask", Float) = 255.000000
        _ColorMask ("Color Mask", Float) = 15.000000
    }
    
    SubShader
    {
        //更改渲染队列（UI的渲染队列一般是半透明层的）
        Tags {"Queue" = "TransParent"}
        //混合模式
        Blend SrcAlpha OneMinusSrcAlpha
        
        ColorMask [_ColorMask]
        
        Stencil
        {
            Ref [_Stencil]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
            Comp [_StencilComp]
            Pass [_StencilOp]
        }
        Pass
        {
            CGPROGRAM
            #pragma vertex  vert
            #pragma fragment frag
            //声明一个变体，用于RectMask使用
            #pragma multi_compile _ UNITY_UI_CLIP_RECT
            #include <UnityUI.cginc>

            #include "UnityCG.cginc"
            //存储 应用程序输入到顶点着色器的信息
            struct appdata
            {
                //顶点信息
                float4 vertex:POSITION;
                float2 uv : TEXCOORD;
                //这里定义一个语义为Color的4维向量，用于传入顶点颜色,设置语义为COLOR后，这个变量就会与顶点颜色对应
                fixed4 color:COLOR;
            };
            //存储 顶点着色器输入到片元着色器的信息
            struct v2f
            {
                //裁剪空间下的位置信息（SV_POSITION是必须的）
                float4 pos:SV_POSITION;
                float2 uv : TEXCOORD;
                //这里的语义主要代表精度不同，TEXCOORD 在这里只是代表高精度
                fixed4 color : COLOR;
                //定义一个四维变量存储顶点信息
                float4 vertex : TEXCOORD1;
            };
            
            sampler2D _MainTex;
            fixed4 _Color;
            //在使用 RectMask 需要使用的变体时，需要声明一个四维变量 _ClipRect
            float4 _ClipRect;
            
            
            v2f vert(appdata v)
            {
                v2f o;
                //把顶点信息转化到裁剪坐标下
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.color = v.color;
                o.vertex = v.vertex;
                return o;
            }
            fixed4 frag(v2f i) : SV_Target
            {
                float value = 0;
                #if UNITY_UI_CLIP_RECT
                    //法1、使用if有助于理解
                    /*if(_ClipRect.x < i.vertex.x && _ClipRect.z > i.vertex.x && _ClipRect.y < i.vertex.y && _ClipRect.w > i.vertex.y)
                    {
                        return 1;
                    }
                    else
                    {
                        return 0;
                    }*/
                    //法2、利用step来优化if
                    //value =  step(_ClipRect.x,i.vertex.x) * step(i.vertex.x,_ClipRect.z) * step(_ClipRect.y,i.vertex.y) * step(i.vertex.y,_ClipRect.w);
                    //法3、使用step进行向量比较，减少step的使用数量
                    /*fixed2 rect = step(_ClipRect.xy,i.vertex.xy) * step(i.vertex.xy,_ClipRect.zw);
                    value = rect.x * rect.y;*/
                    //法4、利用Unity自带函数实现
                    value = UnityGet2DClipping(i.vertex,_ClipRect);
                #else
                    return 0.5;
                #endif
                
                fixed4 mainTex = tex2D(_MainTex,i.uv);
                return  mainTex * i.color * value * mainTex.a;
            }
            
            ENDCG
        }
    }
}
楠溪泽岸
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Unity中UI和粒子特效之间的遮挡以及遮罩功能
02-20
UI和粒子特效之间遮挡和遮罩功能
如何修改Unity3D UGUI 默认 shader 实现自定义 UI 表现
u012149999的博客
08-04 4931
如何修改 Unity3D UGUI 默认 shader 实现自定义 UI 表现
Unity UGUI优化
gaojinjingg的专栏
12-16 973
Unity UGUI 优化 原内容来自于雨松MOMO的UWA课堂 纹理格式的选择 界面打开慢可分为首次打开慢和再次打开慢，首次打开慢一般是由于需要加载过多的UI资源。而再次打开慢就是程序不合理造成的了。 首次界面打开加载的资源（如：贴图）会被缓存在内存中，这样再次打开界面由于内存中已经有了资源（如：贴图）所以会更快。 作为界面优化，我们应当尽可能地让首次打开得更快。 Androi...
Unity中详细描述用于ScrollView的Mask和RectMask2D的具体原理以及它们是如何对DrawCall产生影响
zjw1349547081的专栏
02-22 420
在Unity中，Mask和RectMask2D都是用于限制UI元素渲染区域的组件，常常用于ScrollView等需要剪裁内容的场景，但它们的工作原理和对Draw Call的影响是不同的。
【Unity】【UI Shader】关于用Shader实现字体的描边和阴影
cyf649669121的博客
07-06 6622
前言 描边和阴影，Unity本来是由自带的组件的（Outline和Shadow）。Unity自己的实现方式如下： Outline：把原文字/图片以往的网格复制4份，然后上下左右各偏移一点距离（相当于多绘制了4遍）。 Shadow：把原文字/图片的网格复制1份，然后往某个方向偏移一点（相当于多绘制了1遍）。 我觉得是挺蛋疼的，所以就突发奇想干脆用Shader来实现会不会好一点。 正文： 由于本人水平有限，所以大部分代码都是参考网上的。这里先上代码： // Upgrade NOTE: re.
【Shader案例】实现UGUI裁剪功能
两水先木示的博客
11-26 1506
using UnityEngine; using UnityEngine.UI; /// <summary> /// 挂于裁剪物体身上的脚本，用于设置裁剪区域_ClipRect [Vector4] /// </summary> public class ClipTest : MonoBehaviour { //作为裁剪区域的物体 public GameObject go; void Start() { //获取go物体的RectT.
Unity UI 软裁剪
qq_40833062的博客
03-01 321
//UnitySoft_Clip软裁剪 Shader"UI/Soft_Default" { Properties { [PerRendererData]_MainTex("SpriteTexture",2D)="white"{} _Color("Tint",Color)=(1,1,1,1) _StencilComp("StencilComparison",Float)=8
Unity UGUI的Mask（遮罩）组件的介绍及使用
alianblank的博客
07-10 4305
Mask（遮罩）组件是Unity UGUI中的一个重要组件，用于限制子对象的可见区域。通过设置遮罩组件，可以实现一些特殊效果，如显示部分图片、裁剪文本等。
Unity中实现2D遮罩
L的博客
05-05 2814
可以使用SpriteMask用作控制图形显示区域，SpriteRenderer用作显示图形，在SpriteRenderer中选择MaskInteraction遮罩类型。
UnityGet2DClipping函数解读
小孔明的专栏
06-28 6367
这个函数颇费我的脑力，都怪国内的博客写的跟屎样，都是抄写，没有一个自己的原创和感悟，下面我来讲下这个函数的真正意义。 参考：UnityUI.cginc中的函数： inline float UnityGet2DClipping (in float2 position, in float4 clipRect) { float2 inside = step(clipRect.xy, positi...
unity用shader来实现2D涟漪/水波纹特效
04-25
unity用shader来实现2D涟漪/水波纹特效
Unity UI 转场动画shader
04-03
Unity UI 转场动画shader
Unity的UI圆角矩形shader.unitypackage
07-08
Unity的UI圆角矩形shader.unitypackage
Unity Shader实现纹理遮罩效果
08-19
主要为大家详细介绍了Unity Shader实现纹理遮罩效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 393
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
xs9922b_colorbar.bat
自由软件的天堂
04-28 284
通过用户空间I2C操作让XS9922B输出彩条
移植 SquareLine 导出的 UI 源码到 HMI-Board
嵌入式小菜鸟一枚~
04-28 981
移植 SquareLine Studio 设计 UI 到 HMI-Board
border 是渐变色怎么设置 圆角 radius?
左不言的博客
04-29 165
border 是渐变色怎么设置 圆角 radius?
unity中怎么让RectMask2D对sfx生效
05-24
RectMask2D 是用来限制 UI 元素的显示范围的，如果想让 SFX （Sound Effects）在限制范围内播放，可以通过以下步骤实现： 1. 在 UI 元素上添加 RectMask2D 组件，将其作为该 UI 元素的子对象，并将 SFX 放在该子对象下。 2. 在 SFX 上添加 Audio Source 组件，并设置好音频文件。 3. 在代码中获取 RectMask2D 组件，并将其指定为 Audio Listener 的 rectTransform 属性，这样就可以让 SFX 在限制范围内播放了。 以下是示例代码： ```c# using UnityEngine; using UnityEngine.UI; public class SFXController : MonoBehaviour { public AudioClip sfxClip; // 音频文件 private RectMask2D mask; // RectMask2D 组件 void Start() { mask = GetComponentInChildren<RectMask2D>(); AudioListener.volume = 1f; // 音量设为最大 } void Update() { AudioListener.rectTransform = mask.rectTransform; // 将 RectMask2D 指定为 Audio Listener 的 rectTransform 属性 if (Input.GetKeyDown(KeyCode.Space)) { AudioSource.PlayClipAtPoint(sfxClip, transform.position); // 播放 SFX } } } ``` 在示例代码中，我们通过 Input.GetKeyDown 来触发 SFX 的播放，如果你需要在其他地方触发，可以根据自己的需求来修改代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

楠溪泽岸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值