Unity3d: ugui source code, rebuild optimization

Image How to draw

Unity The objects rendered in are made of mesh (Mesh) Composed of , The drawing unit of mesh is primitive ( spot 、 Line 、 Trigonometry )
The drawing information is stored in Vertexhelper Class , Except for vertices , It also includes normals 、UV、 Color 、 Tangent line .

Rebuild Concept

Canvas Be responsible for the of child nodes UI Mesh merge of elements , And generate corresponding rendering instructions and send them to Unity The process of graphics pipeline . therefore Canvas It's rendering UI The components of , When UI If there is a change, it should be implemented once Batch, It is the culprit that has a greater impact on performance . Be careful Canvas Of Batch Only its child nodes will be affected , But it won't affect his son Canvas.

Rebuild The flow of the program

1. Image,Text They are all inherited. Graphic,Graphic Yes ICanvasElement Interface , Realization rebuild function

   public interface ICanvasElement
   {
    
       /// <summary>
       /// Rebuild the element for the given stage.
       /// </summary>
       /// <param name="executing">The current CanvasUpdate stage being rebuild.</param>
       /// //  according to CanvasUpdate Rebuild elements at different stages of 
       void Rebuild(CanvasUpdate executing);

2. CanvasUpdateRegistry monitor Canvas Of willRenderCanvases event , This event will be called every frame before rendering

   public class CanvasUpdateRegistry
   {
    
         // Layout rebuild queue , When UI When the layout of the element needs to be updated, it is added to the queue 
       private readonly IndexedSet<ICanvasElement> m_LayoutRebuildQueue = new IndexedSet<ICanvasElement>();

       // Graph reconstruction queue , When UI When the image of the element needs to be updated, it is added to the queue 
       private readonly IndexedSet<ICanvasElement> m_GraphicRebuildQueue = new IndexedSet<ICanvasElement>();

       protected CanvasUpdateRegistry()
       {
    
           // Monitored Canvas Of willRenderCanvases event , This event will be called every frame before rendering 
           Canvas.willRenderCanvases += PerformUpdate;
       }

4. PerformUpdate Collect layout and rebuild queue , Graph reconstruction queue call ICanvasElement.Rebuild Complete the reconstruction

When to join the reconstruction

By setting “ Dirty data ” Realized , Including layout (Layout)、 texture of material (Material) And vertex (Vertices) In the third part of , Set the layout to dirty , The layout will be rebuilt , Set the vertex or material to dirty , Then carry out graphic reconstruction . The layout will be added to the reconstruction itself m_LayoutRebuildQueue in , Graphic reconstruction will add itself to m_GraphicRebuildQueue in , Waiting to be called .
SetLayoutDirty： Join the layout reconstruction queue
SetVerticesDirty,SetMaterialDirty： texture of material , Vertex transformations are added to the graph reconstruction queue

Layout reconstruction ： Position or size ;

Image reconstruction ： Vertex change , Material change ( size , Rotation and text changes 、 Picture modification )

Optimize

The main target , hold Profile in Canvas.SendWillRenderCanv Parameter reduction . By limiting the number of vertices , Vertex change, etc .

1. text Property change （“123”–>“1234”）, Trigger SetLayoutDirty: Doing countdown related , According to each 1s change , Don't change in real time

2. Change the text , Picture color , Trigger SetVerticesDirty（ Vertex change ）, So the best way to change the picture color is to change the shader color

3. layout Components cause reconstruction problems

4. text Stroke , Shadow performance problems
   One character produces 4 vertices ,
   If you add Shadow It is equivalent to putting Text Copied it again to produce 8 individual ,
   Outline Will be Text Copy 4 Over and over again 20 vertices .
   With corresponding shader Replace

5. text The gradient

6. Image Format selection
   Image： The number of vertices depends on Image Type The choice of .
   ①Simple 4 vertices ;
   ②Sliced Check FillCenter The number of vertices is 36 individual , Uncheck yes 32 individual ;
   ③Tiled Depending on Rectranform Set the size of the and the size of the original image , Spread out N Zhang Tu is 4*N individual ;
   ④Filled More choices , But at least 4 individual .
   So for Image The preferred Simple Mode followed by Sliced Mode and uncheck FillCenter

7. Dynamic and static separation ：Canvas.SendWillRenderCanvases() And Canvas.BuildBatch() The calculation is based on Canvas For the root node , Different Canvas It won't affect the other Canvas. however , A large number of dynamic and static separation will affect Canvas Approved by , So it can be targeted to fight UI, The main interface is separated

Check the factors affecting reconstruction in the source code

Trigger SetLayoutDirty

Graphic：

1. protected override void OnRectTransformDimensionsChange()： When UI Of RectTransform Callback when changing , As long as inherit UIBehavior You can get the callback

Image：

1. protected override void OnCanvasHierarchyChanged()： The state of the parent canvas changes

Text：

1. text Property change : Doing countdown related , According to each 1s change , Don't change in real time
2. public bool supportRichText： When setting whether to turn on rich text , Switching rules （ As long as the status is different from last time ,SetLayoutDirty once , Instead of turning it on in real time Dirty）
3. public bool resizeTextForBestFit： Set whether to allow text to be automatically resized , Switching rules
4. public int resizeTextMinSize： Minimum text size allowed
5. public int resizeTextMaxSize： Set maximum text size
6. public TextAnchor alignment： The text is relative to its RectTransform The positioning of .
7. public int fontSize： Text size
8. public HorizontalWrapMode horizontalOverflow： Horizontal overflow mode
9. public VerticalWrapMode verticalOverflow： Vertical overflow mode
10. public float lineSpacing： Row spacing , Specifies a factor for the line height of the font . The value is 1 Standard line spacing will be generated
11. public FontStyle fontStyle： Font style

Trigger SetVerticesDirty： Vertex change

Graphic：

1. public virtual Color color： Color , So the best way to change the picture color is to change the shader color
2. protected override void OnRectTransformDimensionsChange()： When UI Of RectTransform Callback when changing , As long as inherit UIBehavior You can get the callback

Image：

1. public Type type：Simple,Sliced etc.
2. public bool preserveAspect： Whether to maintain the aspect ratio , Switching rules
3. public bool fillCenter
4. public FillMethod fillMethod： Fill mode
5. public float fillAmount
6. public bool fillClockwise
7. public int fillOrigin
8. public bool useSpriteMesh： Cut the transparent part of the picture
9. protected override void OnCanvasHierarchyChanged()： The parent canvas changes

RawImage：

1. public Texture texture
2. public Rect uvRect

Shadow：

1. public Color effectColor
2. public Vector2 effectDistance
3. public bool useGraphicAlpha

Text：

1. public virtual string text
2. public bool supportRichText
3. public bool resizeTextForBestFit
4. public int resizeTextMinSize
5. public int resizeTextMaxSize
6. public TextAnchor alignment
7. public bool alignByGeometry： Perform horizontal alignment using the glyph geometry of the section , Instead of glyph indicators .
   This can lead to better fitting, left and right alignment , But it may lead to incorrect positioning when trying to cover multiple Fonts ( Such as professional outline font ) On
8. public int fontSize
9. public HorizontalWrapMode horizontalOverflow
10. public VerticalWrapMode verticalOverflow
11. public float lineSpacing
12. public FontStyle fontStyle

Trigger SetMaterialDirty： Material change

Graphic：

1. public virtual Material material

Mask:

1. public bool showMaskGraphic：
2. protected override void OnEnable()
3. protected override void OnDisable()
4. protected override void OnValidate()： The editor uses

MaskableGraphic:

1. public bool maskable
2. protected override void OnTransformParentChanged()
3. protected override void OnCanvasHierarchyChanged()
4. public virtual void RecalculateMasking(): Recalculate the mask for this element and all child elements .

Trigger SetAllDirty, Total change

Image Indirectly inherited from Graphic, When it's Sprite When something changes , Would call SetAllDirty function
SetAllDirty Change the timing

Graphic：

1. protected override void OnTransformParentChanged() The parent object changes
2. protected override void OnEnable()
3. protected override void Reset()： Assignment default , Only useful under the editor , Can be ignored
4. protected override void OnDidApplyAnimationProperties()： Animation properties change
5. protected override void OnValidate()： Script loading or Inspector When any value in is modified, it will call , Only useful under the editor , Can be ignored

Image：

1. static void RebuildImage(SpriteAtlas spriteAtlas) Atlas changes
2. sprite Property change
3. overrideSprite Temporarily modify the picture
4. public override void SetNativeSize() Set size

Text：

1. public void FontTextureChanged()： The font texture has been modified ：TTF Dynamic Fonts ,Text Every time you assign a value Unity Will generate maps , And save each word UV Information , Then when displaying the font, according to UV The information is taken from the generated map and finally rendered on the screen .
2. font Property changes