[SOLVED] Layer Problem - Trying to put and entity on top of an another


#1

I am trying to put the white description box in a layer on top of the orange cude model, so that the white description box is on top and doesn’t collide with the model.

I am fairly new in Playcanvas, any help either in code or in the scene option is appreciated.


#2

Layers determine the order that draw calls are submitted in. However, they don’t override features such as the depth buffer which determines exactly which pixels are drawn.

Are you using a Screen and Element components with a 2D screen this will work by default as they are in the UI layer and have depthTest disabled.

If you wish to do this without using the 2D screen, set depthTest=false on your material manually.


#3

@dave
Unfortunately, i have already tested the Screen component, but the behavior wasn’t to my liking.
In general, the white panel looks at the camera, so making it part of a screen removes the nice rotation with the look at.

So i tried the depthtest, but this is still not really what i am looking for. The text and purple box also collide with the model. Is there another method?


#4

Can you link to something that shows the end effect you are looking for? It will help in providing a solution for your needs. If you have a link to the project as well, that would really help.


#5

com-optimize @yaustar

Here is a video of of the project (well gif, mp4 are not supported on the forum), after 6 sec at the end, it<s the part that I want to fix
Here is the project link:
https://playcanvas.com/project/601287/settings


#6

Unfortunately the project is not public so I can’t access it.


#7

how did you get onscreen desiption did you use the ui to put the html and css together btw how do you use ui I never knew


#8

sorry about that, it’s public now!


#9

I use UI to get it to follow the camera.

If you used software like Unity, it’s similar. If you want it on top of everything (render always on top and visible at all times in the camera), you parent your UI in a Screen. the Screen has ratio and size of your game resolution. if you put a UI element like a text in the top right of the screen, that text always be visible in the top right in your in game screen and will always be in the same position.

Here are some tutorial to help you with UI
https://developer.playcanvas.com/en/tutorials/?tags=ui


#10

This is where I got to: https://playcanvas.com/editor/scene/706600

I had to do use a second camera to render the annotations on top of ‘world’ as I couldn’t find a straightforward way to set both text and image elements to not test against the depth buffer.


#11

Here is another version using the method @dave mentioned above where I used a script to disable the depth test and write on the material but I’m not 100% I’ve done it right for the text: https://playcanvas.com/editor/scene/706627 (source file here: https://playcanvas.com/editor/code/601447?tabs=17383317)

I’ve also changed the order of the layers from your project.


#12

Thanks a lot @yaustar and @dave for your help!