Adding a background image that is not affected by the Default Rendering Pipeline post processes

Is it possible to have a flat background image not being affected by the post processes of the default rendering pipeline? I’ve been doing some tests using a Layer with no luck, as the BG image gets blurred as well:


I also made some tests with another camera and a layerMask, but then the BG image is not showing:

Hmm. I’m not too sure about the layer object.
I can do it with a plane but not with a layer

Calling in @Evgeni_Popov on your case. He’s the ultimate master for this. :grinning: :wink:

You can do it as you did with two cameras but by blending the last post process of the pipeline with the current framebuffer (which contains the layer image at that point) instead of simply replacing the framebuffer with the result of the pipeline (which is the default behaviour).

Here’s a PG that is doing that:

You need to set a scene clear color with alpha=0 for it to work as expected.

7 Likes

Thank you very much @Evgeni_Popov, this solved our issue and also helped us understand more how postprocesses work!

@Evgeni_Popov @sebavan Update! I have found some breakage with recent updates to babylon with this particular technique and we’re experiencing this after updating to ^5.53.1. (^5.21.0 was working for us) See PG example:

this happens when we set the HDR mode in the DefaultRenderingPipeline to true

We do need HDR PP , we cant really rely on LDR.

Is this a bug or is there a better way to do this?

A post process texture is not cleared when alpha mode is enabled, that’s why it is not working in your PG.

This PR will fix the problem:

Once the PR is merged, you can set forceAutoClearInAlphaMode to true to clear the buffer:

3 Likes

Thanks, we’ll get this in once the official patch version is released.!

1 Like
use css   
.canvas {
background:url(/bgc.png);
}
scene.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)

@Evgeni_Popov do you have an ETA on when the next patch version will be released?

Not sure if this is approach that fit your needs. But maybe you could do the following.

  1. set scene.clearColor to new Color4(0,0,0,0); To make it transparent.
  2. set the background of the canvas element to “transparent”
  3. create a div or some other HTML element which will exist behind the canvas element, effectively acting as background for the scene.

So basically, background is not part of the scene, it’s the separate HTML element which exists behind the canvas, and both canvas and scene clearColor are set to transparent so the background element gets visible.

We are going to release a new npm version within the hour.

3 Likes

Vignette effect is not working for the whole camera view.

This is the point as it uses a separate camera without post process ?

@Evgeni_Popov @sebavan

Hey folks,

I ran into an issue when I use: forceAutoClearInAlphaMode.

I am doing similar thing like this PG (this is from another thread)

After I evoke forceAutoClearInAlphaMode in my own code, I do see the all the post textures get cleared. However, the yellow background is also disappeared. The listed PG doesnt have that artifacts but in my own code base I encountered it…I couldnt replicate the issue in a PG but I do observe the problem…

Any clue for this issue?
Many thanks,
Tawibox

It’s hard to tell without a PG. You could try using Spector. By looking at a snapshot, you should be able to find where the problem lies.

1 Like

@Evgeni_Popov

Thank you!!

Looks I found a way to solve the issue even without understanding it…:sweat_smile:

I added a clearColor to the lastPostProcess and looks the issue is gone:

lastPostProcess.alphaMode = Constants.ALPHA_COMBINE;
lastPostProcess.clearColor = new Color4(0, 0, 0, 0);
lastPostProcess.forceAutoClearInAlphaMode = true;

Is it an ok way to do it? What does this property do?
Tawibox

Well, it just clears the texture with the color you provided, before applying the post-process :slight_smile:
I’m glad you found a fix!

1 Like