I have a 3D character model and I am streaming animation frames from a server to the client via a WebSocket (I am using three.js). I need some advice on how to correctly integrate the streaming data from a socket with the game loop and how to synchronize the animations. The frames contain the position, rotation and scale of the skeleton of the model. The frames are not keyframes, so I don't have to interpolate between them, only set the transforms directly.
My rendering loop renders at a fixed interval of 16 ms (i.e. 60 fps). Currently I am using a buffer strategy, where I buffer the frames as I receive them. Then in each tick of the render loop I check if my buffer has a frame available, dequeue it and update the skeleton of the model. This all works, but the I have two problems:
The animation plays too fast, I read a bit about What is framerate-independent motion? but I am not sure if I can make this work if I set the new position, rotation directly.
The animation playing on the server is not in sync with the animation on the client. This is a byproduct of my buffering strategy I think, so are there any other approaches I could use to sync up the animations?
Thank you for any advice provided.
