# Scene that Fades in

**URL:** <https://forum.babylonjs.com/t/scene-that-fades-in/26667>\
**Category:** Questions\
**Created:** [January 12, 2022, 1:24pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667 "2022-01-12T13:24:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![trueshot](https://avatars.discourse-cdn.com/v4/letter/t/b5a626/32.png) [@trueshot](https://forum.babylonjs.com/u/trueshot)\
**Post date:** [January 12, 2022, 1:24pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/1 "2022-01-12T13:24:36Z")

</div>

I want to fade in the renderCanvas.

In my use case, the Babylon scene precisely overlays the web page. But it flicker’s when the canvas element is show. I want to change the visibility of the renderCanvas so it is invisible when it comes in, and then smoothly becomes visible.

Thanks

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 12, 2022, 5:09pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/2 "2022-01-12T17:09:48Z")

</div>

do you have a repro? maybe on codepen or something?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [January 12, 2022, 5:37pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/3 "2022-01-12T17:37:59Z")

</div>

HTML

```auto
    <canvas id="bjs-canvas" width="1920" height="1080" class="bjs-canvas" />

```

JS

```auto
 const renderCanvas = document.getElementById("bjs-canvas")
 function fade() {
    if (opacity < 1) {
      opacity += 0.015
      if (opacity < 1) {
        window.requestAnimationFrame(fade)
      }
      renderCanvas.style.opacity = opacity.toPrecision(4)
    }
  }

  window.requestAnimationFrame(fade)

```

SCSS:

```auto
.bjs-canvas
  width: 100%
  height: 100%
  opacity: 0

```

🖖

r.

---

<div class="post-metadata">

