Fade-in and fade-out between VR scenes

I am quite new to babylonjs. I am trying to load (switch) between several babylon VR scene files one by one with a delay of 60 sec. As a basis I am using this example -> https://playground.babylonjs.com/#JA1ND3#48
However, I am stuck trying to figure out a way to fade in and out between each vr scenes to have a smooth transition. I would appreciate it so much if someone could point me to the right direction. Thanks.

Hi Dan,

Welcome to Babylon! Depending on exactly what effect you’re going for, there are a lot of things you can try, but something simple like the following might be enough to get you started.


This is the default Playground with a little additional logic on lines 31 through 40. Essentially all that I do is set up a callback that will be run every frame, then use that to set the light intensity (and the clear color) to a value determined by whatever system is controlling the fade (in my case, just a simple cosine function pegged to the frame count). Depending on what kinds of assets you’re using, you might need to fade other things (environment lighting, etc.) but the same basic approach should work.

Another thing you could try (which would be simpler in operation, but might require using some slightly more elaborate features) would be to just render black at a changing opacity as a post-process effect. This is definitely more straightforward in principle and would mean that you wouldn’t have to treat various scenes and materials differently (since the fade would be an isolated effect and wouldn’t care at all what else was in the scene), but it might not be as easy to get started with as the other approach.

Thanks @syntheticmagus
The second approach (post-process) seems to be simpler. But I didn’t find any simple examples on the PG especially related to vr.
What do you think if I just put the camera inside a sphere (parenting) and control the visibility (fading) of the sphere? would it work in vr ?

I think that would work. There are some nuances to consider–for example, if your fade’s darkness is rendered on a sphere, the the world will clip through the fade if you get too close to an object–but those may or may not be significant for your use case. You could also consider attaching a plane to the front of the camera rig just beyond the near clip plane and rendering to that; hack-y, but it’d probably give you the effect you want without much risk of anything clipping through and becoming visible. Good luck!

thanks @syntheticmagus !