mini-tokyo-3d icon indicating copy to clipboard operation
mini-tokyo-3d copied to clipboard

[Eco Mode] High CPU usage while train station is selected

Open yne opened this issue 3 years ago • 0 comments

While using the Eco Mode, the map rendering only use 14%, which is very nice !

However, when a train is selected and the bottom train-panel shows up, the CPU usage goes (and stay) at 60%.

The issue seems to be related to this glowing animation on the station "circle" : image https://github.com/nagix/mini-tokyo-3d/blob/1866fb454cdbfc69683ec05930453d05db948319/src/train-panel.js#L99-L117

This animation querySelect and update the existing "circle" with a new SVG element on every frame.

Possible solutions:

  • Slow down the animation according to the "Eco Mode" instead of every requestAnimationFrame
  • Replace the animation with a more "static" design (for example a colored outline)
  • Use a CSS animation: glow 2s steps(2) infinite; with a GPU-friendly attribute (opacity, translate3d ...)

If you don't have time, I can Pull Request you a fix.

PS: They are others animations, that are redrawn 60 times / sec (but they are less CPU intensive, so it's okay)

yne avatar Jan 02 '22 21:01 yne