**Author:** ![jgonzosan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jgonzosan/32/10007_2.png) [@jgonzosan](https://forum.babylonjs.com/u/jgonzosan)\
**Post date:** [January 12, 2022, 8:20pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/4 "2022-01-12T20:20:27Z")

</div>

Why not create a custom loading screen that uses the same color as your webpage? Using something like this: [Creating Custom Loading Screens | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/scene/customLoadingScreen)  
here is the PG referenced there: [https://playground.babylonjs.com/#5Y2GIC#39](https://playground.babylonjs.com/#5Y2GIC#39)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [January 13, 2022, 5:59am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/5 "2022-01-13T05:59:24Z")

</div>

Or:

```auto
  function fadeInScene() {
    Effect.ShadersStore['fadePixelShader'] =
      'precision highp float;' +
      'varying vec2 vUV;' +
      'uniform sampler2D textureSampler; ' +
      'uniform float fadeLevel; ' +
      'void main(void){' +
      'vec4 baseColor = texture2D(textureSampler, vUV) * fadeLevel;' +
      'baseColor.a = 1.0;' +
      'gl_FragColor = baseColor;' +
      '}'

    let fadeLevel = 1.0
    const postProcess = new PostProcess('Fade', 'fade', ['fadeLevel'], null, 1.0, camera)
    postProcess.onApply = effect => {
      effect.setFloat('fadeLevel', fadeLevel)
    }

    let alpha = 0
    scene.registerBeforeRender(function() {
      fadeLevel = Math.abs(Math.cos(alpha))

      alpha += 0.01
    })
  }

```

---

<div class="post-metadata">

**Author:** ![trueshot](https://avatars.discourse-cdn.com/v4/letter/t/b5a626/32.png) [@trueshot](https://forum.babylonjs.com/u/trueshot)\
**Post date:** [January 13, 2022, 8:51am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/6 "2022-01-13T08:51:40Z")

</div>

This is what I was looking for.

Thank you very much.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [January 13, 2022, 10:24am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/7 "2022-01-13T10:24:36Z")

</div>

You are welcome!

---

<div class="post-metadata">

**Author:** ![jamessimo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jamessimo/32/26847_2.png) [@jamessimo](https://forum.babylonjs.com/u/jamessimo)\
**Post date:** [April 22, 2023, 5:38am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/8 "2023-04-22T05:38:56Z")

</div>

Instead of hooking into the beforeRender loop, Bali be changed via Babylon JS animation?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [April 22, 2023, 8:49am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/9 "2023-04-22T08:49:23Z")

</div>

You can use whatever technique you like to animate the value of the `fadeLevel` variable.

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [April 22, 2023, 10:18am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/10 "2023-04-22T10:18:44Z")

</div>

Another method for fade in/out is to change the light intensity

[fade in | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#6Q4UH7)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [April 22, 2023, 1:45pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/11 "2023-04-22T13:45:43Z")

</div>

This will not work for every scene. Add an emissive material and it will not work … 😉

Postprocess is the best way IMHO.

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [April 22, 2023, 2:28pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/12 "2023-04-22T14:28:21Z")

</div>

In this case, one could programmatically dim the backlight of the monitor or the power of the computer! 😁

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [April 22, 2023, 2:48pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/13 "2023-04-22T14:48:54Z")

</div>

I asked the super brain AI. Its solution was simple, but does not work because material has no animations property.

[fade in | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#6Q4UH7#1)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [April 22, 2023, 4:26pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/14 "2023-04-22T16:26:56Z")

</div>

> [@CodingCrusader](#):
>
> I asked the super brain AI.

You should ask one the forum. The solution is as simple as to add the property by yourself:

```auto
material.animations = []

```

and the push the `IAnimationKey`s into it…

Humans vs AI 1 : 0 ?

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [April 23, 2023, 8:11am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/15 "2023-04-23T08:11:28Z")

</div>

I forgot for a second that I am coding with Javascript. It seems that with this language is everything possible! 😃

Thank you for pointing it out. Here is the fixed example for future generations who are not familiar with shader coding or if you want to fade out a specific part of your scene…  
[fade in | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#6Q4UH7#2)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 23, 2023, 9:20am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/16 "2023-04-23T09:20:31Z")

</div>

So it looks like neither the AI nor the humans are able to actually read the title of the post.  
This is a fade out, not a fade in 😛 😁  
One would need to just invert these values 😝  
And then, isn’t this all a bit basic and outdated. With NME and on pp, we could do much sexier fade-in or -out today (in just about no time). What about a fade that would go from substract to blend, like the loading screens in red dead redemption2. With a bit of lenseffect on the edges. I guess you Guys realize that we can do all of that since v5 (or even v4.2). In the future, I expect more ‘sexy’ transitions to be shared (preferably in a format I can simply soak-up and integrate 🤪 🤣

---

<div class="post-metadata">

**Author:** ![jamessimo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jamessimo/32/26847_2.png) [@jamessimo](https://forum.babylonjs.com/u/jamessimo)\
**Post date:** [April 23, 2023, 3:23pm UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/18 "2023-04-23T15:23:19Z")

</div>

I’m gonna try NME soon.

I had some promiseing results using the postprocess.exposure, setting it to 0 via Babylon.Animation. But enabling post processing makes everything look dull and grey.

---

<div class="post-metadata">

**Author:** ![jamessimo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jamessimo/32/26847_2.png) [@jamessimo](https://forum.babylonjs.com/u/jamessimo)\
**Post date:** [April 25, 2023, 4:38am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/19 "2023-04-25T04:38:29Z")

</div>

I think i am going crazy and need help/an answer. In a case like this;

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#2FGYE8%2336)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I am using a PostProcess shader to fade out. It works but I need to inject into the BeforeScene Render to do it. I really want to use Babylons built in Animation system to control the “fadeLevel” var so I can have callbacks and use easing types.

You can un-comment the code to see it working, I have the animation running but it wont change the fadeLevel Float.

Is it impossible to use animations to control shader vars?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![11128](https://avatars.discourse-cdn.com/v4/letter/1/d07c76/32.png) [@11128](https://forum.babylonjs.com/u/11128)\
**Post date:** [April 25, 2023, 5:18am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/20 "2023-04-25T05:18:28Z")

</div>

is this what you want?  
[https://www.babylonjs-playground.com/#2FGYE8#38](https://www.babylonjs-playground.com/#2FGYE8#38)

---

<div class="post-metadata">

**Author:** ![jamessimo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jamessimo/32/26847_2.png) [@jamessimo](https://forum.babylonjs.com/u/jamessimo)\
**Post date:** [April 25, 2023, 5:23am UTC](https://forum.babylonjs.com/t/scene-that-fades-in/26667/21 "2023-04-25T05:23:18Z")

</div>

OMG YES! I never new about Animation groups and normalzing!!!  
Thank you so much! I just added a callback it it works great!!!

[Next page](https://forum.babylonjs.com/t/scene-that-fades-in/26667.md?page=2)