Render 3D screen elements in front of models

I am trying to create a text balloon thing that should be rendered in front of my 3d models. I kinda also want to make it darker/more transparent if something’s in front of it but that would require a shader…

I tried adding new layers to the text elements but I can only manage to get it rendered behind everything but not in front (apple is on FoodModel layer, text on TextBalloon):

afbeelding afbeelding

afbeelding afbeelding

Does anyone know a way to either just render this in front, and secondly, tint it if it’s behind a model (or add shaders to ui elements)?

If your text element is in the world space, then you can find the apple’s location and place your text element closer to camera from that position. This way, it will be in front of the apple, but will be blocked by other objects, if they are in the way.

If your text element is in 2D Screen space, then it will always be in front of all objects that are in the world space, but you would need to calculate the correct position, so it is shown on apple for example. If you make a custom shader here, then just make sure the z depth of the buffer. I’ve learned this through the help of @Leonidas here.

And yes, to make it darker/transparent if something is in front of it, would require a custom shader. If you go with the world space, then you could use the chunks system, instead of writing a completely new shader. But it is not well documented yet.

2 Likes

To add on what @LeXXik explains, here is a similar post on the subject:

https://forum.playcanvas.com/t/solved-trying-to-put-element-ui-image-on-top-of-entity/

1 Like

Thank you both for the clues. I think I will start working on a custom shader (chunks) for more advanced behaviour. For now however, another trick I remembered from using Unity is to have a double camera setup with one rendered in front of the other that only shows the element’s layer.

1 Like

I’ve never used Unity, so it is a good tip for me. Thank you for sharing!

Have you tried adding an opaque sublayer fro TextBalloon as well?

How could you able to do this? I am trying to achieve something similar…