Bad Performance

Unity Engine
, ,
1

I created a very simple window with 10K labels. When the mouse enters or exits the window, the performance will be very poor. I see that there are more elements in the UI toolkit debugger, but the performance is not poor. What did I do wrong?

using UnityEditor;
using UnityEngine.UIElements;

public class TestWindow : EditorWindow
{
    [MenuItem("Test/Open")]
    private static void Open()
    {
        var window = GetWindow<TestWindow>();
        window.Show();
        window.Init();
    }

    private void Init()
    {
        for (var index = 0; index < 10000; index++)
        {
            var label = new Label(index.ToString());
            rootVisualElement.Add(label);
        }
    }
}

profiler

7590196--941188--profiler.png
7590196--941188--profiler.png1597Ă—582 80.8 KB

deep profiler

7590196--941185--deep profiler.png
7590196--941185--deep profiler.png1596Ă—1112 154 KB

2

Shouldnt you be using ListView for such case?

3

The ListView is indeed the way to go, it will recycle the elements so that there isn’t a huge amount of elements to go through for events, layout, rendering, etc.

4

You’re right. Using ListView can solve the problem if the elements are similar. In fact, I need to use more complex and flexible elements, so ListView is not suitable.

5

I want to make a lot of elements, and the elements are not similar. What should I do?

6

This is difficult to answer without more information about what you are trying to do.

The layout and styling phases will be expensive for that many elements. Setting the position to absolute will simplify the layout process for these elements.

If the elements are not all visible on screen at the same time, consider implementing a virtualization system similar to what the ListView does. You would only create as many elements as there are visible on screen, when they go offscreen, they are added to a “waiting list” so that they can be reused when another element goes on screen.

Are the elements moving? If so, set the ve.usageHint = UsageHint.DynamicTransform; hint. This will allow the transformation to occur on the GPU.

Another option would be to have a single VisualElement that draws its own geometry using ve.generateVisualContent.

More details about your particular use-case would help.

1 Like
7

I think with so many elements, there will always be performance issues. But the preformance issues of uitoolit start alreay with few elements, when you animate them (UsageHint.DynamicTransform I am afraid does not help much).

So far so, that we decided to use the old UI system for a new WebGL project :frowning:

UI Toolkit needs to improve its permormance drastically.

8

What does “Move” element mean in UsageHints.GroupTransform? Transformation? Move in Scrollview?

9

It could be a transformation or a position change.

10

I got it, thank you.

1 Like