Weird ui text sort order, anisotropy effect when rendering


I’m troubleshooting this weird thing that happens to my text boxes (made with UI text component) when zooming and orbiting around them looking in different angles. Sometimes they go dark, as if they end up behind the background element in their rendering.

This is the setup: image


Some languages like chinese or japanese even have individual characters behave like this.


What can this be about?

Best regards


Hi @bjorn.syse,

That’s a common issue with big objects that are positioned closely. Basically the engine is trying to find the correct render order based on the aabb of that model bug in extreme angles it doesn’t have enough precision.

Common solutions are:

  • Further increase the distance between the two models
  • Decrease the far/near range of the active camera clipping planes
  • Use a custom mesh instance sorting callback to override and set the correct order (that can be advanced):

Hi Leonidas!

I see, sounds familiar. First solutions I’ve been fiddling with and managed to solve a few. The second one sounded intriguing and I did indeed have an unnecessary large span between 0.05 and 1000 on my camera. I lowered the far plane to 100 instead but unfortunately, it did no difference.

Last solutions suggested might be harder. I’m not sure, I’m using UI Elements here, are they MeshInstances deep inside?

Would drawOrder help?

  • Björn

Yes, element components ultimately render using mesh instances as well. Normally UI elements are being ordered from top/bottom in the entity hierarchy, but that holds true I think only when using a 2D screen.

You can try using drawOrder, assign these entities to a layer that has pc.SORTMODE_MANUAL as sorting mode and then use the drawOrder property to set the order. I haven’t done this specifically before but it seems it’d work.

If it’s a render order issue, you could put the text on a separate layer so it renders after the background areas :thinking:

Good idea @yaustar and far simpler! An arrangement like this works great:

1 Like

Ok, interesting. Can’t get this to work immediately in my setup. What layer is your btn background on @Leonidas?

My background and text WAS on layer world. I removed world from text only but then it dissappears entirely. I replaced it to have only layer Text. Layer sorting is as in your picture. It does show up in editor but not in launched.

So, I’ve done the following steps on this tutorial:

  1. Moved a button element out of the 2D screen, and set the scale to 0.01
  2. Set the Background element to the World layer.
  3. Created a Text layer as shown on the screen grab above.
  4. Assigned the text element to the Text layer.

Edit: here is the test project:

1 Like

Does your camera include Text layer to render?


Hurray, that was the thing. :slight_smile: easily overseen. Thanks!

1 Like

Hi again

I’m still struggling a little bit with this. Seems our solution the last time forcing the texts to render in a layer on top, also made any texts being physically behind a blue background, would render on top of that one aswell.

I’m looking into the possibility to calculate my own sort distances, but documentation is sparse. I’m using UI Elements. I can’t even find a reference to the meshInstance their using behind the scenes?

Hey, did you use a second camera to render that layer in the past?

The mesh instances used on an element component are under a private property named _addedModels:

Thought note that is private API, it can change in the future.

I’ve not done this before but as long as the elements are not under a screen, you should be able to set the draw order of elements:

Which sets the drawOrder of the meshInstance under it:

The layer it’s rendering on has to have a manual sort order though

Thanks I did consider that, but there is no way I could have draw orders hard coded like that, it’s always going to be dependent on the camera - which sign who currently is behind another.

You can update that at runtime based on distance to camera if that’s the route you want to go down?

ah, yes that’s a thought. I already have scripts calculating for distance to camera in about 2fps because I want to cull these textboxes when camera is to near or too far away, so using that I suppose I could create an index based on the distance to camera to sort them in relation to eachother! I’ll see if I get time to try that route. thanks both of you!

Oh, just thought of a cheat here.

You could disable the text element component if they are facing away from the camera?

A dot product between the Z axis and the forward direction of the camera would be enough to know if they are facing away from the camera.

That way you don’t have to deal with you own custom draw orders

Theyre not really facing away from the camera, because I’m billboarding them :slight_smile:

Here is a version: World of Epiroc | Epiroc US

I’ve been messing with the hotspots issue, and I think I’ve found a solution. Testing currently with two labels:

Order seems to be correct. Now the proposed steps to fix this for all the hotspots are:

  1. Set the Title Text entity to render on Hotspot text layer (remove UI).
  2. Set both Title Backround entities to render on Hotspot background layer (remove UI).
  3. Add the Material Order Wedge and Material Order to the Title background entities in order.
  4. Move the Title Text entity slightly on the Z axis (0.01) to avoid render artifacts due to bounding box lack of precision on transparent entities.
  5. Re-order your scene layers to look like this: