前言
在Unity开发过程中，为了节省图，经常会做一些图形的遮罩，笔者开发UI使用的是UGUI遮罩，用过UGUI的Mask做遮罩的应该都知道，UGUI的mask做遮罩有很明显的锯齿，于是笔者就从网上学习一套shader做的遮罩，但是仅仅是shader做的遮罩虽然效果很好，但是在正式开发中，为了优化性能，大部分图片都是会打成图集的，这时候shader中的UV就不是我们想要的UV了，这时候就需要做一些修改了。所以本文是基于图集的shader遮罩。
普通的shader遮罩
上图左边是普通的UGUI的正常mask，右边是shader写的遮罩，边缘锯齿比较很明显。
shader代码
Shader "ImageMask01"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Mask ("Base (RGB)", 2D) = "white" {}
_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
}
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask [_ColorMask]
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
struct appdata_t
{
fixed2 uv : TEXCOORD0;
float4 vertex : POSITION;
float4 color : COLOR;
};
struct v2f
{
fixed2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
};
sampler2D _MainTex;
fixed4 _Color;
sampler2D _Mask;
v2f vert(appdata_t IN)
{
v2f OUT;
OUT.vertex = UnityObjectToClipPos(IN.vertex);
OUT.uv = IN.uv;
OUT.color = IN.color * _Color;
#ifdef PIXELSNAP_ON
OUT.vertex = UnityPixelSnap(OUT.vertex);
#endif
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
fixed4 color = tex2D(_MainTex, IN.uv) * IN.color;
fixed4 mask = tex2D(_Mask, IN.uv);
color.a *= mask.a;
return color;
}
ENDCG
}
}
}
代码分析
上述代码虽然多，但是大部分都是通用的固定写法，包含一些shader支持UGUI的mask的写法，这里就不要进行讲解了，我们来看看我们shader做mask的关键代码。
Properties
{
...
_Mask ("Base (RGB)", 2D) = "white" {}
...
}
在Properties主要是把我们需要遮罩的形状放进去，这里需要注意的是需要遮罩的部分图片必须不透明，因为在做遮罩的时候是读取这个图片的透明度来判断是否需要进行遮罩的。也就是下面的代码：
fixed4 frag(v2f IN) : SV_Target
{
fixed4 color = tex2D(_MainTex, IN.uv) * IN.color;
fixed4 mask = tex2D(_Mask, IN.uv);
color.a *= mask.a;
return color;
}
逐片源操作的时候来进行读取来遮罩显示。
基于图集的遮罩
虽然上述已经实现了遮罩，但是在假如我们需要遮罩的图片是在图集上，会发现我们的遮罩会出现错误，不遮罩或者遮罩的不对，这是因为shader在读取图片的UV坐标的时候读取的并不是0~1而是图片在图集中的坐标，所以根据坐标进行遮罩是不行的。
解决方案就是需要把遮罩的坐标转成0~1的坐标，这样就可以判断是否需要遮罩了。
虽然我们有了解决方案，但是我们如何在shader中获取图片在图集的坐标呢，笔者的解决方案是利用一个C#的脚本，把图片坐标传递给shader。
Shader新的代码
Properties
{
...
_Mask ("Base (RGB)", 2D) = "white" {}
_UvRect ("UvRect", Vector) = (0, 0, 1, 1)
...
}
上述是Properties中的代码，可以看出和普通的相比多了一个_UvRect参数，是用来保存图片在图集中的坐标的。
fixed4 frag(v2f IN) : SV_Target
{
fixed4 color = tex2D(_MainTex, IN.uv) * IN.color;
float2 temuv = float2((IN.uv.x - _UvRect.x)/(_UvRect.z - _UvRect.x),(IN.uv.y - _UvRect.y)/(_UvRect.w - _UvRect.y));
fixed4 mask = tex2D(_Mask, temuv);
color.a *= mask.a;
return color;
}
在判断是否遮罩的时候，可以看到笔者关键性的代码，就是teamuv的赋值，算法很简单，知道图片四个角在图集的UV坐标，就是_UvRect参数，然后(IN.uv.x - _UvRect.x)和(IN.uv.y - _UvRect.y)就为了计算图片距离图片原点坐标的差值，也就是坐标系的坐标，他们在分别除以他们坐在的长度就转换成新的UV坐标了，其实就是图片本身的UV坐标了，然后就可以和普通的shader一样计算了。
C#代码
public class RefreshUVRect : MonoBehaviour
{
private Material material;
private Image img;
// Start is called before the first frame update
void Start()
{
img = GetComponent<Image>();
material = img.material;
Refresh();
}
public void Refresh()
{
if (img)
{
Vector4 uvRect = UnityEngine.Sprites.DataUtility.GetOuterUV(img.overrideSprite);
material.SetVector("_UvRect", uvRect);
}
}
}
C#的代码比较简单，就是获取一下材质，然后把图片四个角的UV坐标传递给材质，UnityEngine.Sprites.DataUtility.GetOuterUV这个方法就是获取UV的边界坐标。
<font color=red size=4>特别提醒一下，遮罩后编辑器模式下是错误的，因为获取的还是图片坐标，运行状态下观看就是正确的了</font>
