Exclude certain meshes from being affected by postprocessing

I’m currently using some postprocessing effects in my game (SSAO and bloom amongst others). I want some meshes in my scene to be unaffected by these effects (namely - player HP bars and nameplates).

I found this thread Post Process Masking / Excluding Meshes which explains that postprocessing works at the pixel / post-rendering level so this isn’t easy to do.

I also came across this documentation showing it’s possible to render multiple scenes at once. Since the postprocessing pipelines are attached to particular scenes, I’m expecting it would be possible to use this to achieve what I want - having one scene for the in-game world with the PP effects, and another for the HP bars/UI elements that will be overlaid on top, without PP effects.

Just wanted to double check that my idea will work, and also wondering if there are any other alternatives out there as well. Thanks!

(I had an alternative idea, which was to render the HP bars and nameplates with HTML/CSS instead of making them meshes in the Babylon scene. To do this, I need to figure out the viewport coordinates of the player meshes, I’ve asked a question around that here: Figure out (x, y) position of mesh in 2D canvas space)

Actually, post processes are attached to a camera, not to a scene. So you can create an additional camera without any post processes attached to it to render meshes/GUI that should not be affected by post processes.

See for eg https://playground.babylonjs.com/#7CR6WZ#4

In this PG, there’s a second camera which is created to display the GUI and is using a specific layerMask value for the camera/the GUI layer so that only the GUI is displayed by this camera.

2 Likes

^^ that.

Additionally, if you have a lot of meshes, you could consider adding an observer for scene.onMeshAddedObservable (might not be the right name, sorry!) that looks at a tag or other attribute on the mesh to determine which layer mask to assign it.

HTH!

1 Like

Thanks for the replies!

I’ve given it a go based on the Playground link posted by @Evgeni_Popov and have been running into a strange issue:

The layer masks seem to be working, however, when I set

scene.activeCameras = [cam1, cam2];

only the meshes that the latter camera (in this case cam2) renders are displayed on the screen.

I did some digging and managed to reproduce this issue on a playground - turns out it’s got to do with my attaching of the DefaultRenderingPipeline onto one of the cameras. Please see the comments I’ve left on L28-31: Babylon.js Playground

Thanks in advance for the help!

Something like this, is it? (sry for the rough drafting but at least you have the base)

2 Likes

Same problem for me as for @mawa. Any suggested solutions? @Evgeni_Popov
Thank you so much.

Need to turn on postprocessing only for the later camera, but then it overlays the background camera

I actually solved my problem. Did you check the PG just above?
Else, would you have a PG to share?

1 Like

Thank you @mawa check your amazing example, still no solution to using both of the cameras, once you turn on the camera for post-processing it overlays and the second layer is not visible.

My task is to exclude background from the post-processing, not the foreground layer

Can you provide a PG, please? I’m not sure what it is you call ‘the foreground’ but I can assure you that with a 2 (or multiple) cameras approach, you can exclude PP from either camera. In fact, I have this in my current scene just now.

Here is another example. It differs a bit from what you need but the overlay scenes approach should work for your case as well - https://www.babylonjs-playground.com/#0503TW#16
There are 2 scenes and 2 cameras there.

1 Like

Thank you for the answer.
My case is that I have a transparent occluder mesh body (disableColorWrite = true) inside the model (coat) that I’d like to apply SSAO.

The task here is to exclude transparent objects inside from SSAO rendering
@Evgeni_Popov

I can’t add anything new to my answer above.

Post-processes are attached to a camera and apply to what the camera has rendered. If you don’t want something to be affected by post-processing, you have to render that thing with a different camera.

1 Like