I am building a user interface which is using sprites for VisualElement backgrounds. Those sprites are semi-transparent or the image tint has opacity below 100% but above 0%.
On some mobile devices I observed really bad performance and I tracked down, that it is enough to add a semi-transparent object into the visual element tree to reduce some fps.
I have created a test Uxml which contains multiple VisualElements stacked above each other which are semi-transparent. In my scene a script disables and enables the rects in a 5 seconds interval. The following screenshot shows the Uxml in the UiBuilder: It contains 18 semi-transparent rects and 1 big white rect in the background. The sprite is a full white rect.
I attached 2 screenshots which show the profiler using an an old Samsung Galaxy S5 mini and one using my PC with the Unity Editor.
In both screenshots you can observe, that the render time increases when the semi-transparent elements are enabled.
How are you enabling/disabling the rects? Changing the visiblity/display styles may be expensive, so I suspect those are the peaks we see in the profiler?
You can test by setting the opacity of the main container element to 0% then back to 100% to toggle visibility in a more efficient way. Let us know if that helps.
Enabling and disabling was not the problem, intsead I observe constant low fps when the rects are visible. The spikes in the graphs are 5 seconds long.
I further investigated and found out, that I can see the problem even without transparent sprites. I observe the problem a soon as I have a big sprite in the Background (full screen) and smaller sprites in the foreground.
I created another test scene in UGui and UiToolkit. This scene consists of 6 opaque VisualElements/Images on a big VisualElement/Panel as a background.
UGui
UiToolkit
On the old Samsungs S5 mini, the UGui variante is able to keep 30 FPS. The UiToolkit version goes down to 19 when the button style Visual Elements in the front are visible.
I know the Samsung S5 mini is really old, but I observed low FPS with newer devices (e.g. Samsung A6 from 2018) which is mid class. The scene used there was basically this test scene with other sprites.
Here are 2 videos of the S5 mini showing the Ui Toolkit variant and the UGui variant.
Following up on this, we were able to reproduce this performance issue using a similar mobile GPU.
To make tracking easier, would you be kind enough to make an official bug report with your project and paste the bug number here? (Help > Report a Bug…). Thanks!
