UGUI 优化

1.Canvas
Canvas下所有的UI元素都是合在一个Mesh中的。
过大的Mesh在更新时会开销很大，复杂的UI界面应该自成一个Canvas。
但是过多的Canvas会导致Draw Call的上升。

动态元素会导致Canvas的Rebuild（mesh更新），要做到动静分离。
Set Dirty，UGUI会在这一帧收集所有的修改，统一进行处理。

---

2.Scroll Rect
滚动的时候会触发 Canvas.SendWillRenderCanvases。
应该是开启了 Pixel Perfect的选项，作用是UI元素在位移时，为了对齐像素长宽进行微调。
而Scroll Rect里面元素很多，导致开销很大。

---

3.Outline等内置组件
会导致文本的Mesh增加四倍，导致开销变大。

---

4.界面切换
打开新界面隐藏原有界面。
如果先把原来的SetActive(false)，再把后续的SetActive(true)，会产生GC.Alloc。
可以改 Position 或者 Layer 或者 CanvasGroup。

---

5.减少Draw Call
a.计算Draw Call的原理
1.从Hierarchy顺序，自上而下进行遍历。（跳过不渲染的节点，比如：deactive、disable、layer不对等等）
2.如果没有和其他元素相交，depth = 0。（不是Rect相交，而是渲染元素本身的重叠）
3.如果存在相交元素，判断能否合批。（如果能则depth相等，如果不能则depth+1）
（Depth、Material ID、Texture ID一样的情况下，能合批）

举个例子：

如上图，两张Image是同一张图集，两个Text也是同一字体，Hierarchy结构如图。
从左到右的顺序依次为：Text1、Image1、Text2、Image2。

Text1和Image1和Image2都没有和其他元素相交，故depth = 0。
Text2和Image2相交，所以depth = 1。
depth = 0中，使用的Material ID都是一样的（默认Default UI Material），不影响。
但是Texture ID是不一样的，（使用图集就是图集ID，单张图片就是图片的ID，字体就是字体的ID）。
depth=0中需要两个Draw Call，分别渲染Text1、Image1与Image2。
depth=1中需要一个Draw Call，渲染Text2。

可以在FrameDebug中验证：



三次Draw Call。

b.如何减少？
1.每一个Panel尽量使用一个图集，默认的材质。
2.不使用UnityWhite等默认图片，会打断合批。
3.不要设置PosZ。
4.有时可以故意在底下放一张透明图片，垫高层级使得合批，
5.与添加Outline、Shadow等脚本无关。

---

6.少用Mask
Mask实现使用GPU Shader实现的，根据Image的a值在底层模板绘制一个区域的指令，确定裁剪区域。
之后Mask节点下的所有元素都会根据这个区域计算a值（模板测试）。
会额外产生2个DrawCall：
1.绘制模板区域。
2.结束计算裁剪。
Mask内部元素不会跟外界元素进行合批。
Mask内部可以和其他Mask内部元素进行合批。

---

7.RectMask2D
其实现方式是通过CPU，裁剪区域是矩形，如果在区域内就进行正常操作。
如果不在矩形区域，则这个元素不会被渲染。（且Draw Call 为 0）
RectMask2D也是负责裁剪。
RectMask2D内部元素不会与任何外部元素进行合皮。
RectMask2D不会产生额外Draw Call。

---

8.关闭无用的Raycast Target
Graphic Raycaster 实现原理是遍历所有Raycast Target 勾选的组件。
然后进行一系列测试，如果通过了测试，就会加入到命中列表中。
再进行排序，获取第一个命中的组件，进行调用。
所以不需要接受事件处理的组件，取消勾选Raycast Target。

---

9.OverDraw
大量粒子特效和透明材质，多层叠加。
GPU要进行多次深度测试。
会导致手机发热。