Switch material.transparent during animation cause dropped frames

Questions
, ,
1

I want to make an object disappear by an animation like this:

    clip.tracks.push(new THREE.NumberKeyframeTrack(`${effectName}.material.opacity`,
      [0, 0.33, 3.33, 4],
      [1, 0, 0, 1],
    ), new THREE.BooleanKeyframeTrack(`${effectName}.material.transparent`,
      [0, 4],
      [true, false],
    ))

Frames are dropped the first time the animation is played.
Use debug tools, It seems because of the shaders re-compiling.

I try to use renderer.compile(scene, camera), but no effects, like this:

    effectObject.material.transparent = true
    this.renderer.compile(this.scene, this.camera)
    effectObject.material.transparent = false

So, how to resolve this question ?

2

Sometimes (it depends on your objects and how they overlap) it is possible to keep transparent true and modify only opacity from 1 to 0.

1 Like
3

Yes, I have done as you said.

And there are some others transparent object not rendered because of the render order, I have resolved through changing the Object.renderOrder.

Thanks. :grinning: