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

Questions
1

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.

2

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

3

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.

4

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
5

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
6

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!

7

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

8

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