【Unity源码学习】遮罩：Mask与Mask2D

林勇孝

Mask

UGUI的裁切分为Mask和Mask2D两种
我们先来看Mask。它可以给Mask指定一张裁切图裁切子元素。我们给Mask指定了一张圆形图片，那么子节点下的元素都会被裁切在这个圆形区域中。
Mask的原理就是利用了StencilBuffer(模板缓冲)，它里面记录了一个ID，被裁切元素也有StencilBuffer(模板缓冲)的ID，并且和Mask里的比较，相同才会被渲染。
StencilBuffer

看起来好像挺简单的，那么背后的功臣——StencilBuffer，究竟是何方神圣呢？
简单来说，gpu为每个像素点分配一个称之为stencil buffer的1字节大小的内存区域，这个区域可以用于保存或丢弃像素的目的。我们举个简单的例子来说明这个缓冲区的本质。
如上图所示，我们的场景中有1个红色图片和1个绿色图片，黑框范围内是它们重叠部分。一帧渲染开始，首先绿色图片将它覆盖范围的每个像素颜色“画”在屏幕上，然后红色图片也将自己的颜色画在屏幕上，就是图中的效果了。
这种情况下，重叠区域内红色完全覆盖了绿色。接下来，我们为绿色图片添加Mask组件。于是变成了这样：
此时一帧渲染开始，首先绿色图片将它覆盖范围都涂上绿色，同时将每个像素的stencil buffer值设置为1，此时屏幕的stencil buffer分布如下：
然后轮到红色图片“绘画”，它在涂上红色前，会先取出这个点的stencil buffer值判断，在黑框范围内，这个值是1，于是继续画红色；在黑框范围外，这个值是0，于是不再画红色，最终达到了图中的效果。
所以从本质上来讲，stencil buffer是为了实现多个“绘画者”之间互相通信而存在的。由于gpu是流水线作业，它们之间无法直接通信，所以通过这种共享数据区的方式来传递消息，从而达到一些“不可告人”的目的。
unity shader

理解了stencil的原理，我们再来看下它的语法。在unity shader中定义的语法格式如下
（中括号内是可以修改的值，其余都是关键字）：

1. Stencil
2. {
3.         Ref [_Stencil]//Ref表示要比较的值；0-255
4.         Comp [_StencilComp]//Comp表示比较方法（等于/不等于/大于/小于等）；
5.         Pass [_StencilOp] //Pass/Fail表示当比较通过/不通过时对stencil buffer做什么操作
6.                           //（保留Keep/替换Replace/置0 Zero/增加IncrementSaturate/减少DecrementSaturate等）；
7.         ReadMask [_StencilReadMask]//ReadMask/WriteMask表示取stencil buffer的值时用的mask（即可以忽略某些位）；
8.         WriteMask [_StencilWriteMask]
9. }

复制代码

翻译一下就是：将stencil buffer的值与ReadMask与运算，然后与Ref值进行Comp比较，结果为true时进行Pass操作，否则进行Fail操作，操作值写入stencil buffer前先与WriteMask与运算。
UI/Default

最后，我们来看下Unity渲染UI组件时默认使用的Shader——UI/Default（略去了一些不相关内容）：

