search

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
21.84k stars 1.45k forks source link

90% GPU utilization for animated edges #4149

Open kevinschaich opened 1 month ago

kevinschaich commented 1 month ago

Describe the Bug

My GPU and fans are going crazy when edges have animated: true.

I've set onlyRenderVisibleElements={true} and this helps a bit – if I scroll to a section of the canvas with no edges it idles around ~24%. But if I go to an area with even one animated node it's at like 95%.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

See gif below

Expected behavior

Expect lower utilization when there's only a few nodes and one edge in view

Screenshots or Videos

Export-1712892236040

Platform

Additional context

No response

peterkogo commented 1 month ago

Do you have a 120hz screen by any chance? What kind of hardware are you running it on?

Can you check the performance tab in the browser, how long does it take for your GPU to render a frame?

Can you turn off all the shadows on your nodes and see how GPU utilization behaves? Maybe the layer of the shadow is being invalidated each frame and needs to be redrawn which can be quite expensive.

All that being said, might there be a comparison we could make of something similar being achieved with less utilization?

moklick commented 1 month ago

Those are good ideas. Additionally it would be helpful to see the styles of your edges. Are you using opacity/ fill-opacity or stroke-opacity by any chance? Those are performance killer for edges.