Tips and Resources

Unity UI Particles in URP using Overlay Cameras and Camera Stacks

Unity guide for displaying particles over UI elements in overlay cameras or when using Screen Space - Overlay when using the Universal Render Pipeline without resorting to custom scripts. 

This info is also suitable applicable to the Lightweight Render Pipeline (LWRP)

If you set your UI canvas to Screen Space - Overlay you'll find that your UI elements always appear on top (or in front) of your particles which is probably not the effect you are trying to achieve. In this example / tutorial I'll show you how to use the camera stacks feature of the Universal Render Pipeline URP to ensure your particle effects appear in front of your UI elements. To demonstrate, I'm working on a popup screen the player sees at the end of a level to show how many stars the player has earned. When each star is earned, a particle effect is shown as the star fades in:

The finished star particles effect in front of the the UI elements

GameObject Setup

In this example, each star game object consists of an image component (the dimmed star), an child game object with an image component when the star is awarded (Star CentreEnabled) and child game object that has a particle effect component (the explosion & flash effect) when the star is awarded. The Star Centre game object (and all child game objects) ares on the UI layer. Modify the Z position of the game object containing your particle system so that it is lower than your UI element. For example, the star is Z=0, the ParticleEffect is Z=-30.

Star Game Object setup Star Game Object setup  

Camera Setup

Usually your UI elements are on a canvas set to Screen Space - Overlay to ensure they appear on top of anything else in your scene, including your particle effects. To achieve the desired effect, we are going to use the Screen Space - Camera render mode of our canvas, and create another camera to overlay on top of the main scene camera. We are going to to use the Camera Stacks feature of the URP to achieve this.

In your hierarchy, create a new camera (I've called mine FGCam) to render the canvases I want to appear in front of the main scene camera. Setup the camera component as an Overlay camera and set it's Culling Mask to only the UI layer.

Foreground camera setupForeground camera setup

Select your Main Camera in the hierarchy and scroll to the bottom of the camera component. Click the + button in the stack section, and choose your FGCam to add it to the main camera.

Main camera stack with foreground camera addedMain camera stack with foreground camera added

A camera stack in the URP is basically a method of drawing the output of multiple cameras in the one camera. By setting the render type to overlay, the foreground camera's output will be rendered on top of the main camera.

You also don't want your Main Camera rendering the UI. Select the culling mask drop-down and deselect (untick) the UI layer.

Canvas Setup

The Star is a child of a game object with it's Canvas component set to Screen Space - Camera, render camera set to FGCam, and a Canvas scaler component set to full screen.

Canvas setup with Screen Space and scaler settingsCanvas setup with Screen Space and scaler settings

All done! Now anything that is on the UI layer is being rendered by the FGCam only, which is set to overlay the main camera - no Screen Space - Overlay needed!

References[email protected]/manual/camera-stacking.html