HI
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: 
Some languages like chinese or japanese even have individual characters behave like this.
What can this be about?
Best regards
Björn
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:
https://developer.playcanvas.com/en/api/pc.MeshInstance.html#calculateSortDistance
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?
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 
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:
https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/
Edit: here is the test project: https://playcanvas.com/editor/scene/1053167
Does your camera include Text layer to render?
Hurray, that was the thing. 
easily overseen. Thanks!
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:
https://developer.playcanvas.com/api/pc.ElementComponent.html#drawOrder
Which sets the drawOrder of the meshInstance under it:
The layer it’s rendering on has to have a manual sort order though
https://developer.playcanvas.com/api/pc.Layer.html#transparentSortMode
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 
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:
