Draw inbetween clearCanvas and babylonjs draw

[saltemishel]

Hi All,

Is it possible to draw something after babylon clear canvas and right before it draws all the 3d components?

If not, is it possible to prerender the image use for the code following, instead of start loading it when I call this script?

1. var url = "https://upload.wikimedia.org/wikipedia/commons/e/e9/Gradient_1024x768.jpg";
   var background = new BABYLON.Layer("back", url, scene);
   background.isBackground = true;

   Thanks.

[Wingnut]

Hi S!  My comment here... is off-topic a bit, but if you can make adjustments to DOM things on your platform/system.... you have some more possible options.

Consider this.  HTML <img> or <canvas> elements... have a .style (CSS stylesheet)... and CSS styles have fun things like .zIndex, .display, .opacity, .visibility, etc.

Soooooo...    You could build your initial HTML doc... so that an <img> element is sitting atop the renderCanvas <canvas> element.  Then, when the "blocked" scene is finished, you could adjust the zIndex of <img> and <canvas> ...within scene.executeWhenReady() ...hiding/removing the image and bringing the canvas to front. 

I don't know if this would work for you, but there are some options, there.  There may be other options for custom loading screens... if that is what you seek.  Other comments are sure to come, but I wanted to remind you of the possible HTML/CSS-based options.

Other forum helpers... this issue is still open... help at will. (thx)

[saltemishel]

Hi W!

Hmm..speaking of that, I wonder if I can know when does the image of that background function gets loaded...

[Wingnut]

Hmm.  Ok, if you set...

scene.beforeRender =()=> {
     - set all scene.meshes to .setEnabled(false);
     - activate background layer
     - delete/null scene.beforeRender;
}
- wait however long you wish - setTimer
- set all scene.meshes to .setEnabled(true);
return scene;

I have no idea if that would work (or why you want this).    But, after the very first run of scene.beforeRender, we delete it... clear it out, null it to nothingness... so it doesn't run again before the next frame. 

During that one run, it disables all mesh, activates background layer, and self-destructs.    Then you can fiddle around with timers or whatever else you want to do... and re-enable all mesh at your leisure.  *shrug*

Again, not sure.  Might explode and kill the cat. 

[GameMonetize]

What about using scene.onBeforeCameraRenderObservable ? 

 

scene.onBeforeCameraRenderObservable.add(function(){

...

});

[saltemishel]

Thanks for both your suggestions!

Turns out that there's difference between 2d canvas and 3d canvas, I can't draw image the simple way like I did for 2d canvas. ^^"

End up I just put a background canvas behind babylon canvas to show the background always like Wingnut suggested in the first post.

[GameMonetize]

hehe! You can also think about a DynamicTexture on a plane or even better using Canvas2D feature