Bloom script is effecting element entities

[yaswanth]

hi,
we’ve bloom script enabled on our camera. Everything is working fine, except element entities are visible from all sides and any entities on top of the element component are getting transparent.
With Bloom (Transparency case):

Without Bloom:

The numbers image on the bottom is an Image element entity and the top coins are render entities.

Bloom on Side View for Elements:

Bloom off Side View for elements:

How can we fix this?

[Leonidas]

Hi @yaswanth,

So, post effects will automatically not get applied to any entity rendered on the UI element. I gather those elements are in another layer e.g. World?

You can change the layer at which post effects stop executing using the following camera property:

https://developer.playcanvas.com/api/pc.CameraComponent.html#disablePostEffectsLayer

A good strategy is to create a new layer that comes after the World layer in the layers order, and add those elements at the layer. Then set this layer ID to the disablePostEffectsLayer property.

[yaswanth]

@Leonidas, Thanks for you reply. The transparency issue and side visibility issue is resolved.
We’ve created a new layer called disablePostEffects and added it’s id to the camera disablePostEffectsLayer property. Now bloom is applied to elements in the UI layer. Even if we added disablePostEffects layer to those elements, the bloom effect is still there.

The side buttons are blooming. How can we stop this?

[Leonidas]

Is the new layer sorted to come before the UI layer in the Layers list?

@mvaligursky any idea?

[yaswanth]

Yes, here’s the order of layers

[mvaligursky]

try setting app.scene.layers.logRenderActions to true at start up (using a script), use the debug engine … and see what it prints out … post it here for us to see please. Notice when the post effects gets triggered, and also the order of rendering.

[yaswanth]

@mvaligursky

Render Actions for composition: null playcanvas.dbg.js:10368:13
0 Cam: Camera           Lay: World            OPAQUE ENABLED  Meshes:  173 RT: Camera-posteffect-0       Clear: Color Depth Stencil Lights: (47/47)            CAM-FIRST playcanvas.dbg.js:10379:14
1 Cam: Camera           Lay: Depth            OPAQUE DISABLED Meshes:  0 RT: -                         Clear: Color Depth Stencil Lights: (0/0)           playcanvas.dbg.js:10379:14
2 Cam: Camera           Lay: Skybox           OPAQUE ENABLED  Meshes:  1 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
3 Cam: Camera           Lay: World            TRANSP ENABLED  Meshes:  80 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (47/47)           playcanvas.dbg.js:10379:14
4 Cam: Camera           Lay: Immediate        OPAQUE ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
5 Cam: Camera           Lay: Immediate        TRANSP ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
6 Cam: Camera           Lay: UI               TRANSP ENABLED  Meshes:  69 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)            POSTPROCESS playcanvas.dbg.js:10379:14
Render Actions for composition: null playcanvas.dbg.js:10368:13
0 Cam: Camera           Lay: World            OPAQUE ENABLED  Meshes:  173 RT: Camera-posteffect-0       Clear: Color Depth Stencil Lights: (47/47)            CAM-FIRST playcanvas.dbg.js:10379:14
1 Cam: Camera           Lay: Depth            OPAQUE DISABLED Meshes:  0 RT: -                         Clear: Color Depth Stencil Lights: (0/0)           playcanvas.dbg.js:10379:14
2 Cam: Camera           Lay: Skybox           OPAQUE ENABLED  Meshes:  1 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
3 Cam: Camera           Lay: World            TRANSP ENABLED  Meshes:  80 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (47/47)           playcanvas.dbg.js:10379:14
4 Cam: Camera           Lay: Immediate        OPAQUE ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
5 Cam: Camera           Lay: Immediate        TRANSP ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
6 Cam: Camera           Lay: UI               TRANSP ENABLED  Meshes:  69 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)            POSTPROCESS playcanvas.dbg.js:10379:14

Here’s render log

[yaswanth]

@mvaligursky, @Leonidas we forgot to add the disablePostEffects layer to the camera. After adding them to the camera the bloom effect for UI elements is gone. But now the transparency issue and side visibility were not resolved.
Here’s the render log after adding disablePostEffects layer to the camera.

