T O P

[资源分享]     Unity遮罩之Mask、RectMask2D与Sprite Mask适用场景分析

  • By - 楼主

  • 2021-09-03 15:10:12
  • 遮罩,顾名思义是一种可以掩盖其它元素的控件。常用于修改其它元素的外观,或限制元素的形状。比如ScrollView或者圆头像效果都有用到遮罩功能。本系列文章希望通过阅读UGUI源码的方式,来探究遮罩的实现原理,以及通过Unity不同遮罩之间实现方式的对比,找到每一种遮罩的最佳使用场合。

    本文是UGUI遮罩系列的第三篇,也是最后一篇。前两篇分别是对Mask和RectMask2D的源码分析,详细解读了它们的原理与实现细节。这次的侧重点是对Mask和RectMask2D做一个对比分析,同时总结一下在Mask和RectMask2D不起作用的场景下如何实现遮罩效果。本文大部分内容建立在读者已了解Mask与RectMask2D原理的基础之上,所以在阅读本文前建议先看下前两篇文章。

    1. 【UGUI源码分析】Unity遮罩之Mask详细解读
    2. 【UGUI源码分析】Unity遮罩之RectMask2D详细解读

    本文所做的一些测试与验证均基于Unity2019.4版本

    Mask与RectMask2D对比

    1. Mask遮罩的大小与形状依赖于Graphic,而RectMask2D只需要依赖RectTransform

    Mask是利用Graphic渲染时修改对应片元的模板值来确定遮罩的大小与形状的,Graphic的形状决定了Mask遮罩的形状。因此缺少Graphic组件,Mask遮罩将会失效。当禁用了对象的Graphic组件,比如Image组件,Unity会有以下警告提示

    RectMask2D是利用自己的RectTransform计算出裁剪矩形,然后降低不在矩形内的片元透明度来实现遮罩效果,因此不需要依赖Graphic组件

    2. Mask支持圆形或其他形状遮罩, 而RectMask2D只支持矩形

    Mask遮罩形状可以更加多样,由于Mask遮罩的形状由Graphic决定,所以利用不同的Graphic可以实现不同形状的遮罩

    而RectMask2D通过RectTransform计算裁剪矩形的机制导致它只能支持矩形遮罩,仅在 2D 空间中有效,不能正确掩盖不共面的元素

    3. Mask会增加drawcall

    除了绘制元素本身所需的1个drawcall以外,Mask还会额外增加2个drawcall。一个用来在绘制元素前修改模板缓冲的值,另一个用来在所有UI绘制完后将模板缓冲的值恢复原样

    举个栗子,如下所示的一个UI场景,画布下一个带有Mask组件的panel父节点,其下有一个子节点Image

    通过Unity的帧调试器查看渲染过程,共有3次drawcall

    3次drawcall的区别主要在于模板参数的不同。第一次是总是通过(Stencil Comp:Always)模板测试,并将模板值替换(Stencil Pass:Replace)为1(Stencil Ref:1)。第二次是用于绘制Image的。第三次是总是通过(Stencil Comp:Always)模板测试,并将模板值设置为0(Stencil Pass:Zero),即起到擦除模板值的作用。

    4. RectMask2D可能会破坏合批

    有如下所示的一个测试场景,Panel1和Panel2都是只挂有RectTransform组件的单纯父节点,其下都有一个Image子节点,正常情况下应该可以合批,drawcall应为1

    通过帧调试器查看,确实如此,成功合批,drawcall是1

    此时给Panel1添加一个RectMask2D组件,实现遮罩效果。Panel2保持不变

    通过帧调试器查看,drawcall数量是2,原本的合批被破坏了。

    由此,网上查到的一些资料会得出“RectMask2D节点下的所有孩子都不能与外界UI节点合批且多个RectMask2D之间不能合批”的结论,实际上这是一种不严谨的说法,甚至是错误的。要搞清楚这个问题,需要先弄明白为什么RectMask2D会破坏合批?

    通过帧调试器可以发现,是RectMask2D传递裁剪矩形时,修改了Shader的参数,导致不能合批。从下图可以看到2次drawcall的区别就在于_ClipRect不同

    既然是裁剪矩形参数不同导致不能合批,那如果将两个裁剪矩形参数设置为一致是不是就能合批了呢?动手验证一下,给Panel1和Panel2都添加上RectMask2D组件,同时将它们的RectTransform参数设置为完全一致(这样可以保证裁剪矩形参数相同),然后把Panel1的子节点Image往左移,Panel2的子节点Image往右移,让它们都能显示出来。最终效果如下图所示

    再次测试后可以看到drawcall只有1次了,_ClipRect是相同的值。因此可以得出结论,RectMask2D确实由于裁剪矩形参数的设置会破坏合批,但不是一定的。在满足条件时,RectMask2D节点下的孩子也能与外界UI节点合批,多个RectMask2D之间也是能合批的。

    5. Mask与RectMask2D用哪个?

    Mask的实现利用了模板缓冲区,会增加2个drawcall,性能会受到一定影响。简单的UGUI界面,还是建议使用RectMask2D,相对来说性能更强,也无需额外的绘制调用。但由于RectMask2D也有可能破坏合批,在复杂的情况下,并没有确切的结论来判断哪个更优,只能利用工具实际测试找到最优者,具体问题具体分析才是正确做法。当然,诸如圆形遮罩等一些RectMask2D无法胜任的场景,还是要使用Mask

    粒子系统实现遮罩效果

    游戏的UI界面也经常会添加粒子效果,有时也会需要对粒子添加遮罩。Mask和RectMask2D只适用于UGUI,对粒子系统无法生效。此时可以使用SpriteMask。SpriteMask的原理与Mask相同,都是基于模板测试实现。

    粒子系统的Renderer模块有对应的Mask属性设置,可以调整粒子在精灵遮罩外部和内部的可见性

    MeshRenderer实现遮罩效果

    UI界面添加的一些特效也有可能是MeshRenderer实现的,例如利用Shader制作的顶点动画。但MeshRenderer没有提供Mask相关设置,无法使用遮罩。好在基于模板测试实现遮罩的原理都是相同的,可以自己动手修改MeshRenderer使用的材质,在Shader中添加ShaderLab模板配置来使用模板测试

    需要添加到Shader中的代码如下所示

    Properties
    {
        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255
    }
    
    Stencil
    {
        Ref [_Stencil]
        Comp [_StencilComp]
        Pass [_StencilOp]
        ReadMask [_StencilReadMask]
        WriteMask [_StencilWriteMask]
    }
    

    添加完成后,材质界面会多出模板相关的配置,如下所示

    再配合SpriteMask,修改对应的模板参数,就可以模拟遮罩效果了。例如

    • Stencil Comparison设置为3,就相当于"Visible Inside Mask"
    • Stencil Comparison设置为6,就相当于"Visible Outside Mask"
    • Stencil Comparison设置为8,就相当于"No Masking"

    参考

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册