Unity中使用另一个遮罩方案解决Mask组件的锯齿现象

在上一篇文章中, 细心的同学可能看到了, 放大头像后可以看到明显的锯齿, 如图:

这是因为模板测试是按照像素来测试, 要么通过, 要么不通过, 不通过就不给渲染, 那些过渡的地方因为不透明度比较高, 混合的效果与没有混合差不多.

我们使用另一个思路来制作遮罩: 绘制图片时, 从遮罩纹理中采样透明度来修改片元的透明度, 遮罩的圆形之外的部分透明度为0, 该过度的地方也有不同透明度, 这样就能正确混合也能正确起到遮罩的效果.

与上篇文章一样, 我们需要准备两张图片, 一张圆形的半透图片当做遮罩, 一张头像图片. 如图两张图片:

创建一个材质和一个shader(直接复制Unity的UI-Default做修改), 如下:

• CustomMask2.shader
• Object2.mat

对应的shader代码为:

Shader "Custom/CustomMask2"
{
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_MaskTex ("Mask Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1,1,1,1)

		_ColorMask ("Color Mask", Range(0, 15)) = 15

		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
	}

	SubShader
	{
		Tags
		{
			"Queue"="Transparent"
			"IgnoreProjector"="True"
			"RenderType"="Transparent"
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest [unity_GUIZTestMode]
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask [_ColorMask]

		Pass
		{
			Name "CustomMask2"
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 2.0

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"

			#pragma multi_compile __ UNITY_UI_ALPHACLIP

			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				float2 texcoord  : TEXCOORD0;
				float4 worldPosition : TEXCOORD1;
				UNITY_VERTEX_OUTPUT_STEREO
			};

			fixed4 _Color;
			fixed4 _TextureSampleAdd;
			float4 _ClipRect;

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				UNITY_SETUP_INSTANCE_ID(IN);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
				OUT.worldPosition = IN.vertex;
				OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

				OUT.texcoord = IN.texcoord;

				OUT.color = IN.color * _Color;
				return OUT;
			}

			sampler2D _MainTex;
			sampler2D _MaskTex;

			float _OneMinusSaturability;

			fixed4 frag(v2f IN) : SV_Target
			{
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);
				if (IN.color.r < 0.0001 && IN.color.g < 0.0001 && IN.color.b > 0.0001 && IN.color.b < 0.004)
				{
					float gray = dot(color.rgb, float3(0.2125, 0.7154, 0.0721));
					color.rgb = float3(gray, gray, gray);
				}
				else
				{
					color *= IN.color;

					if (_OneMinusSaturability > 0.05)
					{
						float gray = dot(color.rgb, float3(0.2125, 0.7154, 0.0721));
						color.rgb = lerp(float3(gray, gray, gray), color.rgb, 1 - _OneMinusSaturability);
					}
				}

				color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				color.a *= tex2D(_MaskTex, IN.texcoord).a;
				
				#ifdef UNITY_UI_ALPHACLIP
				clip (color.a - 0.001);
				#endif

				return color;
			}
		ENDCG
		}
	}
}

与之前的shader相比, 我们删掉了模板测试相关的配置, 添加了一个纹理_MaskTex ("Mask Texture", 2D) = "white" {}, 并增加了一行用来混合透明度的代码color.a *= tex2D(_MaskTex, IN.texcoord).a;.

然后构建两个个RawImage, 大小都设置为120x120, 一个用于显示原图, 一个用于遮罩头像, 如图:

给遮罩头像设置好材质和shader后, 将圆形遮罩的纹理拖到Mask Texture上, 即可完成所有的工作, 如图:

当然, 也可以通过调节圆形遮罩边缘的透明度来进一步优化边缘的效果. 只要明白是使用透明度混合来解决边缘锯齿问题即可.希望对大家有所帮助.