Scene that Fades in

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

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

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

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

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
    })
  }

This is what I was looking for.

Thank you very much.

1 Like

You are welcome!