Does the Graphic Renderer have sorting control?

[JCorvinus]

I'm working with a UI that needs to have the ability to fade in and out of existence. I've noticed that if I use the DynamicUnlitTransparent shader (which is the default), I get a bunch of alpha sorting artifacts, specifically, the sort order of the entire UI being wrong from certain viewing angles. This is normal, I think, since Unity has a hard time sorting objects that are really close together (And 3d UI tends to have lots of that), but if I wasn't using Graphic Renderer, I'd be able to hack around this using material.renderQueue. That approach won't work here, and I can't seem to find anything about sorting in the documentation. What should I do? I'm using only the default Graphic types.

For reference, it looks like this:

And is supposed to look like this:

[alexmarcolina]

Ah, that's a tricky one. Unfortunately there are no explicit sorting control features in the Graphic Renderer yet, but there might be some things you can do depending on your use case.

• Use a separate graphic group for all opaque graphics, with an opaque shader. Looking at your use case I can't quite tell if you have any opaque graphics at all, but if you do, having the opaque objects use an opaque shader will solve the sorting for them, and possibly improve sorting of transparent graphics against opaque objects.
• Use a few different transparent graphic groups. You can modify the layer of each graphic group independently (each graphic group has it's own single material). If you don't need super fine control of the sorting of individual graphics, having control over only a few groups might be enough for your use case?
• Use a baked renderer for all of the transparent graphics if the specific draw order is constant. The draw order is the same order that the UI follows (children before parents in hierarchy order).

This all assumes that there is some amount of control that you don't need. If you do indeed need dynamic sorting control on a per-graphic basis, unfortunately that functionality doesn't exist right now. As far as I understand, there would need to be a unique material for each graphic, which isn't something that was considered when building the system unfortunately.

One thing would work, but it would require changing the way your graphics look slightly. You could use alpha testing instead of true transparency, and use alpha to coverage to get a few bits of transparency as long as you are using MSAA. You wouldn't have enough bits of transparency to do giant alpha gradients, but it would probably be enough for some soft edges.

[JCorvinus]

There are no opaque objects in this. The idea is for the entire menu to fade into and out of existence when summoned or dismissed. This also means that, unfortunately, switching to the alpha test technique wouldn't solve the problem, as it would mean giving up the very reason I need transparency in the first place.

That said it does look like using the baked renderer for this won't cause my design to break. The only rotation involved applies to the entire renderer and none of the graphics. Switching to the baked renderer did make the sort order consistent, however, I couldn't get the sort order to actually change no matter what I did to the hierarchy. I'm not sure if that's due to the fact that I had to write a custom shader to get the baked renderer to do transparency. There aren't any transparent baked shaders included with the graphic renderer module.

In the mean time I can possibly try the graphic group and layer method, but I'm not sure how to specify which layers should get drawn in what order.

[alexmarcolina]

If you only need transparency for fading in and out, you might be able to get around with a 2 pass shader that does a depth pre-pass. It won't give you 'true' transparency but it can still look really good! Basic concept is explained Here.

Ah it's a shame, I thought that the baked renderer maintained the draw order according to the hierarchy, but it appears that it does not. It might not be the right solution for your use case anyway though, since whatever sort order you choose would end up being constant anyway, and so it couldn't adapt to view changes.

For the group-layer method, you would want to use the GraphicRenderer's api to grab a hold of the group you want (either searching through the groups list or using FindGroup to find a group by name). You would then get a reference to the renderer of that group. For BakedRenderers or DynamicRenderers the renderer will have a material property which is the material used for rendering the objects in that group. You are then free to modify it's renderQueue to whatever you want in real time.

(The TextRenderer for some reason does not surface it's material property, but the concept is exactly the same. In the meantime you could go into LeapTextRenderer.cs and add a simple getter for _material and use it in the same way)

[JCorvinus]

Awesome, thanks a bunch for your help!