I would like to draw some text elements on top of everything else. They are placed inside of another geometry.
Searching through the forum I already figured out that this can be done with image elements when you assign a material with depth test disabled. However I would like to do this with a text element in order to use localisation, but assigning a material to text elements seems to have no effect.
any suggestions of how I could achieve this anyway?
There’s a couple of ways to do this. The one based on image elements project can be found here: https://playcanvas.com/project/713724/overview/text-render-on-top
The other method is to use two cameras, the second one purely for the text
uhhh okay, I don’t think I would have figured that out, thanks ^^°
not entirely sure what it even does, the material is set on the private text property?, but it works
this.materialAsset.resource.msdfMap = this.entity.element._text._font;
The text element has a different material that it uses. This example uses private API to assign a different material than the engine’s default. IIRC, the image element is exposed as public API but not text for some reason.
If I try to do both, the image and the text, then the image is not showed correctly. Do you want to take a look what is the problem @yaustar?
That’s a render order problem. If you are doing something like that, a second camera would be better using layers.
All this example did was not test against the depth buffer.
I tried to use a second camera with only the layer WorldUI, I add the layer WorldUI to the 3D screen text and images, but I don’t get the good result. So add what place in the render order should I set the two WorldUI layers?
I would have two cameras with the second one rendering the world UI layers. These layers should both be ordered after the world layers. The camera rendering the world UI layer should be clearing the depth buffer.
I have done that, but then I only see the WorldUI entities. The normal world is not visible, it’s all black.
Don’t clear the colour buffer on the second camera as you want render the UI elements on top of whatever is rendered.
How do I do that? I even don’t know how to clear the color buffer.
On the camera, there should several options. From memory there would be a tick box for clearing the depth buffer and another for clearing the colour buffer. You want to clear the depth buffer as you don’t want to depth test against what already has been rendered. You don’t want to clear the colour buffer because you want to render on top of what has already been rendered.
Aha okay! I found it and it’s working now. Thank you very much!