grouped people when tab is switched

[kfarr]

when there are animated characters and I go to another tab then come back to that tab, the characteres are grouped together instead of walking randomly

[Algorush]

I have not yet understood the reasons for this behavior. This is due to the way animation works in AFRAME. It is possible that when the page is not active the animation component or requestAnimationFrame stops remembering the state of the animation object and then after returning to the page it starts the animation again for all objects and therefore all pedestrians start from the beginning of the street at the same time

[Algorush]

I created demo with pure AFRAME and animation with boxes and getting same issue. I'll ask about it on AFRAME discord or slack

[kfarr]

I think the problem is that at a certain point once tabbing away the page loses focus, especially including webgl context. When the tab is opened again, a-frame and three.js "magic" re-establish webgl context and animations are restarted. Characters are constructed of 2 animations:

• 1. Running only once: animate their initial walking from random point z or -z until the end of the length of the street
• 2. Running on a loop: animate walking from beginning of street until end of street, infinite loop

I think that upon regaining webgl context animation 2 restarts, which then puts all characters starting from the street beginning.

There are a variety of possible solutions for this issue. It may be worth considering future goals for pedestrian (and vehicle) movement.

[Algorush]

I asked in Aframe slack channel about it, and it turns out that it's issue in anime.js library. I'll try to fix it in library. And also I have some options to fix in another way. And yes, you right about restart animation after time before tab switching. But I’m not yet sure that this is due to the loss of WebGL context

[kfarr]

I'm not convinced it's an issue with the underlying library anime.js, it may be working as designed but A-Frame invokes it in a way that results in this behavior.

When the page loses context is it A-Frame / three.js or Anime.js that says again "oops context lost, restart things, time to animate each object!" and it looks at the animation as defined in the component value, and it says to loop from the same z position.

[mrxz]

Arriving at this issue from the Slack channel. I've created an issue on the A-Frame repository to keep track of the underlying issue (https://github.com/aframevr/aframe/issues/5361), as I do believe this is likely caused by the 'time leakage' bug in anime.js. At the very least that can cause the described problem (see also the linked glitch).

I'm not convinced that a WebGL context lost could cause this. As far as I know A-Frame doesn't really handle context lost/restore, so it wouldn't even surprise me if it couldn't gracefully recover at all (it's already a challenge with plain Three.js). But a context lost should always be logged as a warning in the dev console (by Three.js), so it's easy to determine if that might play a part here.

[kfarr]

Thanks @mrxz , @Algorush looks like you're right, how feasible is fixing this in anime.js vs. another workaround in our app?

[Algorush]

@kfarr it's turned out to be more complicated than at first glance. I tried to solve it through anime.js code and if I solve it this way it takes longer. I also tried different options to fix it using tricks on the code side in 3dStreet, but so far without success. I'll try other options and also will try to solve on the anime.js side

[Algorush]

I came up with a different way to animate random objects that would avoid repeating sequences of objects. And it can also avoid I hope the error of grouping objects (for example pedestrians) when switching tab. I will implement and test it