Unity Mask原理及自定义遮罩

主要内容

1. StencilBuffer是什么？
2. 自定义Shader来实现遮罩
3. Unity Mask的原理

1.什么是StencilBuffer

GPU在渲染前会为每个像素点分配一个1字节(8位)大小的内存区域，即StencilBuffer。

在决定是否要渲染某个像素点之前，会将它当前的StencilBuffer的值与某个参考值(stencilID)进行指定的逻辑运算(Stencil Comparison)，如果运算结果为True，则渲染这个像素点，否则就不渲染。

如下图所示，默认分配的StencilBuffer为0，我们将绿色范围内的StencilBuffer设为1，渲染前，把当前像素点的StencilBuffer与参考值1进行是否相等的逻辑运算，如果相等，则渲染。那么，最后屏幕上只有绿色区域的内容才会被渲染出来。

2.自定义shader来实现遮罩

了解了上面StencilBuffer的原理，我们来看一看Unity的Shader是如何巧妙地利用StencilBuffer来实现遮罩的。

首先我们来抽象一下Unity在渲染一个2D场景时的整个过程：

1. GPU先为整个屏幕的所有像素点创建StencilBuffer，默认为0。
2. 按场景中节点父子顺序，依次从上向下选择要渲染的节点
3. 渲染某个节点时，取出当前节点区域中每个像素点的StencilBuffer值，然后和参考值(stencilID)做比较(Stencil Comparison)，如果为True，则渲染，并根据操作规则(Stencil Operation)修改当前像素点的StencilBuffer值；否则不渲染，也不操作当前像素点的StencilBuffer值；
4. 继续选择下一个需要渲染的节点。

所有需要渲染的节点依次地取出StencilBuffer，进行比较，比较完成后进行修改，然后继续渲染下一个节点。

2.1 Unity Shader 中对Stencil字段定义

Unity自带的shader中，你经常会看到如下的字段供你修改：

我们知道在渲染每个节点时，都经历了取值-比较-修改的过程。上面的字段就是在这个三个过程中用到的参数。

在取当前像素点的StencilBuffer值时，会与Stencil Read Mask进行与(&)运算，比如本来的StencilBuffer是9（0000 1001)，当Stencil Read Mask为8(0000 1000)时，取出来的值就是8(0000 1000)。

取出8后，将8与Stencil ID做对比，对比的方式为Stencil Comparison。Stencil Comparison是一个枚举类型，定义如下：

值	枚举类型	含义
0	Disabled	不进行比较
1	Never	永远为False
2	Less	StencilBuffer小于Stencil ID时为True
3	Equal	StencilBuffer等于Stencil ID时为True
4	LessEqual	StencilBuffer小于等于Stencil ID时为True
5	Greater	StencilBuffer小于Stencil ID时为True
6	NotEqual	StencilBuffer不等于Stencil ID时为True
7	GraterEqual	StencilBuffer大于等于Stencil ID时为True
8	Always	永远为True

比较结果为True时，渲染这个像素点，并进行Stencil Operation操作，Stencil Operation是一个枚举类型，定义如下：

值	枚举类型	含义
0	Keep	保持当前的StencilBuffer值
1	Zero	将StencilBuffer置为0
2	Replace	用Stencil ID的值替换StencilBuffer
3	IncreamentStaturate	StencilBuffer+=1, 超过255置为255
4	DecrementStaturate	StencilBuffer-=1，小于0置为0
5	Invert	StencilBuffer取反
6	IncrementWrap	StencilBuffer+=1, 超过255置为0
7	DecrementWrap	StencilBuffer-=1，小于0置为255

在写入最终的StencilBuffer值之前，先和Stencil Write Mask进行与(&)操作，将&之后的结果写入。

Color Mask是渲染时的RGBA四个通道的四位掩码，本文不做详细阐述。

2.2 自定义Shader实现裁剪

了解了Shader对Stencil的定义后，我们可以通过自定义Shader，来实现一个简单的裁剪。如下图，我们想让一个长条状的绿色图片只在白色区域内渲染，超出白色区域的部分不渲染。

场景的层级关系如下:

white_bg材质的shader参数如图：

green_img材质的shader参数如图：

这样就实现了裁剪的效果，整个渲染过程过程是这样的：

1. 整个屏幕上的所有像素点的StencilBuffer值置为0
2. 渲染白色底板时，取出白色底板区域内的每个像素点的StencilBuffer值，由于Stencil Comparison用的8，永远为True，所以白色底板的所有像素点都会被渲染。而且由于Stencil Operation为2，所以会用Stencil ID即120替换StencilBuffer值的值，这样白色底板区域内的所有像素点的StencilBuffer值都变成了120
3. 渲染绿色长条时，取出绿色区域内所有像素点的StencilBuffer值，由于Stencil Comparison用的3，即将StencilBuffer值于Stencil ID120作比较，相等时为True，这样绿色长条中只有位于白色区域内的像素点才回被渲染出来。另外它的Stencil Operation为0，即不改变StencilBuffer值。

3.Unity Mask原理

当你知道了如何利用Shader的Stencil字段来实现自定义的遮罩，你就很容易明白Mask的原理了。

在你添加一个Mask组件时，它便会自动在裁剪层创建一个Stencil Comparison为8，Stencil Operation为2的Shader材质，并根据情况初始化一个Stencil ID。然后为它所有的子层级创建一个Stencil Comparison为3，Stencil ID与其相同的Shader材质来实现裁剪效果。

如果有兴趣深入了解的话，可以看一下Mask的源码，核心函数：

 

代码解读

复制代码

public virtual Material GetModifiedMaterial(Material baseMaterial)

作者：冬九夏六
链接：https://juejin.cn/post/6844904038408912909