Proper way to use FadeInOutBehavior

Hello again beautiful community of Babylonjs!

I have been trying to do a clean fade in and out of meshes with no success yet.

The easiest way would be to use FadeInOutBehavior but as you can see (PG below) there are some weird artifacts in the fading between the meshes, this can be fixed by using needDepthPrePass, but if I do this, I see a constant blinking on mobile (Samsung galaxy s6).

I tried to create an animation that clones the material and enables needDepthPrePass on the clone. And then just before the animation starts I switch the materials only during the fade, but this creates a single annoying blink when the switch takes place.

Are there any other ways to do a clean mesh fade? Am I missing something?

Here is the PG example:
https://playground.babylonjs.com/#WTYUPH

Thank you

Adding @sebavan

1 Like

Unfortunately it looks like an issue with the S6 GPU as it should not blink :frowning:

Could you try rendering only one frame of both materials as soon as they are ready (like behind a loading screen) to see if your one blink only is related to the shader compilation ?

1 Like

The blinking was indeed because of the shader compilation, but now that I want to change the material only during the fade, I get the same artifacts on the last frames of the fade in on mobile (tested on iphone 7, galaxy s6 and galaxy tablet a6):

https://playground.babylonjs.com/#WTYUPH#3

This is because you swap materials too early :slight_smile: https://playground.babylonjs.com/#WTYUPH#5

You could instead check the visibility of the node to swap only if it is 1

Or you could add an observable in the FadeInOutBehavior class to detect the end of it ? if you want to contribute otherwise I am glad to add it ?

Hey sebavan,

I have very limited programing skills to really be able to contribute, but I came with a manual “solution” for the moment, which still has some blinking during the fading on mobile, but its ok if this is the best I can get.

https://playground.babylonjs.com/#WTYUPH#6