【UGUI原始碼分析】Unity遮罩之RectMask2D詳細解讀-有解無憂

遮罩，顧名思義是一種可以掩蓋其它元素的控制元件，常用于修改其它元素的外觀，或限制元素的形狀，比如ScrollView或者圓頭像效果都有用到遮罩功能，本系列文章希望通過閱讀UGUI原始碼的方式，來探究遮罩的實作原理，以及通過Unity不同遮罩之間實作方式的對比，找到每一種遮罩的最佳使用場合，

本文是UGUI遮罩系列的第二篇，專門解讀RectMask2D遮罩，第一篇是【UGUI原始碼分析】Unity遮罩之Mask詳細解讀，對Mask感興趣的同學可以跳轉過去看一下，后續還會有Rect Mask 2D和Mask對比分析的文章發出，敬請期待~

本文使用的原始碼與內置資源均基于Unity2019.4版本

RectMask2D

查閱Unity的官方檔案，對RectMask2D有如下定義

RectMask2D 是一個類似于(Mask) 控制元件的遮罩控制元件，遮罩將子元素限制為父元素的矩形，與標準的遮罩控制元件不同，這種控制元件有一些限制，但也有許多性能優勢，

作業流大致如下

C#：找出父物體中所有RectMask2D覆寫區域的交集
C#：所有繼承MaskGraphic的子物體組件呼叫方法設定裁剪區域（SetClipRect）傳遞給Shader
Shader：接收到矩形區域，片元著色器中判斷像素是否在矩形區域內，不在則透明度設定為0
Shader：丟棄掉alpha小于0.001的元素

RectMask2D的實作原理，概括起來就是先將那些不在其矩形范圍內的元素透明度設定為0，然后通過Shader丟棄掉透明度小于0.001的元素，接下來我們通過閱讀原始碼來查看它是如何實作這一流程的

原始碼

UGUI中定義了兩個介面，IClipper和IClippable，分別表示裁剪物件和被裁剪物件，RectMask2D實作了IClipper介面，MaskableGraphic則實作了IClippable介面，

/// <summary>
/// Interface that can be used to recieve clipping callbacks as part of the canvas update loop.
/// </summary>
public interface IClipper
{
    void PerformClipping();
}

/// <summary>
/// Interface for elements that can be clipped if they are under an IClipper
/// </summary>
public interface IClippable
{
    
    GameObject gameObject { get; }

    void RecalculateClipping();

    RectTransform rectTransform { get; }

    void Cull(Rect clipRect, bool validRect);

    void SetClipRect(Rect value, bool validRect);

    void SetClipSoftness(Vector2 clipSoftness);
}

其中IClipper的PerformClipping就是用來設定裁剪矩形的方法，在探討它的具體實作前，我們先來看下這個方法是何時被呼叫的

CanvasUpdateRegistry是UI控制元件注冊自己需要重建的地方，在每次畫布開始繪制前會呼叫CanvasUpdateRegistry的PerformUpdate方法來重建所有注冊的控制元件

在這之中也會觸發ClipperRegistry的Cull方法，ClipperRegistry是所有IClipper注冊的地方，在ClipperRegistry的Cull方法中會呼叫所有注冊者的PerformClipping方法

public class ClipperRegistry
{
    // ...

    readonly IndexedSet<IClipper> m_Clippers = new IndexedSet<IClipper>();

    /// <summary>
    /// Perform the clipping on all registered IClipper
    /// </summary>
    public void Cull()
    {
        for (var i = 0; i < m_Clippers.Count; ++i)
        {
            m_Clippers[i].PerformClipping();
        }
    }

    // ...
}

每個RectMask2D都會在OnEnable中將自己注冊到ClipperRegistry中

protected override void OnEnable()
{
    base.OnEnable();
    m_ShouldRecalculateClipRects = true;
    ClipperRegistry.Register(this);  // 注冊自己
    MaskUtilities.Notify2DMaskStateChanged(this);
}

然后我們來看RectMask2D的PerformClipping具體實作

