bevyengine / bevyengine/bevy

bevy ui layout (ui_layout_system) calculations are very slow

Open
#22,909 0 comments 1 reaction 0 assignees View on GitHub
A-UI C-Performance S-Needs-Design
Dominant language
Rust
Stars
48.2k
Forks
4.8k
Avg merge
3d 22h
Merged PRs (30d)
161

Description

## Bevy version and features

0.18.0 , bevy ui

## What you did

Created a layout with many entities in a grid that contains interactive animated components.

## What went wrong

ui_layout_system executes for a very long time. When changes happen ui layout recalculation are too costly for even simple layout changes inside interactive widgets.

## Additional information

ui_layout_system execution is too costly:

1) Even when nothing changes execution of ui_layout_system takes a long time, maybe some optimizations or early return could be added if no changes are detected. Maybe separate ui entity trees can be processed in parallel.

2) Small changes inside interactive widgets invalidates taffy layout until ui root entity. Recalculation of this is costly, especially when inside grid layout where all siblings now need to be rechecked.

From discord discussion:
https://discord.com/channels/691052431525675048/743663673393938453/1471161041999368244

> When building interactive components using Bevy UI, we often use multi-layered UI entity hierarchies. For example, a toggle button thumb entity that changes position when the toggle is triggered, or a scrollbar thumb, or checkbox mark. These components may also be animated.
>
> If these components are placed deep inside the UI entity tree, there is significant performance degradation, because even a small change in an interactive component invalidates the entire layout up to the UI root.
>
> In the attached image, you can see the FPS statistics. The red bars show when I clicked an animated toggle button.
>
> Image
>
> Image
>
>
> Possible solutions:
> * Improve the layout engine (Taffy) so that it avoids full layout recalculation when it is not necessary.
> * Introduce separate/virtual Taffy layouts for interactive components. That is, perform a separate layout simulation inside the interactive ui widget, without invalidating the entire layout up to the UI root node.
> * Possibly interactive UI components should be implemented using a different approach (UiTransform hacks?), but in that case, it would be good to clearly inform Bevy engine users what is expected to impact performance and what is not, we need to provide example implementation. But I personally like crates like bevy_flair (css) and that would break them.
>
> **In summary, currently using simple interactive widgets cause huge performance degradation due to layout recalculations**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.