I’ve a 3D character mannequin and I’m streaming animation frames from a server to the consumer through a WebSocket (I’m utilizing three.js). I want some recommendation on tips on how to appropriately combine the streaming information from a socket with the sport loop and tips on how to synchronize the animations. The frames comprise the place, rotation and scale of the skeleton of the mannequin. The frames aren’t 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). At present 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 enjoying on the server will not be in sync with the animation on the consumer. This can be a byproduct of my buffering technique I feel, so are there another approaches I may use to sync up the animations?
Thanks for any recommendation supplied.