Render Actions for composition: null playcanvas.dbg.js:10368:13
0 Cam: Camera           Lay: World            OPAQUE ENABLED  Meshes:  173 RT: Camera-posteffect-0       Clear: Color Depth Stencil Lights: (47/47)            CAM-FIRST playcanvas.dbg.js:10379:14
1 Cam: Camera           Lay: Depth            OPAQUE DISABLED Meshes:  0 RT: -                         Clear: Color Depth Stencil Lights: (0/0)           playcanvas.dbg.js:10379:14
2 Cam: Camera           Lay: Skybox           OPAQUE ENABLED  Meshes:  1 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
3 Cam: Camera           Lay: World            TRANSP ENABLED  Meshes:  80 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (47/47)           playcanvas.dbg.js:10379:14
4 Cam: Camera           Lay: Immediate        OPAQUE ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
5 Cam: Camera           Lay: Immediate        TRANSP ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)            POSTPROCESS playcanvas.dbg.js:10379:14
6 Cam: Camera           Lay: disablePostEffects OPAQUE ENABLED  Meshes:  0 RT: -                         Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
7 Cam: Camera           Lay: UI               TRANSP ENABLED  Meshes:  69 RT: -                         Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
Render Actions for composition: null playcanvas.dbg.js:10368:13
0 Cam: Camera           Lay: World            OPAQUE ENABLED  Meshes:  173 RT: Camera-posteffect-0       Clear: Color Depth Stencil Lights: (47/47)            CAM-FIRST playcanvas.dbg.js:10379:14
1 Cam: Camera           Lay: Depth            OPAQUE DISABLED Meshes:  0 RT: -                         Clear: Color Depth Stencil Lights: (0/0)           playcanvas.dbg.js:10379:14
2 Cam: Camera           Lay: Skybox           OPAQUE ENABLED  Meshes:  1 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
3 Cam: Camera           Lay: World            TRANSP ENABLED  Meshes:  80 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (47/47)           playcanvas.dbg.js:10379:14
4 Cam: Camera           Lay: Immediate        OPAQUE ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
5 Cam: Camera           Lay: Immediate        TRANSP ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)            POSTPROCESS playcanvas.dbg.js:10379:14
6 Cam: Camera           Lay: disablePostEffects OPAQUE ENABLED  Meshes:  0 RT: -                         Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
7 Cam: Camera           Lay: UI               TRANSP ENABLED  Meshes:  69 RT: -                         Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
Render Actions for composition: null playcanvas.dbg.js:10368:13
0 Cam: Camera           Lay: World            OPAQUE ENABLED  Meshes:  174 RT: Camera-posteffect-0       Clear: Color Depth Stencil Lights: (47/47)            CAM-FIRST playcanvas.dbg.js:10379:14
1 Cam: Camera           Lay: Depth            OPAQUE DISABLED Meshes:  0 RT: -                         Clear: Color Depth Stencil Lights: (0/0)           playcanvas.dbg.js:10379:14
2 Cam: Camera           Lay: Skybox           OPAQUE ENABLED  Meshes:  1 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
3 Cam: Camera           Lay: World            TRANSP ENABLED  Meshes:  94 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (47/47)           playcanvas.dbg.js:10379:14
4 Cam: Camera           Lay: Immediate        OPAQUE ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
5 Cam: Camera           Lay: Immediate        TRANSP ENABLED  Meshes:  0 RT: Camera-posteffect-0       Clear: ..... ..... ....... Lights: (0/0)            POSTPROCESS playcanvas.dbg.js:10379:14
6 Cam: Camera           Lay: disablePostEffects OPAQUE ENABLED  Meshes:  0 RT: -                         Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14
7 Cam: Camera           Lay: UI               TRANSP ENABLED  Meshes:  67 RT: -                         Clear: ..... ..... ....... Lights: (0/0)           playcanvas.dbg.js:10379:14

[mvaligursky]

This how it works. All layers before postprocessing are rendered to a texture (render target), which has a depth buffer. All works well here, if object is behind another object, it’s not visible due to depth buffer.

Then post processing is applied - this basically renders image from the mentioned render target, into a framebuffer (this is what is displayed on the screen). But the depth data is not (cannot easily be) copied. And so whatever renders after postprocessing has no data in the depth buffer, so it renders over everything. Which usually works well for 2D UI, but not anything in 3D world if it needs to be behind other things.

Typically handling of this usually involves masking what is postprocessed, as it does not have a simple solution. See more here. There were more threads discussing this as well I think.

Apply Bloom only to specific Materials

SpectorJS is your friend … you can capture the frame and inspect what is going on, including shaders. You will most likely find that all shaders on opaque meshes output 1 in alpha channel … or maybe all 0, not sure, capture frame and look at the shader. You need to modify shaders so that meshes you want bloomed output 1, and others output 0 (or grayscale depending on level of bloom). At the moment bloom shader converts pixel into greyscale and if it’s brighter than some value it blooms it. Yo…