UGUI性能优化学习笔记（二）合批

系统管理员 2023-09-23 17:22 68阅读 0赞

## 一、合批规则 ##

合批：把渲染时使用相同材质、相同贴图的网格合并在一起，成为一个大网格，然后再调用一次Draw Call，直接渲染这一个大网格。这样做可以降低Draw Call的数量，以优化性能。

Unity是如何确定哪些网格可以进行合批的呢？

*  首先，合批是以Canvas为单位进行的。也就是说在不同Canvas下的UI元素是无法合批的。
 *  接下来需要计算Canvas下所有UI元素的深度值。深度值计算规则如下：
    
     *  如果当前UI元素不进行渲染，则Depth = -1
     *  如果当前UI元素没有其他UI元素与其**相交**，则Depth = 0
     *  如果当前UI元素与其他UI元素相交，则判断它们能否进行合批（Material ID、Texture ID是否相等），如果满足合批的条件，则它们的Depth相同；如果不满足合批条件，则取下方UI的最大深度值，并在其基础上+1。
 *  计算完深度值后，按照「深度值->Material ID->Texture ID->Renderer Order（Hierarchy面板上的顺序）」对UI元素进行排序，剔除深度值为-1的元素，形成一个队列。
 *  根据得到的队列，判断相邻元素之间的材质和贴图是否相同，只要相同就可以进行合批。注意这里不会对深度值进行判断，即使相邻元素深度值不同，只要满足上述条件也可以进行合批。

下面我们通过一个具体的示例加深理解  
![2d40577554622829e66b63ee68c7deb6.png][]

在上图中，白色Image位于所有UI元素的最底层，所以Depth = 0。接下来的文本位于白色Image的上层，所以Depth = 1。这里需要注意，UI元素进行深度判断是通过网格进行的，而不是通过rect。  
![57f0196c2f05e0ddb9bff578ff7c264f.png][]

接下来对红色Image进行判断。因为下层的UI元素有白色的Image和Text两个，所以取它们之间深度值最大的那个。又因为Text和红色Image的材质与贴图都不相同，所以肯定无法进行合批。所以红色Image的Depth为Text的深度值+1，即Depth = 2。

再上层的黄色Image因为与下层的红色Image材质与贴图相同，可以进行合批，所以其深度值与红色Image的深度值相同，即Depth = 2。蓝色Image同理。

接下来就是按照前面的规则对UI元素进行排序，生成排序后的队列，并确定哪些元素可以合批。通过Profiler窗口，我们可以很方便地查看当前场景的合批情况。并且会列出打断合批的原因。  
![c7cd6dd02cf40d95e7e1e2959ec1ea3d.png][]

## 二、遮罩组件 ##

### 2.1 Mask ###

UGUI中的Mask组件有两个特点：

*  一个Mask组件除了绘制自身产生一次Draw Call外，还会额外产生两次Draw Call
 *  Mask会打断外部UI元素与内部UI元素的合批

#### Mask的额外两次Draw Call ####

Mask在渲染之前，会遍历所有子元素并计算一次模板缓存。将需要绘制的部分的模板缓冲值设置为1，不需要绘制的部分设置为0。这步操作需要调用一次Draw Call。同时，在执行过程中，Mask会被设置一个特殊的材质。这也是导致其内部元素无法与外部元素合批的原因。  
![023be3c0a05547b1fd1a70f70c8021b5.png][]

绘制完成后，还需要将模板缓冲值恢复，这就又造成了一次Draw Call。

#### 不同Mask间合批 ####

虽然Mask会导致外部的元素无法与内部的元素进行合批，但由于不同的Mask添加的特殊材质是相同的，所以不同的Mask之间可以进行合批。我们来看下面这个例子  
![4c464c1633d8b66aad92e8426b5d491a.png][]

当场景中存在一个Mask时，总的Batches数量为4。当我们再添加另一个Mask，可以发现Batches并没有发生变化  
![cd2a87c9de9ecec5ce23bc4243a1f839.png][]

#### 被剔除的元素仍会参与计算 ####

虽然被Mask遮挡的UI元素没有被绘制出来，但它仍然会参与合批的计算。我们尝试将一个Mask拖拽到另一个Mask剔除的UI元素区域。可以看到Batches增加到了7。这是因为被剔除的UI元素参与了合批计算，影响了深度值排序，从而导致无法进行合批。  
![921f076551e45dd07a92ae31273eea26.png][]

