Scene that Fades in

Questions
1

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

2

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

3

HTML

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

JS

 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:

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

:vulcan_salute:

r.

3 Likes
4

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
here is the PG referenced there: https://playground.babylonjs.com/#5Y2GIC#39

3 Likes
5

Or:

  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
    })
  }
4 Likes
6

This is what I was looking for.

Thank you very much.

1 Like
7

You are welcome!

8

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

9

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

10

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

fade in | Babylon.js Playground (babylonjs-playground.com)

11

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

Postprocess is the best way IMHO.

1 Like
12

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

1 Like
13

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)

14

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

material.animations = []

and the push the IAnimationKeys into it…

Humans vs AI 1 : 0 ?

2 Likes
15

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

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)

16

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 :stuck_out_tongue: :grin:
One would need to just invert these values :stuck_out_tongue_closed_eyes:
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 :crazy_face: :rofl:

1 Like
18

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.

19

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

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!

20

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

1 Like
21

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

2 Likes