美文网首页
Unity一种更高效的遮罩实现

Unity一种更高效的遮罩实现

作者: sylo | 来源:发表于2019-11-02 09:38 被阅读0次

游戏开发过程中难免会遇到要将矩形图片切成圆形的需求,但是Unity原生Mask组件效率低下,如果某个界面有大量这样的需求,我们就不得不实现一种更高效的Mask遮罩。

原生Mask组件的缺陷

  • 基于Stencil Buffer实现,本身会额外占用2个Draw Call,一个设置Stencil Buffer,一个还原Stencil Buffer
  • 严重的锯齿
  • 不利于合批,Mask内的元素无法与Mask外的元素合批

解决方案

新的方案我们需要解决原生Mask的问题,不增加Draw Call,边缘柔和。这里我们采用自定义Shader,主图与遮罩图进行Alpha混合方案。

实现效果如下:


效果

因为要两种图片进行混合,所以我们的Shader要额外传入一张Mask贴图,然后在FragmentShader中将两种贴图的Alpha值相乘,如果Mask贴图的Alpha值为0,最终颜色的Alpha值为0,相当于剪裁掉了,Mask贴图的Alpha值为1,则保持原样,而0-1的中间值则可以很好的过渡,使剪裁边缘更加柔和。核心代码很简单:

fixed4 frag(v2f IN) : SV_Target
{
    half4 color = tex2D(_MainTex, IN.texcoord);
    half4 maskColor = tex2D(_Mask, IN.texcoord);

    color.a *= maskColor.a;
    return color;
}

到这里,其实还有一点小小的问题,Main Texture跟Mask Texture共用了一套uv即IN.texcoord,如果Main Texture是散图的话没有问题,如果最后打包成了图集,问题就出现了,Mask的uv不对。所以对于Mask贴图我们得单独采用一套uv。

对于顶点属性的修改,Unity提供了一个基类BaseMeshEffect,我们只需要继承BaseMeshEffect实现ModifyMesh接口完成Mask uv的计算。完整的代码如下:

C#代码:

using UnityEngine;
using UnityEngine.Sprites;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
public class MaskImage : BaseMeshEffect
{
    private Image _image;

    protected override void Awake()
    {
        base.Awake();

        _image = GetComponent<Image>();
    }

    public override void ModifyMesh(VertexHelper vh)
    {
        if (!IsActive())
            return;

        var overrideSprite = _image.overrideSprite;
        var uv = overrideSprite != null ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero;
        var uvWidth = uv.z - uv.x;
        var uvHeight = uv.w - uv.y;

        if (uvWidth == 0 || uvHeight == 0)
            return;

        var vertCount = vh.currentVertCount;
        var vert = new UIVertex();
        for (var i = 0; i < vertCount; ++i)
        {
            vh.PopulateUIVertex(ref vert, i);
            vert.uv1.x = (vert.uv0.x - uv.x) / uvWidth;
            vert.uv1.y = (vert.uv0.y - uv.y) / uvHeight;
            vh.SetUIVertex(vert, i);
        }
    }
}

Shader代码:

Shader "Custom/ImageMask"
{
    Properties
    {
        [PerRendererData] _MainTex ("Texture", 2D) = "white" {}
        _Mask ("Mask", 2D) = "white" {}
        _Color ("Tint", Color) = (1, 1, 1, 1)
        
        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }
    SubShader
    {
        Tags
        {
            "Queue"="Transparent" 
            "IgnoreProjector"="True" 
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAltas"="True"
        }
        
        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }
        
        Cull Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"
            
            #pragma multi_compile __ UNITY_UI_ALPHACLIP

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

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                float2 texcoord1 : TEXCOORD1;
                float4 worldPosition : TEXCOORD2;
            };
            
            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            
            v2f vert(appdata_t IN)
            {
                v2f OUT;

                OUT.worldPosition = IN.vertex;
                OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

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

            sampler2D _MainTex;
            sampler2D _Mask;

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
                half4 maskColor = tex2D(_Mask, IN.texcoord1);
                
                color.a *= maskColor.a;
                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                
                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

                return color;
            }
            ENDCG
        }
    }
}

最后,我们需要在上层Canvas设置一下,传入第二套uv


Additional Shader Channels

相关文章

网友评论

      本文标题:Unity一种更高效的遮罩实现

      本文链接:https://www.haomeiwen.com/subject/fcscbctx.html