Unstable/sudden position changes

[tommhuth]

I've made a simple game where the player moves forward at a constant speed and the path the player navigates is automatically generated in front (and clear behind) the player. I did this with a custom Cannonjs implementation based off of React Three Fiber's own example. Curious of the potential performance benefits of using this library, I decided to swap out my own physics handling.

However, as the player moves forward and the path is generated, the screen will flicker as the position of the simulated bodies seems to change for a single frame (temporarily), as if the syncing of something is temporarily off. It also looks like it is only the meshes that changes, as so far as I can tell, it does not seem to affect the simulated bodies. Check out the following CodeSandbox. Because is happens so quickly, here's two screenshots right before and as it happens:

Before:

Only a couple of frames later:

A few frames later again:

I can't see anywhere in my code where body position is changed, bodies are only added and removed. Is it the way state is handled thru Zustand? My own physics handling did not have this problem (running on the main thread), so could this be a side effect of having the simulation running in a separate thread? Or is there something else I'm missing?

[codynova]

My guess would be the state management, but there are a lot of variables here. I'd try to get a minimum viable reproduction of the problem, without the state management etc. and go from there.

[tommhuth]

@codynova I trimmed down the Codesandbox to a minimal one: https://codesandbox.io/s/unstable-boxes2-gg7mr

No zustand, just useState, where boxes are added and removed randomly at an interval. The jumpy behaviour persists as in the first example.

(Removing the use-cannon parts fixes the problem.)

[codynova]

@drcmda Did you mention that you had seen an issue with use-cannon with Body positions on the first frame after they've been added? That seems to be what's happening here

[drcmda]

yes, it seems like for a single frame objects appear at 0 position for some reason.

[tommhuth]

@codynova I've also noticed that bug (which my own Cannon implementation had and which I simply solved with setting the mesh position directly on first render only and make sure position is supplied to new Body() as well), but is this relevant to this because here all meshes' position seem to get jumbled, not just a single new one, and it seems to only happen when something is removed? Almost as if there's an index thats off?