It is very common to insert flashy 3D magic effects (particles) or 3D models of characters between buttons and images in uGUI to create a rich and luxurious game UI. However, if you switch Canvas' render mode to ``Screen Space - Camera'' to do this, you will almost certainly run into problems where 3D objects will hide behind the UI or push through to the front, breaking the drawing order. This article provides an easy-to-understand explanation of this mechanism for disrupting the relationship using the analogy of ``theatrical stage layout,'' and presents a setting procedure for achieving perfect overlapping.

1. Understand with an analogy: ``A collision between the actors and the background board due to a setting mistake by the stage director''

In order to intuitively understand this drawing order collapse bug, let's consider ``A mistake in the placement of the set and actors on the stage of a play''.

Suppose you are creating a theater stage (game screen). On the stage, there are ``actors (UI panels and text)'' who are chatting in the foreground, and a ``huge writing/background board (UI background)'' located slightly in the back. I also wanted to spray a special effects smoke effect (3D particles) in between.

Now, suppose that the stage manager (Unity's sorting engine) has made the instructions for each "standing position (physical distance from the camera)" and "entry permit (Sorting Layer / Order in Layer)" ambiguous. The sorter recognizes that ``actors should stand in front with the highest priority (Canvas drawing order),'' but the assistant who sprays smoke is placed based only on ``how far away from the camera should they be (Plane Distance).'' As a result, the smoke is ejected in front of the actors, causing the smoke to blow out from right in front of the actors' faces (pushing through to the front), or conversely, smoke being ejected further backstage behind the background board, where it cannot be seen by anyone (hidden in the back). The visuals of the play end up collapsing because each player decides their own position based on different rules.

The root cause of this bug is that ``UI elements and the 3D Renderer refer to different decision rules when determining the drawing order''. The UI determines the order based on the hierarchical relationship (Order) within the Canvas, but the 3D Renderer (particles, etc.) determines the order based on the "Z depth (physical distance)" from the camera by default. Unless these two different evaluation criteria are synchronized, it is impossible to achieve the desired superposition.

2. Solution A: Synchronize drawing order with Sorting Layer and Order in Layer

The most reliable and recommended solution in modern Unity designs is to force the 3D object's Renderer to apply the same Sorting Layer and Order rules as the UI system.

Setting steps:

  1. Select the target UI Canvas and check the settings of the "Canvas" component in the inspector.
    • Make sure `Render Mode` is `Screen Space - Camera`.
    • Note the numbers for `Sorting Layer` (e.g. `UI` etc.) and `Order in Layer` (e.g. `10` etc.).
  2. Select the 3D object (such as a particle system or mesh renderer) that you want to sandwich between the UI.
  3. For particles, open the Renderer module. For mesh objects, check the ``Mesh Renderer'' inspector.
  4. Open the ``Sorting Layer'' item and assign the same layer as the Canvas (e.g. `UI`).
  5. Set the value for “Order in Layer”.
    • If you want to display it "between" the UI background (Order = 10) and the front UI button (Order = 20), set the 3D object's `Order in Layer` to ``15''.

*If an object has multiple child renderers (such as a character model divided into multiple parts), you can synchronize the rendering order of all child elements at once by adding a "Sorting Group" component to the parent object and setting Sorting Layer and Order in Layer within it.

3. Solution B: Precisely adjust the Plane Distance (distance from the camera plane)

Another important factor is the "physical distance" from the camera to the UI Canvas. Check the "Plane Distance" setting value in the Canvas inspector. This represents the virtual distance (in meters) from the camera lens to the UI.

If `Plane Distance` is set to `100` (100 meters away), then the relative distance from the camera of any 3D object you want to include in the UI (e.g. the Z coordinate of the Transform) must also be physically located in the range between `0` and `100` (e.g. `50`). If a 3D object is located at Z coordinate `150`, no matter how close you set `Order in Layer`, it will be determined that it is physically deeper than the UI Canvas, and the drawing will be cut off by the depth test.

As a basic design, set the `Plane Distance` as small as possible (e.g. `5` or `10`) and design the 3D object to be placed closely within that extremely narrow space between the camera and the Canvas. This will stabilize the drawing order and prevent positional shifts due to camera work.