public virtual void PerformClipping()
{
    // ...
    
    // if the parents are changed
    // or something similar we
    // do a recalculate here
    if (m_ShouldRecalculateClipRects)
    {
        MaskUtilities.GetRectMasksForClip(this, m_Clippers);
        m_ShouldRecalculateClipRects = false;
    }
    
    // get the compound rects from
    // the clippers that are valid
    bool validRect = true;
    Rect clipRect = Clipping.FindCullAndClipWorldRect(m_Clippers, out validRect);

    // If the mask is in ScreenSpaceOverlay/Camera render mode, its content is only rendered when its rect
    // overlaps that of the root canvas.
    RenderMode renderMode = Canvas.rootCanvas.renderMode;
    bool maskIsCulled =
        (renderMode == RenderMode.ScreenSpaceCamera || renderMode == RenderMode.ScreenSpaceOverlay) &&
        !clipRect.Overlaps(rootCanvasRect, true);

    if (maskIsCulled)
    {
        // Children are only displayed when inside the mask. If the mask is culled, then the children
        // inside the mask are also culled. In that situation, we pass an invalid rect to allow callees
        // to avoid some processing.
        clipRect = Rect.zero;
        validRect = false;
    }

    if (clipRect != m_LastClipRectCanvasSpace)
    {
        foreach (IClippable clipTarget in m_ClipTargets)
        {
            clipTarget.SetClipRect(clipRect, validRect);
        }

        foreach (MaskableGraphic maskableTarget in m_MaskableTargets)
        {
            maskableTarget.SetClipRect(clipRect, validRect);
            maskableTarget.Cull(clipRect, validRect);
        }
    }
    // ...
    UpdateClipSoftness();
}

通過MaskUtilities.GetRectMasksForClip沿著層級結構往上找到所有的RectMask2D，然后利用Clipping.FindCullAndClipWorldRect計算這些RectMask2D所表示的矩形的交集，求出一個重疊矩形
遍歷所有的被裁減/被遮掩物件，通過SetClipRect為它們設定裁剪矩形，這些被裁剪物件是通過RectMask2D的AddClippable方法注冊進來的

值得一提的是，在方法的末尾還呼叫了UpdateClipSoftness，這個方法比較簡單，就是再遍歷所有的被裁減/被遮掩物件一遍，呼叫它們的SetClipSoftness方法

public virtual void UpdateClipSoftness()
{
    // ...
    foreach (IClippable clipTarget in m_ClipTargets)
    {
        clipTarget.SetClipSoftness(m_Softness);
    }

    foreach (MaskableGraphic maskableTarget in m_MaskableTargets)
    {
        maskableTarget.SetClipSoftness(m_Softness);
    }
}

實作裁剪的關鍵就在于SetClipRect和SetClipSoftness的實作了，對于MaskableGraphic，它默認實作的SetClipRect和SetClipSoftness方法如下所示

public virtual void SetClipRect(Rect clipRect, bool validRect)
{
    if (validRect)
        canvasRenderer.EnableRectClipping(clipRect);
    else
        canvasRenderer.DisableRectClipping();
}

public virtual void SetClipSoftness(Vector2 clipSoftness)
{
    canvasRenderer.clippingSoftness = clipSoftness;
}

其中canvasRenderer是掛在物件上的CanvasRenderer組件，由于Unity并未將CanvasRenderer開源，所以其內部實作我們無從知曉，根據Unity API檔案可知，EnableRectClipping的作用是啟用矩形裁剪，將對位于指定矩形外的幾何形狀進行裁剪（不渲染），DisableRectClipping對應的就是禁用該裁剪，說明了功能，但沒有解釋原理，通過查閱資料，得知是使用Shader實作的矩形裁剪，查看UI默認使用的Shader是UI/Default，這是Unity的內置Shader，原始碼可以在Unity官網下載，下載時選擇"Built in shaders"

UI-Default.shader的部分原始碼如下所示

Shader "UI/Default"
{
    Properties
    {
        // ...
        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    SubShader
    {
        Pass
        {
            Name "Default"
        CGPROGRAM
            // ...
            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
                half4  mask : TEXCOORD2;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            float _UIMaskSoftnessX;
            float _UIMaskSoftnessY;

            v2f vert(appdata_t v)
            {
                v2f OUT;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                float4 vPosition = UnityObjectToClipPos(v.vertex);
                OUT.worldPosition = v.vertex;
                OUT.vertex = vPosition;

                float2 pixelSize = vPosition.w;
                pixelSize /= float2(1, 1) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));

                float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
                float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
                OUT.texcoord = TRANSFORM_TEX(v.texcoord.xy, _MainTex);
                OUT.mask = half4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));

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

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = IN.color * (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);

                #ifdef UNITY_UI_CLIP_RECT
                half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
                color.a *= m.x * m.y;
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

                return color;
            }
        ENDCG
        }
    }
}

_ClipRect就是用來接收CanvasRenderer傳遞進來的裁剪矩形的
UNITY_UI_CLIP_RECT是控制是否開啟矩形裁剪的宏，經過測驗驗證，EnableRectClipping會定義宏，而DisableRectClipping會禁用該宏的定義

