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.
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.
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)