### 2.2 RectMask2D ###

RectMask2D组件是基于自身Rect范围对下方的子元素进行裁剪实现的遮罩效果。这种实现方式有两个优点：

首先，RectMask2D本身不产生任何Draw Call。当场景中只有一个RectMask2D，且自身不挂载Image的情况下，场景中的Batches只有1（摄像机产生的Draw Call）  
![b9cc42ee4d198d479185ef492459b691.png][]

其次，处于遮罩范围外的子元素会被直接裁剪，不会影响合批计算。我们拖动遮罩下的子元素，可以看到顶点数量和Batches的变化  
![4294e5e38faed767cf3778836dc5b74d.gif][]

完全移出Mask范围的UI元素也不会参与合批计算  
![fd9c22fab89bb374ee73abe00b9a8328.png][]

#### 不同Mask间无法合批 ####

RectMask2D也并不是完全没有缺点，它有个致命的问题是不同的Mask间无法进行合批。下图所示的情况，在Mask内部的UI元素材质、贴图完全相同的情况下仍然存在4次Draw Call。  
![b1bac606bf86f9a0dfe7acee0e7a9ef4.png][]

将内部的UI元素隐藏，可以发现剩余两个Draw Call。这是因为RectMask2D本身挂载的Image是可以进行合批的。  
![8ed5475e38fccbc3158565ca4cb64ac6.png][]

### 2.3 Mask还是RectMask2D？ ###

由此可见，Mask和RectMask2D各有优劣，并没有谁一定比谁的性能更优这一说，最重要的是要结合应用场景进行取舍。比如当一个场景中需要用到许多个遮罩，且内部的UI元素都是可以进行合批的，那么显然Mask要更适用。而如果一个场景中只需要一个遮罩，那么本身不占用Draw Call且不容易打断合批的RectMask2D要更适合些。

## 三、参考资料 ##

\[1\]. https://www.laowangomg.com/?p=488  
\[2\]. https://www.cnblogs.com/moran-amos/p/13878493.html  
\[3\]. https://www.cnblogs.com/moran-amos/p/13883818.html  
\[4\]. https://www.sikiedu.com/course/538

[2d40577554622829e66b63ee68c7deb6.png]: https://img-blog.csdnimg.cn/img_convert/2d40577554622829e66b63ee68c7deb6.png
[57f0196c2f05e0ddb9bff578ff7c264f.png]: https://img-blog.csdnimg.cn/img_convert/57f0196c2f05e0ddb9bff578ff7c264f.png
[c7cd6dd02cf40d95e7e1e2959ec1ea3d.png]: https://img-blog.csdnimg.cn/img_convert/c7cd6dd02cf40d95e7e1e2959ec1ea3d.png
[023be3c0a05547b1fd1a70f70c8021b5.png]: https://img-blog.csdnimg.cn/img_convert/023be3c0a05547b1fd1a70f70c8021b5.png
[4c464c1633d8b66aad92e8426b5d491a.png]: https://img-blog.csdnimg.cn/img_convert/4c464c1633d8b66aad92e8426b5d491a.png
[cd2a87c9de9ecec5ce23bc4243a1f839.png]: https://img-blog.csdnimg.cn/img_convert/cd2a87c9de9ecec5ce23bc4243a1f839.png
[921f076551e45dd07a92ae31273eea26.png]: https://img-blog.csdnimg.cn/img_convert/921f076551e45dd07a92ae31273eea26.png
[b9cc42ee4d198d479185ef492459b691.png]: https://img-blog.csdnimg.cn/img_convert/b9cc42ee4d198d479185ef492459b691.png
[4294e5e38faed767cf3778836dc5b74d.gif]: https://img-blog.csdnimg.cn/img_convert/4294e5e38faed767cf3778836dc5b74d.gif
[fd9c22fab89bb374ee73abe00b9a8328.png]: https://img-blog.csdnimg.cn/img_convert/fd9c22fab89bb374ee73abe00b9a8328.png
[b1bac606bf86f9a0dfe7acee0e7a9ef4.png]: https://img-blog.csdnimg.cn/img_convert/b1bac606bf86f9a0dfe7acee0e7a9ef4.png
[8ed5475e38fccbc3158565ca4cb64ac6.png]: https://img-blog.csdnimg.cn/img_convert/8ed5475e38fccbc3158565ca4cb64ac6.png