[Niagara 5.3] Sorting Mini Tutorial

Sorting in Niagara

The way sorting works for particles in Niagara is obscure and not well explained. This article is meant as a basic introduction into how sorting works for Niagara and some of the techniques that are available for sorting.

Note : All elements in the scene will be compared to the depth buffer (unless opted out of) before drawing, so translucent elements will draw behind opaque elements correctly no matter which of the following options you use.

High level overview

Niagara has 3 layers of sorting : Particle, Emitter and Component.
Each of these elements can be sorted between each other but none can be sorted outside of their scope. For example a Particle can sort between 2 of it’s own emitter, but cannot sort in between 2 particles of a different emitter, nor can an emitter be sorted in between emitters of a different component.

It can be useful to think of components as systems, just keep in mind that these settings happen on the component level, and can as such be different for 2 components using the same system.

image


Particle Sorting

(Sort Mode)

Particle sorting can be set using Sort Mode in the Sorting Settings (part of NiagaraRenderer). By default particles will simply be drawn by the order they are found in the buffer. This is highly unpredictable, but if your particle don’t overlap a lot this is usually not an issue.
View Depth and View Distance render by distance to the camera plane, and distance to the camera position respectively.
Custom Ascending and Descending use the value set in Custom Sorting Binding to sort particles. Default is age (so it will be the same as cascade’s sort by age mode), but any arbitrary value can be used (for example sorting by size etc…)

It is important to note that even if a sort value of a particle in this emitter is larger than one in another emitter, this particle will still sort below it if that emitter has a larger sort order hint


Emitter Sorting

(Sort Order Hint)

By default emitters will be drawn by creation order (not activation order, but order by which they have been added to the system). This is completely arbitrary. You can change this behavior by setting the sort order hint.

Emitters with larger sort order hints are draw later and as such on top of emitters with lower sort order hints. (higher number = on top)
This sorting only happens within the component, so even if the sort order hint of an emitter in this component is higher than one in a different component, that other component’s emitters will still draw on top of that component is drawn later.


Component Sorting

All components in unreal engine that have translucent elements will have their translucent elements rendered from back to front. This means that as long as the objects position is somewhat relevant to the actual position of the pixels, closer translucent objects will draw in front of further translucent objects.

You can fiddle with this using the Translucency Sort Distance Offset and Translucency Sort Priority parameters of the component.

Translucency Sort Distance Offset will draw elements as if they were placed further or closer to the camera.
Translucency Sort Priority will draw any element with a higher priority after elements with lower priority (and as such, always on top)


Conclusion

It can be valuable to have a good grasp on the limitations of this system as they will vastly improve your ability to plan out feasibility of the look of an effect. Some things, like complex intersecting translucent geometry simply isn’t possibly unless every pixel is sorted individually, so try and plan effects around these kinds of limitations.

If you have any questions, corrections or suggestions, feel free to leave them in this thread.

30 Likes

Nice tutorial, thanks for the clarification, I’m trying to sort my emitters so that they render in front of each other, but the sort order isn’t working even though I adjusted the sort hint order accordingly, any ideas what the issue might be? Btw my emitters is a mesh with an opaque material, no translucent mats or anything like that, I’m asking in case there is a limitation

Edit: the issue is solved, this only works on transparent materials