Applying full screen image effects to UI only

Questions & Answers
1

I want to be able to apply a full-screen image effect like a glow on just my UI elements, without also applying the effect to the rest of my scene. As I understand it, the right approach is something like this:

  1. Set the main scene camera Culling Mask to exclude UI layer.
  2. Create a second camera for rendering the UI, orthographic, forward rendering path
  3. Set the UI Canvas Render Mode to Screen Space - Camera, and link to the UI Camera.
  4. On the UI Camera, set Clear Flags to Depth Only and Culling Mask to just the UI layer. (Setting Clear Flags to Don’t Clear here would create a smearing effect, right?)

At this point, any image effects applied to the UI camera will be applied to the entire render buffer, so a glow would affect both the UI and the scene. To get around this:

  1. Set Target Texture for the UI Camera to a RenderTexture.
  2. Blit the render texture to the game screen.

That last step is where I’m stuck. How do I combine this with the buffer from the main camera? Would the correct approach be to create a Screen Space - Overlay canvas with an Image component to display the RenderTexture on top of the game screen? I’m guessing some scripting is required.

Thanks in advance!

2

I don’t know how to achieve the desired effect with an ‘FPP-like’ ShaderLab syntax, but I done it with regular VP/FP shaders. I also made some changes to the original approach.

Instead of using an asset-based RenderTexture, I used temporal RT, which allowed to match RT size to the camera size. Stretching of UI looked very bad.

When I made it, I got the image from the left:

86489-multicam-test-image.png

You may notice the black area around the text. It’s because we render the UI on the black background. Yes, the background is fully transparent, but it’s still black, and when we alpha-blend (0, 0, 0, 0.1) with our image we get a slightly dim pixel. I thought that it isn’t the effect the author want to achieve, so, I replaced a UI-on-the-black image with a UI-over-the-scene image and get the image shown on the right.

Honestly, I doubt that it’s the desired effect but maybe I helped to realize some subtle details of the original task. The reworked project is [86490-multicam-test-fix.zip|86490].