Layer overlay issue

Questions
1

Hi everybody,

I have an issue with the UtilityLayerRenderer, I use it in order to draw an image in front of the 3D scene.

Here is a playground to show you my issue: https://www.babylonjs-playground.com/#DEYAQ5#99

Despite the fact that I have the option autoClearDepthAndStencil set to false in order to keep it in front of the 3D scene, we can see a flash which matches with the fact that I rise the scene light intensity.
It lasts only one frame but still, we shouldn’t see it as my image Layer is already created.

My question is, how can avoid that flash ?

Thanks for your help :wink:

2

I am having a hard time trying to understand what is your goal ?

Maybe there is another solution. In the mean time I ll check why the flash.

1 Like
3

The flash occurs because at the first time you use the utility layer the shader is not ready so with parallel compilation you will only see it once compiled so during a couple of frames you see only the previous scene with high intensity not the utility layer.

4

You can get rid of the problem of having the effect used by the layer not ready by creating the layer right from the start and issueing a render() to make sure the effect is created right away and will (hopefully) be ready 2s later when you take the screenshot:

https://www.babylonjs-playground.com/#DEYAQ5#100

The problem, however, is that the texture won’t be ready right away (see the console logs), that’s why it fails: the layer can’t render properly until the texture is ready.

I find it a little strange we can’t build a texture given a base 64 data string without incurring a delay in the isReady function, as all the data are available straight away for consumption, no need for async requests or something that would postpone the texture availability… Maybe @sebavan knows a way to create a texture that would be ready right away when passing it base64 data (or blob / bytearray for that matter)?

5

Only way would be a raw texture cause else it relies on an img tag where we await the onload event.

1 Like
6

To understand why I need to do that @sebavan, you can check this previous topic explaining what I am trying to achieve: Slowly showing new frame

When we check the layer code: Babylon.js/layer.ts at master · BabylonJS/Babylon.js · GitHub we can see that using onAfterRenderObservable we can managed to wait for the shader to be ready: https://www.babylonjs-playground.com/#DEYAQ5#99

1 Like