In 3D action games and simulation games, VFX effects with translucent textures, such as flames, smoke, explosions, magical barriers, or flying sparks, are essential elements to enrich the screen. However, when placing these multiple translucent effects on top of each other, have you ever encountered problems with the drawing order (broken sorting), such as ``black smoke that is supposed to be in the background somehow overlays the intense flames in the foreground'' or ``when you rotate the camera angle, the front and back of the flames and smoke change violently, making them flicker as if they were blinking''? This is caused by physical limitations in translucent rendering. In this article, we will explain how this context collapse bug works, using the analogy of a "translucent silk curtain in a theater" that is easy for beginners to understand, and present the adjustment procedure and best practices for "Sorting Fudge" to explicitly control this bug.
1. Understanding with an analogy: ``Semi-transparent curtains in a theater and the director's position''
In order to intuitively understand the problem of flickering in the drawing order of this translucent effect, let's imagine ``a stage production in which many thin translucent silk curtains are stacked on top of one another on a theater stage''.
The stage director (developer) placed a ``red silk curtain (fire effect)'' in the foreground, and placed a ``black silk curtain (smoke effect)'' slightly behind it. If you use a normal cardboard wall (an opaque object), you don't have to worry about the order of drawing because the wall in the back is physically hidden by the wall in the foreground.
However, both curtains are "semi-transparent". Theater directors (rendering engines) must adhere to the following order (drawing from the back to the front): ``Be sure to hang the black curtains in the back on the stage first, and then hang the red curtains in the front on top of that'' (drawing from the back to the front) in order to create a beautiful layered appearance.
However, if the hanging points of the two curtains (center coordinates of the object) are very close, each time the director moves the camera position (the player's viewpoint) a little, he can't measure it and wonders, "Huh? Which one is farther back?" After hesitating, he ends up changing the hanging order every frame and second. As a result, the visuals on stage flickered violently, with black smoke suddenly cutting in front of the red flames and hanging up, and then moving back the next moment, leaving the audience disillusioned.
This is 'Limit of centroid distance sorting' for translucent objects. It is necessary to give the director an explicit priority rule (Sorting Fudge): ``No matter how close they are, always hang the black curtains with the black curtains in the back and the red curtains in the front!''
2. Root cause: Invalid depth write and simple centroid sorting
In 3D graphics, opaque objects use a mechanism called a "depth buffer" to accurately overwrite the context on a pixel-by-pixel basis and draw them. However, translucent objects (Render Queue = Transparent) need to show the background behind them, so basically they do not write to the Z buffer (Depth Write) (they are disabled).
Since accurate pixel determination using the depth buffer cannot be used, Unity instead calculates ``the straight-line distance from the center of gravity of each game object's transform to the camera'', and **``draws objects in order from the farthest object from the camera toward you (Painter's Algorithm)''** to simulate the context.
If the centers of gravity of the effects are very close to each other, changing the camera viewpoint angle by just a few degrees will change the order of the calculated "distances from the camera". As a result, the drawing order is reversed every frame, causing a flicker bug where the front and back of overlapping parts flicker violently.
3. Specific solution using Sorting Fudge
In order to suppress this sorting fluctuation and fix the drawing order, set up Sorting Fudge in the Renderer module of Particle System. Sorting Fudge is a "virtual depth value (bias)" that is added to the object's center of gravity distance when calculating distance. **The smaller the number (minus side), the closer it is to the camera (front), and the larger the number, the farther from the camera (back)**.
Setting example: Fixed flame and smoke sorting
- Select the "flame" Particle System you want to display in the foreground.
- Expand the Renderer module in the Inspector.
- Set the Sorting Fudge value to `0` (or a smaller value).
- Select the "smoke" Particle System you want to display in the background.
- Similarly, set the value of Sorting Fudge in Renderer to `20` (a value greater than the flame).
// Effects you want to draw preferentially in the foreground (flames, light rays, etc.)
[Renderer] -> Sorting Fudge: 0 (or -10)
// Effects you want to draw in the background (smoke, haze, background fog, etc.)
[Renderer] -> Sorting Fudge: 20 (or 50)With this, no matter how much the camera rotates, the distance of the "smoke" will always be calculated to be 20 units further back than the flame, so the drawing order will be completely fixed at "Smoke (back) ➔ Flame (front)" and flickering will be 100% eliminated.
4. Quick reference table for semi-transparent sorting priority order
This is a table that organizes what rules are prioritized when Unity sorts translucent assets. If adjusting the Sorting Fudge doesn't change the order, check for conflicting higher layer settings.
| Priority | Sort key item | Summary |
|---|---|---|
| 1 (first priority) | Sorting Layer | Drawing layer defined in editor tag settings. Any fudge or distance is ignored between different layers. |
| 2 | Order in Layer | Priority order by integer value within the same Sorting Layer. The larger the number, the closer it will be drawn. |
| 3 | Render Queue | Cue written in the material's shader path (Transparent is 3000). The higher the number, the closer you are. |
| 4 | Sorting Fudge | Depth bias for individual effects on the same layer and within the same cue. The smaller the value, the closer you are. |
| 5 (bottom) | Camera Distance | The actual distance from the physical camera to the center of the object, all of the above being equal. |