How to prevent postprocess effects from affecting background color

[Anupam_Das]

Hi All, is there a trick to get post processing to not affect the background color. Im trying to get for example ACES Tone mapping working with an asset but it seems to also impact the background color and that is not desired. One option is to make the background alpha transparent and that way PP does not impact the background. Problem with this approach is there are issues with antialiasing ‘halo’ artifact since the renderer doesnt know how to anti-alias with the background. Any options in the renderer to enable antialiasing with the DOM background?

…Another option is to render the background in one pass and composite the 3D stuff in a different pass (I haven’t played with render passes so im just guessing here).

Any thoughts on the best approach?

[Anupam_Das]

this looks like something in the right direction… using Layers.

Babylon.js Playground

I’ll try a PG example with this and PP and see if PP will still affect the bg layer.

[labris]

Here is the example of CSS background - Background Slideshow with CSS & 3D Ribbon Mesh - BabylonPress
There is ACES tonemapping, still I don’t see any issues.

[Anupam_Das]

here is a repro of our issue in a PG example

Babylon.js Playground

Recall what we are trying to do is simply not have post-processing affect the background color.

in this example what we are doing is setting the clearcolor to transparent so the CSS DOM background color comes through. You will notice postprocessing is not affecting the background as desired.

However antialiasing seems broken no matter how high the samples.
Also if you turn on DOF, you will see a subtile but noticable hard line/halo artifact.

I get that perhaps the renderer cant blend these post processing pixels with the DOM background but then is there a better solution where we can have a background color that is not impacted by post processing that still anti-aliases and DOFs correctly?

[carolhmj]

I think you’ll have to do it in separate passes as usually the background layer is the first rendered, right @sebavan?

[Anupam_Das]

@carolhmj any examples or docs of how to accomplish this. (have not been able to locate) Even an ultra simplistic example would suffice.

[Blake]

Heya, here’s a great example that shows how to do it using a background layer!

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

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.

I just copied that technique into your playground and set the layer to use a raw 1 pixel white texture so that you can set the layer’s color property to whatever background color you want (color and texture are multiplied together in the shader).

Babylon.js Playground

[sebavan]

Thanks @Blake for digging this one up !!!

[carolhmj]

You are a rockstar, @Blake!!!

[Anupam_Das]

@Blake is rockstar for sure! Thank you thank you for the PG example much appreciated. This will be our solution.

[JoeyKo]

Hi, the PG example is so cool !!

I set the vignette enabled and the vignette only affects the meshes.

Babylon.js Playground

If the vignette needs to based on the screen, Is there any way to implement the effect.