# Switch material.transparent during animation cause dropped frames

**URL:** <https://discourse.threejs.org/t/switch-material-transparent-during-animation-cause-dropped-frames/56182>\
**Category:** Questions\
**Tags:** materials, animation, shaders\
**Created:** [September 20, 2023, 6:17am UTC](https://discourse.threejs.org/t/switch-material-transparent-during-animation-cause-dropped-frames/56182 "2023-09-20T06:17:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShiHongyu](https://avatars.discourse-cdn.com/v4/letter/s/ee7513/32.png) [@ShiHongyu](https://discourse.threejs.org/u/ShiHongyu)\
**Post date:** [September 20, 2023, 6:17am UTC](https://discourse.threejs.org/t/switch-material-transparent-during-animation-cause-dropped-frames/56182/1 "2023-09-20T06:17:12Z")

</div>

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

```javascript
    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:

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

```

So, how to resolve this question ?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [September 20, 2023, 8:15am UTC](https://discourse.threejs.org/t/switch-material-transparent-during-animation-cause-dropped-frames/56182/2 "2023-09-20T08:15:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ShiHongyu](https://avatars.discourse-cdn.com/v4/letter/s/ee7513/32.png) [@ShiHongyu](https://discourse.threejs.org/u/ShiHongyu)\
**Post date:** [September 20, 2023, 9:10am UTC](https://discourse.threejs.org/t/switch-material-transparent-during-animation-cause-dropped-frames/56182/3 "2023-09-20T09:10:17Z")

</div>

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. 😀