Ui Colliding with meshes

Help & Support
1

I have a UI in our game made of an entity and text and image components. It is spawned at the tap position. It currently collides with meshes in the scene at the same position. Is there a way to always have a ui entity draw on top of other meshes in the scene?

Thank you.

2

Hi @noah_mizrahi,

You can add these UI entities under a 2D Screen entity. That way these entities will always render on top of other world entities:

https://developer.playcanvas.com/en/user-manual/user-interface/screens/

3

Hi there. I have a screen element but it is in world space. It is colliding currently. Is there another way to have a world space ui that is rendered on top of the world space objects?

4

Hmm, good question. For normal models/materials you can disable the depthTest property. But that isn’t available as an option for the element component.

This is a good feature request if you would like to submit on the engine repo.

Until then you can do the same by accessing some private properties of an element component. Though that may break something else that I am not aware of right now.

    this.entity.element._addedModels.forEach( function(model){
        
        model.meshInstances.forEach( function(meshInstance){
            
            meshInstance.material.depthTest = false;

            meshInstance.material.update();
        });
    });

image
image619×506 121 KB

5

I’ll give that a try. Where is the depthTest attribute on the element?

this.entity.findByName(itemText).element.depthTest = false;

6

No, it isn’t there, that’s my point. It isn’t a publicly available property to use right now.

You can ask in the engine repo for it to be exposed, as a feature request.

I pasted above some code that will attempt to access it on an entity with an element component using private (not documented) properties, and set it to false. Check my code.

7

Thank you! I’ll go the feature request route.

8

You can also use a second camera and add another layer where the camera would clear the depth buffer.

eg: https://playcanvas.com/editor/scene/737291

Camera 2 is for the weapon layer and the box under it is on the weapon layer.

1 Like
9

That could be interesting - I’m getting a 404, can you share the project with me?

10

Whoops, should be public now

11

Thanks Yaustar, that worked great.

12

We’ve now got a second method after talking with @ray . This would be the most memory efficient and performant compared to my previous second layer method as it avoids a new layer and a depth clear.

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

This project has two methods, one is creating a global material in code and having a scriptType that assigns the material to the element it is attached to on init (image-element-no-depth-test.js) and the other is using a material created in the Editor so you can tweak the parameters on it. It gets assigned to the image element using assign-material-image-element.js on init too.

2 Likes