有些同學可能會有疑惑，上面的代碼和現在網上搜索到的同樣講解遮罩的文章所展示的的代碼有些出入，一般都如下所示，這是老版本Unity所采用的代碼，主要邏輯就是通過UnityGet2DClipping判斷片元是否在矩形內，如果不在則回傳0，否則回傳1，不在矩形內的片元透明度將被設定為0，然后通過clip將透明度小于0.001的片元丟棄掉

#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#endif

#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif

inline float UnityGet2DClipping (in float2 position, in float4 clipRect)
{
    float2 inside = step(clipRect.xy, position.xy) * step(position.xy, clipRect.zw);
    return inside.x * inside.y;
}

而Unity2019.4版本實作類似邏輯的代碼如下所示，在實作矩形裁剪演算法的同時，還新增了對Softness柔軟度的處理

// vs
OUT.mask = half4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));

// fs
#ifdef UNITY_UI_CLIP_RECT
half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);  
color.a *= m.x * m.y;
#endif

首先來看新的演算法是如何實作矩形裁剪的

判斷點是否在矩形內，主要是依據_ClipRect和IN.mask.xy，_ClipRect.xy是矩形左下角坐標，_ClipRect.zw是矩形右上角坐標，_ClipRect.zw - _ClipRect.xy就是一條從左下角指向右上角的向量，記為A，mask.xy經過如下所示代碼進行轉換，表示的是點到矩形左下角的向量B與點到矩形右上角的向量C之和，記為D
```
v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw
// 可以看做是
(v.vertex.xy - clampedRect.xy) + (v.vertex.xy - clampedRect.zw)
```
以點在矩形外為例，對應向量情況如下圖所示，A - D得到的向量的xy分量，一定有一個是負值，像下圖這種情況，A的x分量是小于D的x分量的，這很好理解，因為如果一個點在矩形外的話，它要么在整個矩形的左側或右側，要么在上側或下側，點到矩形左下角和右上角的向量在x或y方向上一定有一個是同向的，在矩形的左側和右側時，點到矩形左下角和右上角的向量x方向上距離之和一定是大于矩形的寬度的，在矩形的上側和下側時，點到矩形左下角和右上角的向量y方向上距離之和一定是大于矩形的高度的，
因此如果點在矩形外，saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy))得到的值一定小于0，saturate是把對應值限制到[0,1]之間，即小于0的值均為0，大于1的值均為1，從而將在矩形外的片元透明度設定為0，實作裁剪效果
如果點在矩形內，點到矩形左下角和右上角的向量一定是反向的，兩個向量相加得到的向量D，它的xy分量一定小于矩形的寬度和高度，所以saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy))得到的值一定是正值，在矩形內的片元透明度大于0，可以顯示出來

Unity2019.4的矩形裁剪演算法和老版本不同的一個原因應該就是為了能夠對Softness進行處理，我們再來看看RectMask2D的Softness是起什么作用的，又是如何起作用的

代碼中_UIMaskSoftnessX，_UIMaskSoftnessY的值一定是大于0的，在RectMask2D的softness屬性的set訪問器中有做限制，因此在計算透明度的時候乘上IN.mask.zw不會改變結果的正負值，小于0的仍然是看不到，影響的只是能看到的片元的透明度
```
public Vector2Int softness
{
    get { return m_Softness;  }
    set
    {
        m_Softness.x = Mathf.Max(0, value.x);
        m_Softness.y = Mathf.Max(0, value.y);
        MaskUtilities.Notify2DMaskStateChanged(this);
    }
}
```
_UIMaskSoftnessX，_UIMaskSoftnessY的值越大，IN.mask.zw的值越小，當softness的值不為0時，會起到降低透明度的作用
上面也提到，當點在矩形內時，點到矩形左下角和右上角的向量是反向的，而點越靠近矩形的中心，抵消的越徹底，兩個向量之和的xy分量越小，saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw)計算得到的透明度值越大，

因此越靠近矩形中心的片元透明度越高，透明度由內到外逐漸遞減，呈現一種緩慢變透明的遮罩效果，更加柔和，如下圖所示，左側是未設定softness的效果，右側是設定softness為(10, 10)的效果

參考

原始碼探析Mask、Rect Mask2D與Sprite Mask的異同

作者：iwiniwin 出處：http://www.cnblogs.com/iwiniwin/ 本文為博主原創文章，轉載請附上原文出處鏈接和本宣告，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296252.html

標籤：其他

上一篇：虛幻藍圖學習筆記制作第一人稱(實作功能:撿槍,換槍,扔槍,仍炸彈等)（一）

下一篇：Unity遮罩之Mask、RectMask2D與Sprite Mask適用場景分析