Issue with fade animations

Questions
,
1

We are creating multiple animations for fading in and fade out parts of an assembly in three.js using animation clip and action.
At first selecting the overall assembly and applying fade to it
below fade Value will is 1 for fade in and 0 for fade out.

KF = new THREE.NumberKeyframeTrack(‘.opacity’, [StartTime,EndTime], [mesh.material.opacity, fadeValue]);
let clip = new THREE.AnimationClip(cId.toString(), actualTimes[cId].aEndTime, [KF]);
mClips[cId].push({ clip: clip, material: mesh.material[i] });
let animation_action = Mixer.clipAction(clip, mesh.material[i]);

Later after having 4 different animations like this when we play the actions we notice a transperacy in the parts.
the complete part is not visible in the animation .

After some investigation we found that the issue might be related to depth right and depth test property of the material
Screenshot (187)

but we could fix that for parts that are present at the top of the assembly.

In below case a rod is present under the cube. Using the depth right approach the issue for the square is fixed but the parts that are
present under the surface of the square are still not visible. Is it the issue level of depth these property works.
any suggestions will be helpful.

ax

2

Some more detailed explanations regarding .depthTest and .depthWrite can be found here, here, here or here.

The basic idea from those is that, while using them is required in certain situations, combining them with setting other properties of objects (like sorting or rendering order) can sometimes achieve the desired result.

I’m not what you’d call an expert in these properties, but from your previews it seems that the issue is indeed related to either the depth at which the objects are renedered, or maybe to a matter of synchronizing multiple animation clips (if there are more acting in your preview, that is). Other guys here could provide a more informed description, analysis, or solution to this though.

1 Like