Particle System Idle Bug

[hpinkos]

• Open https://sandcastle.cesium.com/?src=Particle%20System%20Weather.html
• Go to another tab for 10ish seconds
• Go back to the particle tab
• The snow particles disappear, then start to come back too many and too big, then they finally settle back to a normal rate

[j9liu]

I think this is happening because browsers will throttle Javascript / WebGL timers when they are in the background. I tried to disable this throttling in Google Chrome, but the bug still happens regardless of the setting. I also observed that this happens in Microsoft Edge.

I'm looking for ways to circumvent this, but it doesn't seem like others on the Internet have found solutions or workarounds.

EDIT: More specifically, requestAnimationFrame is probably the culprit. It is slowed when the tab isn't active. It looks like someone else ran into a similar issue where their animations would suddenly happen all at once when they returned to the inactive tab: julianshapiro/velocity#176. They seem to have implemented a workaround in response, though I'm not sure how applicable it is for our purposes as well.

[j9liu]

So, a summary of what I think is happening:

1. User switches to another tab, and on the particle system tab, requestAnimationFrame is not called because the tab is in the background.
2. User waits for 10+ seconds.
3. User returns to tab.
   • requestAnimationFrame is called but the timestep that is passed into it is 10+ seconds
   • this results in a particle system that advances a really long time, and all the particles die because they've exceeded their lifespan. It takes a while for a steady stream of particles to restart. Not sure what is causing it to overflow for a few seconds afterwards though

Some solutions:

• We could try to rely on setTimeout or setInterval to continue running the particle system in the background, but they experience a similar amount of throttling in browsers, such that they only fire once per second.
• We could pause the render loop when the tab is hidden, so that the timestep upon returning is equal to 0.
• look into HackTimer
• (probably too drastic) learn to use WebWorkers
• (undesirable, but interesting enough to keep track of anyway) play a quiet sound in a background, which forces the browser to retain performance

[lilleyse]

Maybe a low tech solution will work. If the delta is too big just pretend it never happened.

  if (dt > 1.0) {
    dt = 0.0;
  }

Though I'm not sure if a hack like that would be acceptable to add to core CesiumJS.

But maybe a similar workaround can be added to the Particle System Weather demo or to the Norad Tracks Santa app where I assume this issue originated from.

[ggetz]

Also reported in #11171.

[engineerhe]

Hi,@ggetz ,Thank you very much.You have solved my problem.