Deterministic physics sync with clients - rubberbanding issue

[finkon]

Update: I am using this library to perform snapshot interpolation for me : https://github.com/geckosio/snapshot-interpolation

 

This could be just an implimentation issue on my end.

My setup I am tryign to achieve is syncing positions to the client (x, y) with snapshot interpolation. My server is actually running matter.js physics in headless mode, simulating physics on server side.

I send position updates to the clients 15 frames per second. With snapshot interpolation.

Then on client side i calculate the interpolation.

All seems to be good, but I run into a strange behavior.... every once in a while the sprites that are moving based on position updates to the server seem to act strangely. They jerk around and sometime rubberband, then it smooths out again.

Would anyone know what approach I could do to fix that?

I am using Phaser 3 as client, moving the positions within the update loop (60fps).
The server sends position updates at 15fps by simulating physics on server side (matter.js).

public update(time, delta): void {

    const snapshot = this.SI.calcInterpolation('x y', 'balls') // interpolated
 
 if (snapshot) {
    const { state } = snapshot
    const { percentage } = snapshot
    state.forEach(s => {
      const { x, y, entityId } = s
        const ballId = entityId as number
        //get the specific instance of the ball in Phaser
        const ball = this.playerBallGroup.getBallById(ballId);


        let differenceX = x as number - ball.x;
        let differenceY = y as number - ball.y;
        
        ball.x += differenceX * delta * 0.1;
        ball.y += differenceY * delta * 0.1;
 
    })
    }
}

 

Any help is appreciated - been struggling with this for quite some time.