Animation Playback Issue.

[SarahMCollier]

I am having an animation playback issue.

Do you know what is going on?

• my frame rate is 60 frames per second. -I have three animation clips.

• when I scale an object to 0 to make them disappear, when I change the playback speed, I can see the subframes (the object at 50% scale), and then I change the playback back to 1, the animation remains broken.

• Re-ticking off and on the animation, clip fixes the problem. -If I leave the animation playing for roughly 2 minutes, the clip becomes out of sync, and you start seeing subframes.

Do you know of any limitations to the player's playback that I should be aware of?

[donmccurdy]

Hi @SarahMCollier! I'm not sure I fully understand the issue — are you able to share a glTF file that demonstrates the problem? You can attach .ZIP archives to GitHub comments.

In the meantime, here are my thoughts. While an animation might contain 60 keyframes per second, there is no guarantee that a viewer can display each keyframe in sequence, precisely 1/60th of a second apart. The viewer has its own framerate (often driven by the web browser at approximately 60fps), and the viewer samples from the keyframes (i.e. interpolates between two neighboring keyframes).

If your animation is set up such that interpolating between two keyframes will show unwanted results, it would be important to export with glTF's "STEP" interpolation, rather than "LINEAR" or "CUBICSPLINE". This will clamp interpolation to the most recent keyframe rather than interpolating.

If you're not sure what you have, or how to use STEP interpolation, try loading the model in https://gltf.report and running the script below:

let updated = 0;

for (const animation of document.getRoot().listAnimations()) {
    for (const sampler of animation.listSamplers()) {
        const interpolation = sampler.getInterpolation();
        if (interpolation === 'LINEAR') {
            sampler.setInterpolation('STEP');
            console.log(`Changed ${interpolation} to STEP.`);
            updated++;
        }
    }
}

console.log(`Updated ${updated} samplers.`);