Fade in and out on camera switch

I have 2 different camera, I want to animation switching scene something like screen fades in and out showing new camera’s target. What would be the most effective and simple way of doing it?

See this PG from this thread to fade out/in to/from black.

You can also use a post process, as said in the thread.

I tried this, my meshes have emissive texture and colours so its not working. Do we have something else I can use?

Had a similar issue with PBR Materials (which ignore Lights) and a GlowLayer (which ignores everything, even the fogDensity)

I do:

  • fade the fogDensity of scene 1 from X to 10 (or any other high amount) and the intensity of the glowLayer to 0
  • fade the fogDensity of scene 2 from 10 to X and the intensity of the glowLayer to X

What if I am using only one scene when I am switching? also is the postProcess is easy to use?

Using the fogDensity can be a tool for one or more scenes. Also it has a nice “reveal” effect, just try it.
PostProcessing would be another way to solve this I guess. Requires additional shaders tho. I first tried the Vignette Shader but it did not work to hide the whole screen properly.

I see, Is it possible to share any PG example so I can have a look, I am doing scene.fogDensity = 10; but its not working.

If you want to do it with a post process, you can take example on the ascii art post process:

PG: https://www.babylonjs-playground.com/#2I28SC#3
Doc: Using the Ascii Art post-process - Babylon.js Documentation
Code: Babylon.js/asciiArtPostProcess.ts at master · BabylonJS/Babylon.js · GitHub

You can also use the NME:

PG: Babylon.js Playground
Material: https://nme.babylonjs.com/#PV60TY#1


You’ll need something like a Skybox (or another mesh, that also get’s affected by the fog) around your scenery

@Evgeni_Popov Thank you so much, I would try methods you suggested if the fog idea does’t work properly. Thanks. :blush:

@Robin_McLaut Is their way to not use Math.sin and use something else, Because I just need this fade in and out effect once. Currently I just did scene.fogDensity = 8, and its like just going black, I want it to give some fade in effect. :sweat_smile:

Hey, this is just an example. Use whatever animation method you want to. I use animejs and sometimes GSAP for animations in my projects.
Babylon has it’s own animation possibilities, but I’ve never used them

@Robin_McLaut Can you please share one example with fade in and out once, I am doing fade in by change the fogDensity to 8 and using setTimeout to make fogDensity 0 again. But I want a little slow to make it fade in and out. I am stuck here, not sure how to do that. I am searching online but it would a great help you would just share an example?

I don’t know what kind of libraries you use besides BabylonJS.
As an example, if you use GitHub - juliangarnier/anime: JavaScript animation engine AnimeJS this would be quite simple:

anime(SCENE, { fogDensity: [0, 8], duration: 5000, easing: 'easeOutQuad' });

if you want to do something when it’s done, anime provides callbacks

anime(SCENE, { fogDensity: [0, 8], duration: 5000, easing: 'easeOutQuad', complete: function () { /* do something here */ });

Thank you it worked, Very sorry for very late response.