# How to prevent postprocess effects from affecting background color **URL:** \ **Category:** Questions\ **Tags:** material, camera, postprocessing\ **Created:** [October 21, 2022, 3:06pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027 "2022-10-21T15:06:39Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Anupam\_Das](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anupam_das/32/16709_2.png) [@Anupam\_Das](https://forum.babylonjs.com/u/Anupam_Das)\ **Post date:** [October 21, 2022, 3:06pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/1 "2022-10-21T15:06:39Z")
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? ---
**Author:** ![Anupam\_Das](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anupam_das/32/16709_2.png) [@Anupam\_Das](https://forum.babylonjs.com/u/Anupam_Das)\ **Post date:** [October 21, 2022, 3:24pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/2 "2022-10-21T15:24:26Z")
this looks like something in the right direction… using Layers. > **[Babylon.js Playground](https://www.babylonjs-playground.com/#08A2BS%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes I’ll try a PG example with this and PP and see if PP will still affect the bg layer. ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [October 21, 2022, 5:31pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/3 "2022-10-21T17:31:00Z")
Here is the example of CSS background - [Background Slideshow with CSS & 3D Ribbon Mesh - BabylonPress](https://babylonpress.org/3d-blog/3d-examples/background-slideshow-ribbon/) There is ACES tonemapping, still I don’t see any issues. ---
**Author:** ![Anupam\_Das](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anupam_das/32/16709_2.png) [@Anupam\_Das](https://forum.babylonjs.com/u/Anupam_Das)\ **Post date:** [October 28, 2022, 2:27am UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/4 "2022-10-28T02:27:11Z")
here is a repro of our issue in a PG example > **[Babylon.js Playground](https://playground.babylonjs.com/#SRZRWV%231146)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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? ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 28, 2022, 10:56am UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/5 "2022-10-28T10:56:58Z")
I think you’ll have to do it in separate passes as usually the background layer is the first rendered, right @sebavan? 🤔 ---
**Author:** ![Anupam\_Das](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anupam_das/32/16709_2.png) [@Anupam\_Das](https://forum.babylonjs.com/u/Anupam_Das)\ **Post date:** [October 28, 2022, 1:48pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/6 "2022-10-28T13:48:34Z")
@carolhmj any examples or docs of how to accomplish this. (have not been able to locate) Even an ultra simplistic example would suffice. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 28, 2022, 6:27pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/7 "2022-10-28T18:27:04Z")
---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [October 29, 2022, 10:36am UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/8 "2022-10-29T10:36:21Z")
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](https://forum.babylonjs.com/t/adding-a-background-image-that-is-not-affected-by-the-default-rendering-pipeline-post-processes/34494/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. 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](https://playground.babylonjs.com/#TJZ72V%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [October 30, 2022, 6:53pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/9 "2022-10-30T18:53:48Z")
Thanks @Blake for digging this one up !!! 🙂 ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 31, 2022, 12:20pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/10 "2022-10-31T12:20:20Z")
You are a rockstar, @Blake!!! 🍻 ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 31, 2022, 12:20pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/11 "2022-10-31T12:20:23Z")
---
**Author:** ![Anupam\_Das](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anupam_das/32/16709_2.png) [@Anupam\_Das](https://forum.babylonjs.com/u/Anupam_Das)\ **Post date:** [November 1, 2022, 3:25pm UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/12 "2022-11-01T15:25:43Z")
@Blake is rockstar for sure! Thank you thank you for the PG example much appreciated. This will be our solution. ---
**Author:** ![JoeyKo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joeyko/32/38115_2.png) [@JoeyKo](https://forum.babylonjs.com/u/JoeyKo)\ **Post date:** [January 18, 2024, 10:32am UTC](https://forum.babylonjs.com/t/how-to-prevent-postprocess-effects-from-affecting-background-color/35027/13 "2024-01-18T10:32:43Z")
Hi, the PG example is so cool !! I set the vignette enabled and the vignette only affects the meshes. > **[Babylon.js Playground](https://playground.babylonjs.com/#TJZ72V%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes If the vignette needs to based on the screen, Is there any way to implement the effect. ![1705573415277](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/9/b9170675e0c8d4411191216759c1869169c64338.jpeg)