Ugui source code analysis - Mask

One ： Preface

Mask Is the mask component , Inherited from UIBehaviour、ICanvasRaycastFilter、IMaterialModifier
The shape of its mask is made of Graphic decision , So you can use different Graphic Realize masks of different shapes
Its implementation principle is to use StencilBuffer（ Template cache ）

stay Mask Of GetModifiedMaterial Method to generate a material that will StencilBuffer The value is set to a specific value
stay MaskableGraphic Of GetModifiedMaterial In the method Make a material , This material will be taken out when rendering StencilBuffer Value , Determine whether it is equal to a specific value , Render only if they are equal

---

Two ： The principle of template caching

Mask Components are assigned to parents and children UI A special material , This material will give Image Each pixel of is marked and placed in one called Stencil Buffer In the cache , First, set the mark of each pixel of the parent to a specific value , Sub level UI When rendering, you will check whether the specific value in the coincident area is equal to this specific value , Render if equal , Otherwise, no rendering

Template caching steps ： Here are two pictures , The parent object is a green picture , The sub object is a red picture
If you don't add Mask The component first draws the color of each pixel of the green picture on the screen , Then draw each pixel color of red on the screen , Red completely covers green in the overlapping area
If you add Mask Components , In the first frame of rendering, draw the color of each pixel of the green picture on the screen at the same time Set the stencil buffer Value is set to 1, Next, draw a red picture , Before drawing, draw the stencil buffer It's worth taking out , If it is 1 Continue to draw if it is 0 It doesn't draw , Thus, the mask effect is realized

---

​​ 3、 ... and ： Source code analysis

——OnEnable

call NotifyStencilStateChanged Method to reset all mask materials , Finally called Graphic Class SetMaterialDirty Method to update the material

——OnDisable

from StencilMaterial Remove m_MaskMaterial and m_UnmaskMaterial Juxtapose to null , call NotifyStencilStateChanged Method to reset all mask materials , Finally called Graphic Class SetMaterialDirty Method to update the material

——GetModifiedMaterial

Inherited from IMaterialModifier Interface ,MaskableGraphic It also inherits this interface , Modify the template buffer value through this new material setting
It's divided into two parts
The first part ： There is only one processing Mask The situation of
First, find the root canvas of the object , Then calculate the distance between itself and the root canvas Mask The number of , If there is only one oneself Mask be stencilDepth by 0,desiredStencilBit Then for 1,desiredStencilBit Represents the reference value actually to be written to the template buffer ,
At this point through StencilMaterial.Add Get a new material （StencilOp.Replace-2,CompareFunction.Always-8） And return this material to , At this time, the reference value of the parent object template buffer is 1
Then get a new material （StencilOp.Zero-1,CompareFunction.Always-8）, This material is actually used to clear the template buffer , To avoid affecting subsequent rendering
The second part ： Handle nesting Mask The situation of
Similar to the first part , Only two parameters will be passed in at the end ：readMask（ Read mask ） and writeMask（ Write mask ）

It turns on when setting the material UNITY_UI_ALPHACLIP, This also explains why Mask On the object Graphic Corresponding Alpha Value is set to 0, All sub objects are not displayed , stay UI-Default.shader There are the following operations in ： If the transparency is too small, it will be cut

---

Four ： Hole digging mask

I understand UGUI Of Mask After realizing the principle , We can set CompareFunction Parameter implements reverse mask ,UGUI Of Image Is the designated area display ,HoleImage Yes, the specified area is not displayed

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.UI;

/// <summary>
///  Hole digging Image
/// </summary>
public class HoleImage : Image
{
    public override Material GetModifiedMaterial(Material baseMaterial)
    {
        var toUse = baseMaterial;

        if (m_ShouldRecalculateStencil)
        {
            var rootCanvas = MaskUtilities.FindRootSortOverrideCanvas(transform);
            m_StencilValue = maskable ? MaskUtilities.GetStencilDepth(transform, rootCanvas) : 0;
            m_ShouldRecalculateStencil = false;
        }

        if (m_StencilValue > 0 && !isMaskingGraphic)
        {
            var maskMat = StencilMaterial.Add(toUse, (1 << m_StencilValue) - 1, StencilOp.Keep, CompareFunction.NotEqual, ColorWriteMask.All, (1 << m_StencilValue) - 1, 0);
            StencilMaterial.Remove(m_MaskMaterial);
            m_MaskMaterial = maskMat;
            toUse = m_MaskMaterial;
        }
        return toUse;
    }
}