1. Shader "UI/Default"
2. {
3.         Properties
4.         {
5.                 [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
6.                 _Color ("Tint", Color) = (1,1,1,1)
7.                
8.                 _StencilComp ("Stencil Comparison", Float) = 8
9.                 _Stencil ("Stencil ID", Float) = 0
10.                 _StencilOp ("Stencil Operation", Float) = 0
11.                 _StencilWriteMask ("Stencil Write Mask", Float) = 255
12.                 _StencilReadMask ("Stencil Read Mask", Float) = 255
14.                 _ColorMask ("Color Mask", Float) = 15
16.                 [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
17.         }
18. ···
19. }

复制代码

以及我们代码中调用的StencilMaterial.Add的内部实现

1. StencilMaterial.cs
2.         public static Material Add(Material baseMat, int stencilID, StencilOp operation, CompareFunction compareFunction, ColorWriteMask colorWriteMask, int readMask, int writeMask)
3.         {
4. ···省略
5.             var newEnt = new MatEntry();
6.             newEnt.count = 1;
7.             newEnt.baseMat = baseMat;
8.             newEnt.customMat = new Material(baseMat);
9.             newEnt.customMat.hideFlags = HideFlags.HideAndDontSave;
10.             newEnt.stencilId = stencilID;
11.             newEnt.operation = operation;
12.             newEnt.compareFunction = compareFunction;
13.             newEnt.readMask = readMask;
14.             newEnt.writeMask = writeMask;
15.             newEnt.colorMask = colorWriteMask;
16.             newEnt.useAlphaClip = operation != StencilOp.Keep && writeMask > 0;
18.             newEnt.customMat.name = string.Format("Stencil Id:{0}, Op:{1}, Comp:{2}, WriteMask:{3}, ReadMask:{4}, ColorMask:{5} AlphaClip:{6} ({7})", stencilID, operation, compareFunction, writeMask, readMask, colorWriteMask, newEnt.useAlphaClip, baseMat.name);
20.             newEnt.customMat.SetInt("_Stencil", stencilID);
21.             newEnt.customMat.SetInt("_StencilOp", (int)operation);
22.             newEnt.customMat.SetInt("_StencilComp", (int)compareFunction);
23.             newEnt.customMat.SetInt("_StencilReadMask", readMask);
24.             newEnt.customMat.SetInt("_StencilWriteMask", writeMask);
25.             newEnt.customMat.SetInt("_ColorMask", (int)colorWriteMask);
27.             // left for backwards compatability
28.             if (newEnt.customMat.HasProperty("_UseAlphaClip"))
29.                 newEnt.customMat.SetInt("_UseAlphaClip", newEnt.useAlphaClip ? 1 : 0);
31.             if (newEnt.useAlphaClip)
32.                 newEnt.customMat.EnableKeyword("UNITY_UI_ALPHACLIP");
33.             else
34.                 newEnt.customMat.DisableKeyword("UNITY_UI_ALPHACLIP");
36.             m_List.Add(newEnt);
37.             return newEnt.customMat;
38.         }

复制代码

了解了stencil 我们来看mask的源码实现

由于裁切需要同时裁切图片和文本，所以Image和Text都会派生自MaskableGraphic。
如果要让Mask节点下的元素裁切，那么它需要占一个DrawCall，因为这些元素需要一个新的Shader参数来渲染。
如下代码所示，MaskableGraphic实现了IMaterialModifier接口， 而StencilMaterial.Add()就是设置Shader中的裁切参数。

1. MaskableGraphic.cs
2.         public virtual Material GetModifiedMaterial(Material baseMaterial)
3.         {
4.             var toUse = baseMaterial;
6.             if (m_ShouldRecalculateStencil)
7.             {
8.                 var rootCanvas = MaskUtilities.FindRootSortOverrideCanvas(transform);
9.                 //获取模板缓冲值
10.                 m_StencilValue = maskable ? MaskUtilities.GetStencilDepth(transform, rootCanvas) : 0;
11.                 m_ShouldRecalculateStencil = false;
12.             }
14.             // if we have a enabled Mask component then it will
15.             // generate the mask material. This is an optimisation
16.             // it adds some coupling between components though :(
17.             Mask maskComponent = GetComponent<Mask>();
18.             if (m_StencilValue > 0 && (maskComponent == null || !maskComponent.IsActive()))
19.             {
20.                 //设置模板缓冲值，并且设置在该区域内的显示，不在的裁切掉
21.                 var maskMat = StencilMaterial.Add(toUse,  // Material baseMat
22.                     (1 << m_StencilValue) - 1, // 参考值
23.                     StencilOp.Keep, // 不修改模板缓存
24.                     CompareFunction.Equal,  // 相等通过测试
25.                     ColorWriteMask.All, // ColorMask
26.                     (1 << m_StencilValue) - 1,// Readmask
27.                     0);//  WriteMas
28.                 StencilMaterial.Remove(m_MaskMaterial);
29.                 //并且更换新的材质
30.                 m_MaskMaterial = maskMat;
31.                 toUse = m_MaskMaterial;
32.             }
33.             return toUse;
34.         }

复制代码

Image对象在进行Rebuild()时，UpdateMaterial()方法中会获取需要渲染的材质，并且判断当前对象的组件是否有继承IMaterialModifier接口，如果有那么它就是绑定了Mask脚本，接着调用上面提到的GetModifiedMaterial方法修改材质上Shader的参数。

1. Image.cs
2.    public virtual void Rebuild(CanvasUpdate update)
3.     {
4.         if (canvasRenderer.cull)
5.             return;
6.         switch (update)
7.         {
8.             case CanvasUpdate.PreRender:
9.                 if (m_VertsDirty)
10.                 {
11.                     //开始更新网格
12.                     UpdateGeometry();
13.                     m_VertsDirty = false;
14.                 }
15.                 if (m_MaterialDirty)
16.                 {
17.                     //开始更新材质
18.                     UpdateMaterial();
19.                     m_MaterialDirty = false;
20.                 }
21.                 break;
22.         }
23.     }
24.     public virtual Material materialForRendering
25.     {
26.         get
27.         {
28.             //遍历UI中的每个Mask组件
29.             var components = ListPool<Component>.Get();
30.             GetComponents(typeof(IMaterialModifier), components);
31.             //并且更新每个Mask组件的模板缓冲材质
32.             var currentMat = material;
33.             for (var i = 0; i < components.Count; i++)
34.                 currentMat = (components[i] as IMaterialModifier).GetModifiedMaterial(currentMat);
35.             ListPool<Component>.Release(components);
36.             //返回新的材质，用于裁切
37.             return currentMat;
38.         }
39.     }
40.     protected virtual void UpdateMaterial()
41.     {
42.         if (!IsActive())
43.             return;
44.         //更新刚刚替换的新的模板缓冲的材质
45.         canvasRenderer.materialCount = 1;
46.         canvasRenderer.SetMaterial(materialForRendering, 0);
47.         canvasRenderer.SetTexture(mainTexture);
48.     }

复制代码

因为模板缓冲可以提供模板的区域，也就是前面设置的圆形图片，所以最终会将元素裁切到这个圆心图片中。
Mask.GetModifiedMaterial

1. Mask.cs        
2.         /// Stencil calculation time!
3.         public virtual Material GetModifiedMaterial(Material baseMaterial)
4.         {
5.             if (!MaskEnabled())
6.                 return baseMaterial;
8.             var rootSortCanvas = MaskUtilities.FindRootSortOverrideCanvas(transform);
9.             var stencilDepth = MaskUtilities.GetStencilDepth(transform, rootSortCanvas);
10.             // stencil只支持最大深度为8的遮罩
11.             if (stencilDepth >= 8)
12.             {
13.                 Debug.LogError("Attempting to use a stencil mask with depth > 8", gameObject);
14.                 return baseMaterial;
15.             }
17.             int desiredStencilBit = 1 << stencilDepth;
19.             // if we are at the first level...
20.             // we want to destroy what is there
21.             if (desiredStencilBit == 1)
22.             {
23.                 var maskMaterial = StencilMaterial.Add(baseMaterial, 1, StencilOp.Replace, CompareFunction.Always, m_ShowMaskGraphic ? ColorWriteMask.All : 0);
24.                 StencilMaterial.Remove(m_MaskMaterial);
25.                 m_MaskMaterial = maskMaterial;
27.                 var unmaskMaterial = StencilMaterial.Add(baseMaterial, 1, StencilOp.Zero, CompareFunction.Always, 0);
28.                 StencilMaterial.Remove(m_UnmaskMaterial);
29.                 m_UnmaskMaterial = unmaskMaterial;
30.                 graphic.canvasRenderer.popMaterialCount = 1;
31.                 graphic.canvasRenderer.SetPopMaterial(m_UnmaskMaterial, 0);
33.                 return m_MaskMaterial;
34.             }
36.             //otherwise we need to be a bit smarter and set some read / write masks
37.             var maskMaterial2 = StencilMaterial.Add(baseMaterial, desiredStencilBit | (desiredStencilBit - 1), StencilOp.Replace, CompareFunction.Equal, m_ShowMaskGraphic ? ColorWriteMask.All : 0, desiredStencilBit - 1, desiredStencilBit | (desiredStencilBit - 1));
38.             StencilMaterial.Remove(m_MaskMaterial);
39.             m_MaskMaterial = maskMaterial2;
41.             graphic.canvasRenderer.hasPopInstruction = true;
42.             var unmaskMaterial2 = StencilMaterial.Add(baseMaterial, desiredStencilBit - 1, StencilOp.Replace, CompareFunction.Equal, 0, desiredStencilBit - 1, desiredStencilBit | (desiredStencilBit - 1));
43.             StencilMaterial.Remove(m_UnmaskMaterial);
44.             m_UnmaskMaterial = unmaskMaterial2;
45.             graphic.canvasRenderer.popMaterialCount = 1;
46.             graphic.canvasRenderer.SetPopMaterial(m_UnmaskMaterial, 0);
48.             return m_MaskMaterial;
49.         }

复制代码

Mask 组件调用了模板材质球构建了一个自己的材质球，因此它使用了实时渲染中的模板方法来裁切不需要显示的部分，所有在 Mask 组件后面的物体都会进行裁切。
我们可以说 Mask 是在 GPU 中做的裁切，使用的方法是着色器中的模板方法。
Mask2D

接着我们再来看看Mask2D的原理，在前面介绍Canvas.willRenderCanvases()时在PerformUpdate方法中会调用ClipperRegistry.instance.Cull();来处理界面中所有的Mask2D裁切。

1. CanvasUpdateRegistry.cs
2.         protected CanvasUpdateRegistry()
3.         {
4.             Canvas.willRenderCanvases += PerformUpdate;
5.         }
7.         private void PerformUpdate()
8.         {
9.             //...略
10.             // 开始裁切Mask2D
11.             ClipperRegistry.instance.Cull();
12.             //...略
13.         }
15. ClipperRegistry.cs
16.         public void Cull()
17.         {
18.             for (var i = 0; i < m_Clippers.Count; ++i)
19.             {
20.                 m_Clippers[i].PerformClipping();
21.             }
22.         }

复制代码

Mask2D会在OnEnable()方法中，将当前组件注册ClipperRegistry.Register(this);
这样在上面ClipperRegistry.instance.Cull();方法时就可以遍历所有Mask2D组件并且调用它们的PerformClipping()方法了。
PerformClipping()方法，需要找到所有需要裁切的UI元素，因为Image和Text都继承了IClippable接口，最终将调用Cull()进行裁切。

1. RectMask2D.cs
2.     protected override void OnEnable()
3.     {
4.         //注册当前RectMask2D裁切对象，保证下次Rebuild时可进行裁切。
5.         base.OnEnable();
6.         m_ShouldRecalculateClipRects = true;
7.         ClipperRegistry.Register(this);
8.         MaskUtilities.Notify2DMaskStateChanged(this);
9.     }
11.         public virtual void PerformClipping()
12.         {
13.             //TODO See if an IsActive() test would work well here or whether it might cause unexpected side effects (re case 776771)
15.             // if the parents are changed
16.             // or something similar we
17.             // do a recalculate here
18.             //重新计算裁切区域
19.             if (m_ShouldRecalculateClipRects)
20.             {
21.                 MaskUtilities.GetRectMasksForClip(this, m_Clippers);
22.                 m_ShouldRecalculateClipRects = false;
23.             }
25.             // get the compound rects from
26.             // the clippers that are valid
27.             bool validRect = true;
28.             Rect clipRect = Clipping.FindCullAndClipWorldRect(m_Clippers, out validRect);
29.             bool clipRectChanged = clipRect != m_LastClipRectCanvasSpace;
30.             if (clipRectChanged || m_ForceClip)
31.             {
32.                 foreach (IClippable clipTarget in m_ClipTargets)
33.                     //把裁切区域传到每个UI元素的Shader中[划重点！！！]
34.                     clipTarget.SetClipRect(clipRect, validRect);
36.                 m_LastClipRectCanvasSpace = clipRect;
37.                 m_LastValidClipRect = validRect;
38.             }
40.             foreach (IClippable clipTarget in m_ClipTargets)
41.             {
42.                 var maskable = clipTarget as MaskableGraphic;
43.                 if (maskable != null && !maskable.canvasRenderer.hasMoved && !clipRectChanged)
44.                     continue;
46.                 clipTarget.Cull(m_LastClipRectCanvasSpace, m_LastValidClipRect);
47.             }
48.         }
50. MaskableGraphic.cs
51.         public virtual void Cull(Rect clipRect, bool validRect)
52.         {
53.             var cull = !validRect || !clipRect.Overlaps(rootCanvasRect, true);
54.             UpdateCull(cull);
55.         }
57.         private void UpdateCull(bool cull)
58.         {
59.             var cullingChanged = canvasRenderer.cull != cull;
60.             canvasRenderer.cull = cull;
62.             if (cullingChanged)
63.             {
64.                 UISystemProfilerApi.AddMarker("MaskableGraphic.cullingChanged", this);
65.                 m_OnCullStateChanged.Invoke(cull);
66.                 SetVerticesDirty();
67.             }
68.         }

复制代码

RectMask2D会将RectTransform的区域作为_ClipRect传入Shader中。
Stencil Ref 的值是0 表示它并没有使用模板缓冲比较，
如果只是矩形裁切，RectMask2D不需要一个无效的渲染用于模板比较，所以RectMask2D的效率会比Mask要高。
在Shader的Frag处理像素中，被裁切掉的区域是通过UnityGet2DClipping()根据_ClipRect比较当前像素是否在裁切区域中，如果不在，将Color.a变成了透明。

1. Shader "UI/Default"
2. {
3.     //...略
4.     fixed4 frag(v2f IN) : SV_Target
5.     {
6.         half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
7.         //根据_ClipRect比较当前像素是否在裁切区域中，如果不在颜色将设置成透明
8.         #ifdef UNITY_UI_CLIP_RECT
9.         color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
10.         #endif
11.         #ifdef UNITY_UI_ALPHACLIP
12.         clip (color.a - 0.001);
13.         #endif
14.         return color;
15.     }
16. }

复制代码

参考

Unity mask的分析与理解