本文分享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
上, 即可完成所有的工作, 如图:
当然, 也可以通过调节圆形遮罩边缘的透明度来进一步优化边缘的效果. 只要明白是使用透明度混合来解决边缘锯齿问题即可.希望对大家有所帮助.