search

vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.67k stars 825 forks source link

Directional Particles speed is dependent on refresh rate #557

Open Andrewknackstedt opened 2 years ago

Andrewknackstedt commented 2 years ago

Describe the bug Directional particles move too fast on high refresh rate displays.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://vasturiano.github.io/3d-force-graph/example/curved-links/
  2. Watch the directional particles fly at 6X standard speed.

Expected behavior Particle speed to match real time.

Desktop (please complete the following information):

Additional context I have a 360hz display, I can barely tell the particles are directional because they move so fast.

This is definitely a low-priority issue if ever there was one ;). Just wanted to report it.

P31N commented 2 years ago

You can set the speed of the particles within the json / csv, however I do understand what you mean that the default speed should be equivalent to the speed of the straight line particles. Just thought that this might help

.linkDirectionalParticleSpeed() // add numerical value of speed

Andrewknackstedt commented 2 years ago

Yeah. I'm just reporting this since it's a bug.

I figure most people run 60hz displays nowadays, but as mainstream devices start shipping with higher refresh rate displays, it is good to be mindful that the animation speed isn't synced with absolute time but the number of frames rendered

vasturiano commented 2 years ago

@Andrewknackstedt thanks for reaching out.

The speed of the particles is closely tied to the browser's frame-rate. In fact, the docs say:

...directional particles speed, expressed as the ratio of the link length to travel per frame. Values above 0.5 are discouraged.

So, it is expected that higher animation frame-rates lead to higher particle speed. But generally frame-rate is capped at 60fps if everything is running optimally. I wasn't aware that displays with high refresh rate can affect the frame-rate of the browser. What frame-rates are you observing in your browser? You can check it with https://www.testufo.com/ for example. I get a steady 60fps.

Andrewknackstedt commented 2 years ago

I get 360 frames per second, as my browser tries to refresh each time a new frame is needed for my display. image