给图集中个头像加上一个圆形遮罩

你将了解的内容：

1.图集中，某个sprite的UV 怎么拿到并使用。
2.不用if如何实现一个抗锯齿的圆形头像遮罩。
3.如何在shader支持UGUI的mask。

1.如何拿到某一个sprite的UV？如果有写过一些简单的image effcet shader 的话，就应该知道在处理图集时，很麻烦。某个sprite的UV是相当于整个图集（atlas）的。而不是之前单一图片那样，针对于自己。先将下原理，在默认的传入shader 顶点的struct中只有TEXCOORD0，我们能不能在开始的时候把sprite自己的UV传入在TEXCOORD1呢？答案是肯定的。只需要继承BaseMeshEffect 把自己的UV 传入第2套UV即可。

public class VerIndexAtlasUV1 : BaseMeshEffect
{
public override void ModifyMesh(VertexHelper vh)
{
if (!IsActive())
{
return;
}
UIVertex vert = new UIVertex();
for (int i = 0; i < vh.currentVertCount; i++)
{
vh.PopulateUIVertex(ref vert, i);
vert.uv1.x = (i >> 1);
vert.uv1.y = ((i>>1) ^(i&1));
vh.SetUIVertex(vert, i);
}
}
}

这里是最核心的一步！使用第二套UV 传sprite自身的UV。

struct appdata_ui {
float4 vertex: POSITION;
float4 color :COLOR;
float2 texcoord:TEXCOORD0;
float2 texcoord1:TEXCOORD1;
};

texcoord 默认的UV--->图集的UV
texcoord1 我们自己创建的UV,sprite的UV。有了这个很轻松就能实现一些Image effect shader。
这里主要参考了 http://blog.csdn.net/akof1314/article/details/50428200 的文章。

对应如何实现一个不用if的圆形遮罩，首先应该想到的是，我们如何在shader中画一个圆。

float inCircle(float2 r, float2 center, float raidus) {
return 1.0 - smoothstep(raidus - 0.01, raidus + 0.01, length(r - center));
}

先使用 smoothstep插值。这里返回的 是alpha的值。直接使用这个值设置alpha就能画一个圆出来。
但是，我们需要的是一个遮罩。

fixed4 frag(v2f_ui i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv)* i.color;
fixed4 col1 = fixed4(0.0, 0.0, 0.0, 0.0);
return lerp(col1,col,inCircle(i.uv1,_Center.xy, _Raidus));
}

如果在白色透明和原图直接进行2次插值 就能画出 一个抗锯齿的圆形遮罩。

第三步，如何去支持UGUI的一些遮罩效果呢？UGUI 的遮罩主要是使用的模板缓存。具体可以看 https://docs.unity3d.com/Manual/SL-Stencil.html

Stencil{
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
}

好了，在CSND的第一篇博客，有什么不足的地方请私信我。我及时修改
效果如图