unity3d:UI shader区域mask透明

叁歲伎倆 2022-09-15 12:39 323阅读 0赞

1.原始图  
2.mask图可分为24个区域，非编号区域为黑色  
3.设置区域值 1<<区域1| 1 <<区域2 这种形式点亮需要的区域，这样就点亮区域1，区域2

Shader "UI/MaskAreaAlpha" { 
    	Properties { 
    		_MainTex("Texture", 2D) = "white" { }
    		_Mask("遮罩", 2D) = "white" { }
    		_Area("区域",Int) = 0
    		
    		_Color("Tint", Color) = (1,1,1,1)
    		_StencilComp("Stencil Comparison", Float) = 8
    		_Stencil("Stencil ID", Float) = 0
    		_StencilOp("Stencil Operation", Float) = 0
    		_StencilWriteMask("Stencil Write Mask", Float) = 255
    		_StencilReadMask("Stencil Read Mask", Float) = 255
    		_ColorMask("Color Mask", Float) = 15
    		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
    
    	}
    	SubShader { 
    		Tags
    			{ 
    
    			"Queue" = "Transparent"
    			"IgnoreProjector" = "True"
    			"RenderType" = "Transparent"
    			"PreviewType" = "Plane"
    			"CanUseSpriteAtlas" = "True"
    			}
    
    			Stencil
    			{ 
    				Ref[_Stencil]
    				Comp[_StencilComp]
    				Pass[_StencilOp]
    				ReadMask[_StencilReadMask]
    				WriteMask[_StencilWriteMask]
    			}
    			ColorMask[_ColorMask]
    
    			Cull Off
    			Lighting Off
    			ZWrite Off
    			Blend One OneMinusSrcAlpha
    
    			Pass
    			{ 
    				CGPROGRAM
    				#pragma vertex vert
    				#pragma fragment frag
    
    				#include "UnityCG.cginc"
    				#include "UnityUI.cginc"
    				#pragma multi_compile __ UNITY_UI_ALPHACLIP
    
    				sampler2D _MainTex;
    				sampler2D _Mask;
    				int _Area; //区域值
    				float4 _ClipRect;
    
    				struct appdata
    				{ 
    					float4 vertex : POSITION;
    					float4 color : COLOR;
    					float2 uv : TEXCOORD0;
    				};
    
    				struct v2f
    				{ 
    					float2 uv : TEXCOORD0;
    					float4 color : COLOR;
    					float4 vertex : SV_POSITION;
    					float4 worldPosition : TEXCOORD1;
    				};
    
    				v2f vert(appdata v)
    				{ 
    					v2f o;
    					o.vertex = UnityObjectToClipPos(v.vertex);
    					o.uv = v.uv;
    					o.color = v.color;
    					return o;
    				}
    
    
    				int SetAlpha(fixed4 mask)
    				{ 
    					int t = (int)round(mask.r*255.0) << 16 | (int)round(mask.g*255.0) << 8 | (int)round(mask.b*255.0);
    					int isAplha = step(1, _Area & t);
    					return isAplha;
    				}
    				
    				fixed4 frag(v2f i) : SV_Target
    				{ 
    					half4 col = tex2D(_MainTex, i.uv) * i.color;
    					half4 mask = tex2D(_Mask,i.uv);
    					int isAplha = SetAlpha(mask);
    					col.a = col.a  * isAplha;
    					
    					col.a *= UnityGet2DClipping(i.worldPosition.xy, _ClipRect);  
    #ifdef UNITY_UI_ALPHACLIP
    					clip(col.a - 0.001);
    #endif
    
    					return col;
    				}
    				ENDCG
    			}
    	}
    }

示例  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_14_color_FFFFFF_t_70_g_se_x_16]  
当区域值为1，只与一个区域使能，行为是b是最低位，点亮了蓝色区域  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_13_color_FFFFFF_t_70_g_se_x_16]  
当区域值为16777215，相当于点亮了3个区域  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_12_color_FFFFFF_t_70_g_se_x_16]  
区域设置  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8cf8b909e0b040689bab488e926684a5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/77131552ddc44b5ab2f2eade10e9d7dc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/61e90200ccbd46a683f46eba67ce2af7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zub5aSV56uL5769_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8e6035e993aa4dd2badcc510b7311263.png