Fade in and out on camera switch

Questions
1

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?

2

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.

5

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

6

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
7

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

8

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.

9

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.

10

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

11

You can also use the NME:

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

12

https://playground.babylonjs.com/#QYFDDP#433

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

14

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

16

@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:

17

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

18

@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?

19

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 */ });
20

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

21

Wouldn’t it be possible to edit those values just using the built-in Babylon JS animate methods?

I’m really looking for a way to fade the camera in and out using built-in Babylon functions because then I can have a on complete call back.

I like the Fog Idea but isn’t that quite expensive computationally if the scene is quite busy?