principle
Mask
1. Mask will give Image a special material (GetModiferMaterial), this material will mark each pixel of Image, and store the marking result in a stencil buffer (this buffer is called Stencil Buffer) 2. When the sub-level UI
performs When rendering, it will check the mark in the Stencil Buffer. If there is a mark in the currently covered area (that is, the area is within the coverage of the Image), it will be rendered, otherwise it will not be rendered.
RectMask2D
1.C# layer: Find the intersection of all RectMask2D coverage areas in the parent object (FindCullAndClipWorldRect)
2.C# layer: All child object components that inherit MaskGraphic call the method to set the clipping area (SetClipRect) and pass it to Shader
3.Shader layer: Receive the rectangle Area_ClipRect, in the fragment shader, it is judged whether the pixel is in the rectangular area, if not, the transparency is set to 0 (UnityGet2DClipping) 4. Shader
layer: Discard elements with alpha less than 0.001 (clip (color.a - 0.001))
Mask source code analysis
First, Mask calls MaskUtilities.NotifyStencilStateChanged(this);
to notify all components that inherit the IMaskable interface to calculate the Mask drawing,
which is to call the IMaskable.RecalculateMasking() method
StencilMaterial is a tool class for dynamically modifying and customizing Material
RectMask2D source code analysis
RectMask2D implements the PerformClipping function of the IClipper interface, which can be used to receive part of the update cycle of the clipping canvas callback.
The Image of the child node implements the ILippable interface clipping interface
Call MaskUtilities.Notify2DMaskStateChanged() to traverse all child nodes, trigger OnCullingChanged, and finally trigger Canvas.willRenderCanvases() to call PerformUpdate
when the canvas is Rebuild
The PerformUpdate function triggers Cull
to trigger PerformClipping in Mask2D.cs after calling the Cull clipping function
After setting the clipping area of the shader, call the Cull function to clip
in conclusion
Advantages and disadvantages of Mask Multiple DrawCall, but multiple Masks can be batched together
Mask will have two more DrawCalls. One is that Mask itself will create a shader to mark the pixels of its own Image to the stencil buffer StencilBuff, resulting in a DrawCall. The other is to modify the shader parameters of the child nodes after the Mask has traversed all the child nodes. The clipping parameters will reset the cached StencilBuff at the end, resulting in another DrawCall with
multiple Masks. If the conditions for batching are met (cannot be overlapped), that is, the image of the Mask component itself is the same, it can be batched (that is, the Mask is first batched). The same for Mask After traversing the tail, if it can be batched, it will be batched,
but the first Mask cannot be batched with another Mask.
The child nodes in multiple Masks will be batched if they can be batched.
The Mask node can be used as the BottonUI of the child node (that is, the response UI)
Advantages and disadvantages of Mask2D There is no additional DrawCall, but multiple images in Mask2D cannot be batched
Mask2D does not rely on the image component itself. The component will not generate additional DrawCall
, but the images under its node cannot be batched with those outside the node. They are separated, and
multiple Mask2Ds cannot be batched.