Smooth Interpolated Movement

Hi guys. I am trying to use colyseus with Babylon JS. I am following the Unity example on making a server... I have a version of the server that i ported from the Unity Shooting Gallery. Server works great. However, i cannot get smooth interpolated movement from the clients.

I have tried everything from basic lerping from current entity position to the synced network position (which has unwanted easing). To buffering the last 20 updates from the server and trying to interpolate between the updates (porting different techniques i found on the internet for smoothing out movement)

But i still always get choppy/jittery movement. The one example i see from colyseus in Unity makes no sense.

            // Use interpolation if the target playback time is present in the buffer
            if (proxyStates[0].timestamp > interpolationTime)
            {
                // The longer the time since last update add a delta factor to the lerp speed to get there quicker
                float deltaFactor = (ExampleManager.Instance.GetServerTimeSeconds > proxyStates[0].timestamp) ? (float)(ExampleManager.Instance.GetServerTimeSeconds - proxyStates[0].timestamp) * 0.2f : 0f;

                if (syncLocalPosition) myTransform.localPosition = Vector3.Lerp(myTransform.localPosition, proxyStates[0].pos, Time.deltaTime * (positionLerpSpeed + deltaFactor));

                if (syncLocalRotation && Mathf.Abs(Quaternion.Angle(transform.localRotation, proxyStates[0].rot)) > snapIfAngleIsGreater) myTransform.localRotation = proxyStates[0].rot;

                if (syncLocalRotation) myTransform.localRotation = Quaternion.Slerp(myTransform.localRotation, proxyStates[0].rot, Time.deltaTime * (rotationLerpSpeed + deltaFactor));
            }
            // Use extrapolation (If we didnt get a packet in the last X ms and object had velcoity)
            else
            {
                EntityState latest = proxyStates[0];

                float extrapolationLength = (float)(interpolationTime - latest.timestamp);
                // Don't extrapolation for more than 500 ms, you would need to do that carefully
                if (extrapolationLength < extrapolationLimitMs / 1000f)
                {
                    if (syncLocalPosition) myTransform.localPosition = latest.pos + latest.vel * extrapolationLength;
                    if (syncLocalRotation) myTransform.localRotation = latest.rot;
                }
            }

How the heck could this line ever be true

(ExampleManager.Instance.GetServerTimeSeconds > proxyStates[0].timestamp)

When the GetServerTimeSeconds is in seconds and the proxyStates[0].timestamp is in milliseconds... That should never work. So it seems like the sample would always have a delta factor of 0. So i dont get that.

Anyways after weeks of trying different techniques ... I still get choppy movement.

Can you please make a sample using Javascript client that has smooth interpolated movement.

NOTE: I am willing to pay for this development help. Either from colyseus directly or any other develop who has dealt with smooth interpolated movement

I am basically dead in the water. I got all the other game server stuff working great, but the my shitty movement on the client is freaking deal breaker.

Please Help, Someone :)

Hi @MackeyK24, in the past I've made a simple demonstration of using linear interpolation using PixiJS here: https://github.com/endel/colyseus-pixijs-boilerplate/blob/53b490375f2ce065a880ffc1c87ca9fdee40dbf6/src/client/Application.ts#L119-L123

On this approach, the client-side is interpolating every entity's position towards the latest data available from the server at every frame. No action is being taken at the exact time the update came from the server but at every frame.

Hope this helps, let me know if that works for you

Unfortunately that type of FIXED (0.2) lerping has EASING the closer you get to destination and gives a FLOATY experience. I was hoping someone made an REAL WORLD project with moving client entities around in the scene... smoothly... Bummer :(