Unity中Mask和RectMask2D组件的对比与测试

组件的对比与测试"/>

Unity中Mask和RectMask2D组件的对比与测试

组件用法

Mask组件可以实现遮罩的效果，将一个图像设为拥有mask组件图像的子物体，最后就会隐藏掉子图像和mask图像不重合的部分。例如：

（蓝色的圆形名为mask，数字图片名为image）

在“mask”图片上添加mask组件后的结果（可以选择是否隐藏mask图像）：

RectMask2D的基本用法

RectMask2D的用法和mask大致相同，不过RectMask2D只能裁剪一个矩形区域，同时RectMask2D可以选择边缘虚化

原理分析

Mask的原理分析

1. Mask会赋予Image一个特殊的材质，这个材质会给Image的每个像素点进行标记，将标记结果存放在一个缓存内（这个缓存叫做 Stencil Buffer）

2. 当子级UI进行渲染的时候会去检查这个 Stencil Buffer内的标记，如果当前覆盖的区域存在标记（即该区域在Image的覆盖范围内），进行渲染，否则不渲染

那么，Stencil Buffer 究竟是什么呢？

1 StencilBuffer

简单来说，GPU为每个像素点分配一个称之为StencilBuffer的1字节大小的内存区域，这个区域可以用于保存或丢弃像素的目的。

我们举个简单的例子来说明这个缓冲区的本质。

如上图所示，我们的场景中有1个红色图片和1个绿色图片，黑框范围内是它们重叠部分。一帧渲染开始，首先绿色图片将它覆盖范围的每个像素颜色“画”在屏幕上，然后红色图片也将自己的颜色画在屏幕上，就是图中的效果了。

这种情况下，重叠区域内红色完全覆盖了绿色。接下来，我们为绿色图片添加Mask组件。于是变成了这样：

此时一帧渲染开始，首先绿色图片将它覆盖范围都涂上绿色，同时将每个像素的stencil buffer值设置为1，此时屏幕的stencil buffer分布如下：

然后轮到红色图片“绘画”，它在涂上红色前，会先取出这个点的stencil buffer值判断，在黑框范围内，这个值是1，于是继续画红色；在黑框范围外，这个值是0，于是不再画红色，最终达到了图中的效果。

所以从本质上来讲，stencil buffer是为了实现多个“绘画者”之间互相通信而存在的。由于gpu是流水线作业，它们之间无法直接通信，所以通过这种共享数据区的方式来传递消息。

理解了stencil的原理，我们再来看下它的语法。在unity shader中定义的语法格式如下
（中括号内是