I’ve a 3D character mannequin and I’m streaming animation frames from a server to the consumer by way of a WebSocket (I’m utilizing three.js). I want some recommendation on learn how to appropriately combine the streaming information from a socket with the sport loop and learn how to synchronize the animations. The frames include the place, rotation and scale of the skeleton of the mannequin. The frames will not be keyframes, so I haven’t got to interpolate between them, solely set the transforms immediately.
My rendering loop renders at a set interval of 16 ms (i.e. 60 fps). Presently I’m utilizing a buffer technique, the place I buffer the frames as I obtain them. Then in every tick of the render loop I examine if my buffer has a body accessible, dequeue it and replace the skeleton of the mannequin. This all works, however the I’ve two issues:
-
The animation performs too quick, I learn a bit about What’s framerate-independent movement? however I’m not certain if I could make this work if I set the brand new place, rotation immediately.
-
The animation taking part in on the server isn’t in sync with the animation on the consumer. It is a byproduct of my buffering technique I believe, so are there some other approaches I may use to sync up the animations?
Thanks for any recommendation supplied.
