重建

UGUI的网格重建包含两部分内容：

  1. Rebatch：合批部分的重建，Canvas将合批后的物体重建Mesh。
  2. ReBuild：针对单个UI物体的UI重建。主要方法是Canvas.BuildBench

重建过程

在上一节说过，重建的主要逻辑都在CanvasUpdateRegistry.PerformUpdate里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
private void PerformUpdate()
{
    //精简代码，删掉了Profiler的部分
    CleanInvalidItems();//处理掉空的UI或已经销毁的UI

    m_PerformingLayoutUpdate = true;

    m_LayoutRebuildQueue.Sort(s_SortLayoutFunction);//将UI按照深度进行排序

    //这里表示遍历CanvasUpdate.Prelayout = 0、CanvasUpdate.Layout = 1、CanvasUpdate.PostLayout = 2三项
    for (int i = 0; i <= (int)CanvasUpdate.PostLayout; i++)
    {

        for (int j = 0; j < m_LayoutRebuildQueue.Count; j++)
        {
            var rebuild = m_LayoutRebuildQueue[j];
            try
            {
                if (ObjectValidForUpdate(rebuild))
                    rebuild.Rebuild((CanvasUpdate)i);//ICanvasElement.Rebuild方法
            }
            catch (Exception e)
            {
                Debug.LogException(e, rebuild.transform);
            }
        }
    }

    for (int i = 0; i < m_LayoutRebuildQueue.Count; ++i)
        m_LayoutRebuildQueue[i].LayoutComplete();

    m_LayoutRebuildQueue.Clear();
    m_PerformingLayoutUpdate = false;

    // now layout is complete do culling...
    ClipperRegistry.instance.Cull();//调用所有裁剪的部分，比如RectMask2D

    //Graphic部分的重建
    m_PerformingGraphicUpdate = true;

    for (var i = (int)CanvasUpdate.PreRender; i < (int)CanvasUpdate.MaxUpdateValue; i++)
    {
        for (var k = 0; k < m_GraphicRebuildQueue.Count; k++)
        {
            try
            {
                var element = m_GraphicRebuildQueue[k];
                if (ObjectValidForUpdate(element))
                    element.Rebuild((CanvasUpdate)i);
            }
            catch (Exception e)
            {
                Debug.LogException(e, m_GraphicRebuildQueue[k].transform);
            }
        }
    }

    for (int i = 0; i < m_GraphicRebuildQueue.Count; ++i)
        m_GraphicRebuildQueue[i].GraphicUpdateComplete();

    m_GraphicRebuildQueue.Clear();
    m_PerformingGraphicUpdate = false;
}

Layout部分

Layout非常消耗性能，尽量避免使用Layout，尽量避免使用嵌套的Layout。尽量自己实现排序逻辑。代码解析略

Graphic部分

Graphic类中，实现ICanvasElement.Rebuild的地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/// <summary>
/// Rebuilds the graphic geometry and its material on the PreRender cycle.
/// </summary>
/// <param name="update">The current step of the rendering CanvasUpdate cycle.</param>
/// <remarks>
/// See CanvasUpdateRegistry for more details on the canvas update cycle.
/// </remarks>
public virtual void Rebuild(CanvasUpdate update)
{
    if (canvasRenderer == null || canvasRenderer.cull)
        return;

    switch (update)
    {
        case CanvasUpdate.PreRender:
            if (m_VertsDirty)
            {
                UpdateGeometry();
                m_VertsDirty = false;
            }
            if (m_MaterialDirty)
            {
                UpdateMaterial();
                m_MaterialDirty = false;
            }
            break;
    }
}

可以看到就是将设置了脏标记的顶点和材质进行更新。

材质只有被改变了，才会被设置成脏标记，我们修改材质的颜色等属性，并不会引发重建。注意这里是材质的颜色，不是Image面板上的颜色。

顶点与材质相比，更容易被设置成脏标记，也就更容易引发重建，我们可以查看Image源码，里面对于SetVerticesDirty方法有很多地方调用。

Image源码中设置顶点脏标记的地方

注意Grapic的OnEnable方法，它将调用一次SetAllDirty();，这将耗费大量计算性能，这也是避免使用GameObject.SetActive来控制UI开闭的原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        /// <summary>
        /// Mark the Graphic and the canvas as having been changed.
        /// </summary>
        protected override void OnEnable()
        {
            base.OnEnable();
            CacheCanvas();
            GraphicRegistry.RegisterGraphicForCanvas(canvas, this);

#if UNITY_EDITOR
            GraphicRebuildTracker.TrackGraphic(this);
#endif
            if (s_WhiteTexture == null)
                s_WhiteTexture = Texture2D.whiteTexture;

            SetAllDirty();//在这里将所有的顶点、材质和Layout设为脏标记
        }

        /// <summary>
        /// Clear references.
        /// </summary>
        protected override void OnDisable()
        {
#if UNITY_EDITOR
            GraphicRebuildTracker.UnTrackGraphic(this);
#endif
            GraphicRegistry.DisableGraphicForCanvas(canvas, this);
            CanvasUpdateRegistry.DisableCanvasElementForRebuild(this);

            if (canvasRenderer != null)
                canvasRenderer.Clear();

            LayoutRebuilder.MarkLayoutForRebuild(rectTransform);

            base.OnDisable();
        }

重建过程举例

我们以修改Image组件的Color为例，梳理一下整个重建过程。

  1. 在Inspector面板中修改Image的Color属性

  2. 在Graphic类中修改Color属性，这个属性调用了SetPropertyUtility.SetColor方法，并且调用了SetVerticesDirty()

    1. 下面是SetPropertyUtility.SetColor方法的实现，可以看到只是比较一下各个颜色的值是否变化而已：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      namespace UnityEngine.UI
      {
          internal static class SetPropertyUtility
          {
              public static bool SetColor(ref Color currentValue, Color newValue)
              {
                  if (currentValue.r == newValue.r && currentValue.g == newValue.g && currentValue.b == newValue.b && currentValue.a == newValue.a)
                      return false;

                  currentValue = newValue;
                  return true;
              }
              //...
          }
      }

  3. Graphic类调用SetVerticesDirty()时，会调用CanvasUpdateRegistry.RegisterCanvasElementForGraphicRebuild(this);把当前组件注册成需要重建的Graphic

  4. 在CanvasUpdateRegistry内会接着调用InternalRegisterCanvasElementForGraphicRebuild，并在其中调用m_GraphicRebuildQueue.AddUnique(element)

  5. 最后，在CanvasUpdateRegistry.PerformUpdate里，将m_GraphicRebuildQueue内的数据一一进行重建。

重建优化思路

Canvas下面的物体要进行动静分离，某些经常动的UI元素会频繁触发Rebuild，而某些UI元素（如背景图）并不会发生什么改变。

Text显示的组件要常驻，单纯用来显示信息的Text组件，不能频繁setActive，因为文本的顶点和Mesh非常多，尽量不要经常Rebuid。