90% GPU utilization for animated edges

[kevinschaich]

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

Platform

• OS: MacOS
• Browser: Arc
• Version: 1.38.0

Additional context

No response

[peterkogo]

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]

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.