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

Questions
1

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:

image
image614×682 23.1 KB

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

image
image545×603 19.6 KB

2

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:

3

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.

5 Likes
4

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

5

@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?

6

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:

2 Likes
7

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

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

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

10

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.

11

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

3 Likes
12

Vignette effect is not working for the whole camera view.

13

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