How do I make PlayCanvas UI come forward rather than html/css UI?

Hello everyone.
I’m using both PC UI and html/css UI. But I don’t know how to set render priority.
I change PC 2D Screen property “Priority” to 127, it doesn’t work.

Look at the image. Blue Boxes is html/css UI.
I want to draw these under the PC UI.

Please Help me anybody. :sob:

Hi @erickim,

That’s not possible, PlayCanvas renders everything on an HTML canvas element. So any HTML elements used for UI will render either on top or behind that canvas element (so they will be fully hidden).

There are some hacky ways to create a “hole” in your PlayCanvas viewport to render HTML looking to be part of your 3D scene. But that has compatibility issues on some devices and also it won’t solve your problem since you want HTML to be rendered on top of the 3D view but behind your PlayCanvas UI layer.

1 Like

Thank you @Leonidas
Your answer reminded me of a different way.

If clicked PC UI button, Turn off the HTML UI that I don’t want to show on the screen through display: none.

Would this way be possible?

Oh yes definitely, you can do that using regular JS.

Here is an example using an ID to get the HTML element and set its display to none:

document.getElementById('my-id').style.display = 'none';

Always, I’m indebted to you.
Have a nice day ! :smiley:

1 Like