Unity's Visual Effect Graph (VFX Graph) is an amazing tool that can simulate and draw tens of thousands to millions of particles in real time by taking advantage of the GPU's overwhelming parallel computing power. However, when emitting a large amount of "translucent (alpha blend)" particles such as magical auras, thick fog, or smoke, have you ever encountered a serious drawing bug where ``When you move the camera angle, the particles that are supposed to be in the background are somehow drawn on top of the particles in the foreground, causing the context to flicker violently and the three-dimensional effect to collapse''? In this article, we will thoroughly explain the root cause of the graphics failure of this translucent blend, an example that is easy to understand even for beginners, and the setting procedure for optimizing the GPU load while maintaining a three-dimensional effect.
1. Understanding with an analogy: ``Overlapping pictures on acrylic plates'' and ``sorting while blindfolded''
In order to visually understand this ``disruption of the context of translucent particles (sorting bug)'', let's consider ``three-dimensional art made by stacking many transparent acrylic plates (cel paintings)'' as an example.
You are trying to create a beautiful landscape with depth by layering "several translucent acrylic sheets (sparkles and smoke particles)" in order from the front to the back.
The absolute rule for creating a physically and visually correct three-dimensional effect is to "Stack the acrylic sheets in order from the background at the back to the front (back to front)". By doing this, the picture on the board in the back will be slightly visible through the semi-transparent picture in the foreground, creating a beautiful transparent gradation.
However, the staff (default VFX Graph), who only wanted to finish the work quickly (prioritizing drawing speed), did not check the depth of the boards (distance from the camera) at all, and haphazardly stacked the acrylic boards in the order in which they were delivered from the warehouse (GPU memory index order).
As a result, the "giant smoke board that should be at the back" will be placed on top of the "light board at the character's feet that should be in the foreground." Borders that should be transparent stand out unnaturally, messing up the context, and creating a strange picture that hurts the eyes. This is the true nature of blend collapse due to "no sorting". To solve this problem, it is necessary to instruct the staff to ``Before placing the acrylic plates, be sure to sort them in the order of distance from the camera before stacking them.''
2. Root cause: Alpha blending mathematical constraints and GPU parallelism
Technically speaking, when drawing opaque objects, the GPU uses a mechanism called the "Z buffer (depth buffer)" to automatically determine the context on a pixel-by-pixel basis. Therefore, no matter what order you draw them, they will have the correct context.
However, Alpha blending calculations for transparent objects are completely dependent on the mathematical drawing order (back to front). The formula for alpha blending is as follows:
最終カラー = ソースカラー * ソースアルファ + デスティネーションカラー * (1 - ソースアルファ)
If the order of multiplication and addition changes, the calculation result (final color) will change. Therefore, you must always draw the "particle farthest from the camera" first, and then paint the "particles in front" over it.
VFX Graph initially maximizes performance by completely bypassing per-particle camera distance calculations and sorting (Sorting = None) and drawing directly into GPU memory in the order they are generated. This is because the processing of sorting tens of thousands of objects every frame places a heavy burden on even GPUs, which are good at parallel processing. This specification causes a breakdown in context when a large number of translucent particles are piled up.
3. Solution approach: Enabling GPU depth sorting
You can enable fast sorting on the GPU side by changing the settings of the Output context block that performs drawing on the VFX Graph editor.
Step 1: Select Output context and expand Sorting
- Open the target VFX Graph file.
- Click on the header of the Output Particle Quad (or Output Particle Mesh) to be drawn at the far right of the graph to select it.
- Expand the Sorting category that appears in the Inspector window.
Step 2: Change the Sort property
Open the drop-down menu for the Sort parameter and change the value from None (default) to one of the following:
- `Depth` (Depth sorting/recommended): Sort based on the parallel projection distance of the camera's line of sight vector (forward direction). Processing is fast and provides the most stable results for general camera work.
- `Distance`: Sort based on the absolute straight-line distance from the camera lens center (viewpoint position). More accurate results for wide-angle cameras and situations where the camera passes through particles.
[Output Particle Quad Inspector]
▼ Sorting
Sort: Depth (None から変更してGPUソートを有効化)
*With this, Unity will internally run an ultra-high-speed parallel sorting algorithm such as "Bitonic Sort" on the GPU and write to the color buffer in order from the farthest particles, completely eliminating the translucent overlap bug.
4. Practical guidelines for reducing performance trade-offs
GPU sorting is powerful, but the operational load cannot be ignored in mobile and VR environments. Use in conjunction with the following optimizations.
- Change the blend mode (most effective): Consider changing the blend mode for smoke or magic to Additive or Multiply instead of Alpha Blend. Since addition and multiplication are mathematical additions and multiplications, the calculation results do not change even if the drawing order changes. In other words, additive blending has the powerful advantage of not visually breaking the context even without sorting (even if
Sort = Noneremains). - Capacity limit: Sorting cost increases exponentially ($O(N \log^2 N)$) with the number of particles. For systems that enable sorting, clamp
Capacityto the minimum necessary (e.g., below a few thousand items).