Slide In Animation When Switching Scenes

Hello,

I am using this playground: https://www.babylonjs-playground.com/#MXCRPS#69

The playground uses Babylon’s multiscene propety where I am rendering two scenes, one containing a box, and the other containing a cylinder. I am also using a GUI button to switch between scenes.

Everytime the GUI button is pressed, one scene stops rendering and the other scene starts rendering. I want to have a nice effect when rendering each scene like a slide in effect for the object whenever the scene is rendered. Is this possible with Babylon?

Thank you for your time!

If you want the 2 scenes to be visible at the same time, you’ll need to render to a texture and then mix it with a full screen quad (post process)
if you only need a transition effect, a single post process should do the work.
Like the vignette post process and an animated weight
https://www.babylonjs-playground.com/#J9H084#11

1 Like

Hello @Cedric,

Yes I want to apply the second idea that you stated. I only want a transition effect when rendering each scene. Everytime I press on the GUI button, I want the transition effect to take place. I always want the two scenes seperated; never visible at the same time.

Do you have an example of a transition effect, a slide in transition effect for example, that we can implement in the playground that I linked?

You can use the animation system:

https://www.babylonjs-playground.com/#MXCRPS#70

In the PG, I animate the fov of the current scene camera to make the object zoom and at the end of the animation I switch to the other scene.

3 Likes

Hello @Evgeni_Popov,

Yes this is what I am looking for! Maybe something very similar to what you did but more of an animation to the sides rather than zooming in. I’ll definetly tinker with the animations available in Babylon.

Thank you for your help!

1 Like