Hello everyone,
I am currently trying to implement a project in which I stream animation data from a WebSocket, and animate my glTF model as I receive the frames, by setting the morphTargets (facial animation) and skeletal transforms of the bones directly. So far the animation is working as expected, although it is still a bit laggy and not as smooth as I would like.
Right now I am trying to see how much it “costs” to set the morphTargets, i.e. the execution time, and the relationship between the number of morphTargets I set in my model and the execution time.
For this I wrote a naive script like
//times is array of times for different number of morph targets
let times = [];
//N is total number of morph targets for the skinned mesh in my gltf file
let N = 50;
for(let i = 0; i < N; ++i){
let start = performance.now();
animateMorphTargets(i);
let end = performance.now();
times.push(end-start);
}
console.log(times)
But I am getting inconsistent timings. Sometimes it takes less time to set a larger number of morphTargets for examplle.
Is this the wrong approach to measure the time taken? Is there a more straightforward way to profile performance in three.js?