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.
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.
@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?
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.
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
Unfortunately the project is not public so I can’t access it.
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
sorry about that, it’s public now!
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
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.
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.
Hi, I was trying to do something similar(I’m trying to make gizmos), but when I disable depthTest and depthWrite on the material, it gets displayed behind every other entity even though it is infront of it. I wanted the opposite effect where it is displayed infront of every entity even if it is behind it.
Hi @Gamer_Wael,
Can you try putting that object on a different layer at the same time? Check this: Weird ui text sort order, anisotropy effect when rendering
Thanks for the reply, unfortunately I still can’t figure it out. I’m only using the engine without the editor and here is what I’ve done:
red = new pc.StandardMaterial();
red.diffuse.set(1, 0, 0);
red.depthTest = false;
red.depthWrite = false;
red.update();
var customLayer = new pc.Layer();
customLayer.name = "customLayer";
customLayer.opaqueSortMode = pc.SORTMODE_MANUAL;
this.app.scene.layers.insert(customLayer,1);
var x = new pc.Entity('x');
x.addComponent('model', {
type: 'box'
});
x.model.meshInstances[0].material = red;
x.model.layers[0] = customLayer;
And the red axis is still not visible even though it is in front of the cube.
Your code looks correct, apart from this last line, updating the layers on the model component requires setting a new array instance:
Something like this:
x.model.layers = [customLayer.id];
Hm… Now I can’t see it at all. It’s invisible.
Don’t forget to do the same for your active camera! The camera at any point needs to know which layers is rendering:
var layers = myCameraEntity.layers;
layers.push(customLayer.id);
myCameraEntity.layers = layers;
Is it on the entity or the component?
myCameraEntity.layers is not define. I think it is more like this:
var layers = myCameraEntity.camera.layers;
layers.push(customLayer.id);
myCameraEntity.camera.layers = layers;
We can see in the editor that layer is in the camera component of a camera entity:
