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

     Unity中使用另一个遮罩解决Mask组件的锯齿现象                  本文分享Unity中使用另一个遮罩方案解决Mask组件的锯齿现象动机在上一篇文章中,细心的同学可能看到了,放大头像后可以看到明显的锯齿,如图:这是因为模板测试是按照像素来测试,要么通过,要么不通过,不通过就不给渲染,那些过渡的地方因为不透明度比较高,混合的效果与没有混合差不多.我们使用另一个思路来制作遮罩:绘制图片时,从遮罩纹理中采样透明度来修改片元的透明度,遮罩的圆形之外的部分透明度为0,该过度的地方也有不同透明度,这样就能正确混合也能正确起到遮罩的效果.过程和效果与上篇文章一样,我们需要准备两张图片,一张圆形的半透图片当做遮罩,一张头像图片.如图两张图片:创建一个材质和一个shader(直接复制Unity的UI-Default做修改),如下:CustomMask2.shaderObject2.mat对应的shader代码为:Shader"Custom/CustomMask2"{Properties{[PerRendererData]_MainTex("SpriteTexture",2D)="white"{}_MaskTex("MaskTexture",2D)="white"{}_Color("Tint",Color)=(1,1,1,1)_ColorMask("ColorMask",Range(0,15))=15[Toggle(UNITY_UI_ALPHACLIP)]_UseUIAlphaClip("UseAlphaClip",Float)=0}SubShader{Tags{"Queue"="Transparent""IgnoreProjector"="True""RenderType"="Transparent""PreviewType"="Plane""CanUseSpriteAtlas"="True"}CullOffLightingOffZWriteOffZTest[unity_GUIZTestMode]BlendSrcAlphaOneMinusSrcAlphaColorMask[_ColorMask]Pass{Name"CustomMask2"CGPROGRAM#pragmavertexvert#pragmafragmentfrag#pragmatarget2.0#include"UnityCG.cginc"#include"UnityUI.cginc"#pragmamulti_compile__UNITY_UI_ALPHACLIPstructappdata_t{float4vertex:POSITION;float4color:COLOR;float2texcoord:TEXCOORD0;UNITY_VERTEX_INPUT_INSTANCE_ID};structv2f{float4vertex:SV_POSITION;fixed4color:COLOR;float2texcoord:TEXCOORD0;float4worldPosition:TEXCOORD1;UNITY_VERTEX_OUTPUT_STEREO};fixed4_Color;fixed4_TextureSampleAdd;float4_ClipRect;v2fvert(appdata_tIN){v2fOUT;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;returnOUT;}sampler2D_MainTex;sampler2D_MaskTex;float_OneMinusSaturability;fixed4frag(v2fIN):SV_Target{half4color=(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){floatgray=dot(color.rgb,float3(0.2125,0.7154,0.0721));color.rgb=float3(gray,gray,gray);}else{color*=IN.color;if(_OneMinusSaturability>0.05){floatgray=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;#ifdefUNITY_UI_ALPHACLIPclip(color.a-0.001);#endifreturncolor;}ENDCG}}}与之前的shader相比,我们删掉了模板测试相关的配置,添加了一个纹理_MaskTex("MaskTexture",2D)="white"{},并增加了一行用来混合透明度的代码color.a*=tex2D(_MaskTex,IN.texcoord).a;.然后构建两个个RawImage,大小都设置为120x120,一个用于显示原图,一个用于遮罩头像,如图:给遮罩头像设置好材质和shader后,将圆形遮罩的纹理拖到MaskTexture上,即可完成所有的工作,如图:当然,也可以通过调节圆形遮罩边缘的透明度来进一步优化边缘的效果.只要明白是使用透明度混合来解决边缘锯齿问题即可.希望对大家有所帮助. -全文完-