Rendering UI elements infront of mesh in 3D space

Hi,

As the topic suggests, I wanted to render an image element infront of a 3D mesh object all the time. I came across various posts, but nothing seem to be exactly what I wanted. Here is the link to the sample project.

https://playcanvas.com/editor/scene/984703

The sample image and text element has a look at script attached. When we rotate the mesh object, the image and text element should remain at the front and visible all the time to the user.

Any help would be appreciated.

Something like this? https://developer.playcanvas.com/en/tutorials/world-space-ui-rendering-on-top/

2 Likes

Thank you Yaustar… This is exactly what I wanted. I wonder how I missed this while searching for this from the tutorials. I have one more question. Can I use this material on a plane which has video texture script attached??

Don’t see why not.

Let me try and post the result here. Thanks Yaustar !

Hello @yaustar

The image element is perfectly working as expected. I forget to mention that there was a text element in the sample project. Is there any way the same thing can be done to a text element??

And for the video plane, we have to uncheck the tint in emissive channel to make the video texture work.

Not without some coding work. You would have to clone the material on the text element, change some of properties (to match the material in the example) and assign the material back to the text element.

https://playcanvas.com/project/713724/overview/text-render-on-top

1 Like

Thank you yaustar… you made my day :slight_smile:

Hey @yaustar Unfortunately the text element is not rendering at the front. I didn’t touch anything in my project since when I implemented your code and the material. How could be this is possible all of a sudden? I am confused.

Is it on a layer that is after the entity that you want it to rendered on top of?

Fixed it ! I removed the emissive texture and it is working fine now. But no idea how removing it made the difference.

Hey @yaustar it looks like a bug. Again the text element is not rendering. Tried to add and remove the emissive texture. But no luck this time. This is now completely unpredictable. Or am I missing something? I didn’t change the layers… I left them as such in default. For the first time it was working fine and then all of a sudden i got this issue. Please help me out.

Can you create a project to reproduce this error and post it?

Sure I will share the project link !

Hi @yaustar

This is the project link: https://playcanvas.com/editor/scene/984703

If you see, the text element at the top is hiding behind the mesh, however, the one under that is working fine. Still, I had to remove the emission texture to make the text element visible.

Works fine here:

Kapture 2020-09-23 at 14.07.51

It wasn’t showing the text when I checked for the first time. Unfortunately, I didn’t take a screenshot. Even I see now, it is working fine in the sample project. But in an instance it wasn’t rendering. I am unable to recreate the issue. Also, I am unable to share my main project which is still having the same issue. I will try sharing a screenshot if possible.

I really need a reliable reproducible to look at it I’m afraid. A screenshot won’t help.

That said, was the white background showing correctly? Could be a Z fighting issue.

Yes. I agree to your point. We should have a valid trace to solve any issue. But, sadly I am unable to reproduce issue in the sample project.

Yes. Image elements had no issues. It is working fine all the time. Only text had issue. What do you exactly trying to convey when you say ‘Z fighting’ issue?

The text and image are on the same depth/Z value so the polys are occupying the same space.