添加链接 注册    登录
link管理
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
爱运动的小虾米  ·  胡桃大战史莱姆，猛男必备 ...·  3 月前    · 
爱旅游的跑步鞋  ·  2024年中国伺服电机市场规模预测及行业竞争 ...·  8 月前    · 
豁达的帽子  ·  minio 老版本mc admin ...·  11 月前    · 
激动的书包  ·  【理响中国|铿锵有理・党校公开课】如何理解高 ...·  1 年前    · 
知识渊博的红金鱼  ·  django.db.models.looku ...·  1 年前    · 
link管理  ›  【Unity源码学习】遮罩：Mask与Mask2D - 代码库 Code - Unity开发者联盟 - Powered by Discuz!
unity shader
https://u3dchina.com/thread_9362_1_1.html
才高八斗的茄子
6 月前
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)
  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的分析与理解

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？ 立即注册

 
推荐文章
爱运动的小虾米  ·  胡桃大战史莱姆，猛男必备 Wallpaper Engine-赛德游戏网
3 月前
爱旅游的跑步鞋  ·  2024年中国伺服电机市场规模预测及行业竞争格局分析（图）-中商情报网
8 月前
豁达的帽子  ·  minio 老版本mc admin update 问题 - 荣锋亮 - 博客园
11 月前
激动的书包  ·  【理响中国|铿锵有理・党校公开课】如何理解高质量发展这个首要任务 _中国经济网――国家经济门户
1 年前
知识渊博的红金鱼  ·  django.db.models.lookups | Django documentation | Django
1 年前
Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
link管理 - 链接快照平台