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

本文分享unity中使用另一个遮罩方案解决mask组件的锯齿现象动机

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

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

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

过程和效果

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

创建一个材质和一个shader(直接复制unity的ui-default做修改), 如下:

custommask2.shaderobject2.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 offlighting offzwrite offztest [unity_guiztestmode]blend srcalpha oneminussrcalphacolormask [_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_alphaclipstruct 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.b  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_alphaclipclip (color.a - 0.001);#endifreturn color;}endcg}}}

与之前的shader相比, 我们删掉了模板测试相关的配置, 添加了一个纹理_masktex (“mask texture”, 2d) = “white” {}, 并增加了一行用来混合透明度的代码color.a *= tex2d(_masktex, in.texcoord).a;.

然后构建两个个rawimage, 大小都设置为120x120, 一个用于显示原图, 一个用于遮罩头像, 如图: 给遮罩头像设置好材质和shader后, 将圆形遮罩的纹理拖到mask texture上, 即可完成所有的工作, 如图:

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