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

你将了解的内容：

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的第一篇博客，有什么不足的地方请私信我。我及时修改
效果如图