Can I apply a post-process to multiple cameras at once?

I have one camera to draw the main scene and a second orthographic camera that is being used to draw some HUD elements. I would like to apply a single post-process pass to both of them at once. Is this possible?

So behind the scenes, that would be:

  • Render camera 1 to render target
  • Render camera 2 to same render target
  • Draw render target to screen using post-process

This was also asked in Multiple cameras, layerMasks and post-process issue (only one camera gets rendered) , but they were able to not use multiple cameras as a workaround.

So you only need to apply the postprocess to camera2 in your case because camera 2 will render on top of camera 1

Except that seems to completely wipe out whatever camera 1 rendered.

https://www.babylonjs-playground.com/#BD7W0P

When there is no post process, you should see two spheres (technically one sphere rendered twice). But when I add the post process, only the sphere as seen from camera 2 is rendered.

Ok I get the problem now :wink:

Maybe you could use passPostProcess to get the rendering of each camera:

    var copy1 = new BABYLON.PassPostProcess("copy", 1, camera1);
    var copy2 = new BABYLON.PassPostProcess("copy2", 1, camera2);

And then create your own postprocess to merge then (easy: Use PostProcesses - Babylon.js Documentation ) and use it as the entry for the blur postprocess?

Ultimately why do you need multiple cameras?

1 Like

Thanks, I’ll give that a try later.

I thought it would be an easy way to handle drawing some HUD elements in screen space. Maybe not?

[EDIT] They are meshes so that I can do fancy shader stuff.

1 Like

I have something working with PassPostProcess and a custom post process. But I’m not 100% sure that I have the alpha handling right, nor do I understand why I need to have it set up as I do.

https://www.babylonjs-playground.com/#BD7W0P#1

I’m not sure whether I’ll keep this approach or try to get it working with one camera, but it works for now!

This is super fine. You env do not need the copy2 in this case:
https://www.babylonjs-playground.com/#BD7W0P#2

I think the intent is clearer if you set the clear color instead of the alpha mode:

https://www.babylonjs-playground.com/#BD7W0P#3