Bloom effect on model with background without bloom

Hello,

https://playcanvas.com/project/786157/overview/bloom-effect - simple demonstration of a problem

thanks to tutorials I managed to implement bloom effect on camera. Bloom is affecting only layer named “bloom”. Models in “world” layer is unaffected by bloom effect which is what I want.

But there is also layer “background_UI” which should be unaffected by the bloom effect (camera which renders this layer doesn’t have bloom.js attached), but somehow it still renders layer with bloom effect on it.
Any idea why and how to fix it? Thanks.

Looks like it is related to render order of the cameras. Whatever is rendered prior to the Camera with the Bloom post effect is affected. If you change the order of the World and Bloom cameras, you will see the same issue with the blue cube.

you could use the debug engine (enabled in Editor), set this to true at the start up: app.scene.layers.logRenderActions (need to add it to some script or create one)
and see what it prints out in console logs. Maybe copy & paste it here. It has a list of cameras it renders, layers within each and render target it uses. That could give you some understanding of what is going on.

1 Like

It looks like when bloom layer is rendered, every layer rendered before automatically have bloom effect. Even when camera rendering it doesn’t have bloom script attached. (Camera-Bloom is the only camera with bloom.js attached)

In engine, if you enable post effects on a camera, then automatically all previous cameras that render to the same render target (framebuffer in this case) are considered a camera stack and are all switched to rendering to a texture and postprocessed at the end. And the result is copied into your original framebuffer).

You’re hoping that yourCamera-Background gets rendered to framebuffer, and only Camera-Bloom renders to texture and gets postprocessed. Missing bit there is that what happens next … the best we can do is to to copy that postprocessed render target into framebuffer, which would overwrite what Camera-Background rendered there. It would need some step to compose those somehow.

So a solution here is for you to set up the Camera-Bloom to render to a texture, and apply postprocessing on it (see example for this step here: https://github.com/playcanvas/engine/pull/3070 ). So this would render first (set up camera priority to 0 perhaps).

Then next (and final) camera would be Camera-World. It wold render Backgrond Layer first. Then it would use texture from your Camera-Bloom with full screen quad to add your bloomed effect composed on top. Perhaps just additive blend, but sky is the limit on the composition type. And next layer in this camera would we World.

Bu note that meshes in the World might overwrite some bloom effects? It’s likely you would want to swap last two steps. Render World first, and then compose the bloom texture over the top.

3 Likes

Yes, that is the correct solution. Thanks for your help!