Three.js: GLB transparent animation bug

[lo-th]

Description of the problem

Hi; sometime with glb model i add full scene
when i play animation object become transparent and flickering.
problem that appeared recently on dev version of three.
I can't understand where it comes from, if someone has already noticed this problem ?

Three.js version

• [X] Dev
• [ ] r115
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[lo-th]

is only for keyframe animation
skinning work well

[lo-th]

is since new propriety in AnimationClip and AnimationAction
blendMode: 2500
why a blendmode in animation ?

[lo-th]

Find something
is appen when export from blender and disable
Always Sample Animation
http://lo-th.github.io/root/glb/

[Mugen87]

The model works correctly in Babylon.js sandbox and gltf-viewer (using r112). It also works correctly with this commit a0535a3e1b4eeaacbf22f8bc7c9673efc885c785 which is one of the commits right before #18822 was merged.

/ping @c-morten

[donmccurdy]

Note that GLTFLoader uses a custom interpolant (cubic spline) for some animations. The Always Sample Animation option in Blender would generally force linear interpolation, and avoid that custom interpolant. Perhaps it's this interpolation that got broken by the change?

https://github.com/mrdoob/three.js/blob/21ab863e90cc31b5d08e0cc0fa07e2a0551460ec/examples/js/loaders/GLTFLoader.js#L980-L1009

@lo-th if you're avoiding the "Always Sample Animation" option to reduce file size, you may want to consider exporting with sampling, then using gltfpack to downsample and reduce file size. Exporting with sampling tends to work better in general, so (while I agree this is a bug), it's worth considering too.

[lo-th]

yes i also think is a better option, is enable by default in last blender.
i also use babylone exporter from 3ds and i don't have any problem

[Mugen87]

@mrdoob Maybe it's better to revert #18822 until this bug is fixed. IMO, it's somewhat a blocker for r116.

I can confirm that reverting the PR via git revert -m 1 82b6c5a5cb56fc694335994f09395dbd3dc25345 solves the issue.

[c-morten]

I was able to repro this issue and find a fix, it was a one line change to #18822. @mrdoob please advise on next steps I need to take since the PR has been reverted.

[Mugen87]

@mrdoob please advise on next steps I need to take since the PR has been reverted.

The PR was not reverted, I've just verified the revert on my local computer. Feel free to make a new PR with your change.

[c-morten]

Here is the PR with the fix: https://github.com/mrdoob/three.js/pull/19256

[Mugen87]

Side note: We should add a glTF asset to the repo that uses GLTFCubicSplineInterpolant. Or do we already have something appropriate around?

[donmccurdy]

I'm pretty sure there are a few, but I'd have to dig into the binary files to figure out which ones. 😅

A unit test on PropertyMixer for custom interpolants might also help avoid this issue in the future.

[donmccurdy]

Thanks @c-morten!

[donmccurdy]

And thanks @lo-th for the report. :)