Putting UI in worldspace but not on UI camera layer

Help & Support
1

I’m having some depth/z-indexing issues when trying to put UI elements on a layer that isn’t the UI layer.

If you’re wondering why I’m not putting it on the UI layer, its because I believe it renders topdown hierarchy-wise, and I need it to instead render depth-wise since things in the front should hide things in the back. (Though there’s a chance I’m doing something wrong here as well)

The problem I’m running into is when putting UI elements onto layers other than the UI layer, I get things popping in and out (despite having physically placed some in front of others)

I’m not sure if its zfighting, or if at some camera rotations it assumes its offscreen and is culling the element, but wanted to ask if anyone has run into this or solved it before… or if I’m just doing something wrong and no one has had the issue… because thats always possible.

2

Hi @trigandrew!

Can you share a sample project please?

3

Oops completely forgot to send the one I took the video from PlayCanvas | HTML5 Game Engine

If you just rotate in editor from where the camera currently is, you can see the same thing

4

I think you can try to change Camera Clip Near to something like 0.01 in the editor settings.

5

I tried setting to 0.01 as well as throwing a couple extra zeroes to see if that would help, but it seems to still vanish. My guess is it isnt getting culled out by the near or far clip planes. I guess it must be a little funky on how its trying to figure out the depth.

6

Well quick update, if I set UI elements to use materials instead of color or textures, it seems the problem goes away. Im guessing it has something to do with writing to the depth buffer being tied to having an actual material. Not sure if this is gonna work permanently but I guess Im gonna find out since thats what Im going to go with.

1 Like
7

It can be an editor bug, so the result at runtime can be different.

8

Unfortunately I am facing the same issue. It persists also at runtime.

Editor:

Runtime:

Even though the elements are on a seperate layer, under the world layer in the editor panel, the lower part of the red square still disappears in the world-layer plane.

Why is

  1. the text disappearing based on the angle you look at it?
  2. the red square not showing over the world-layer plane?

Here is the small repro project:
https://playcanvas.com/editor/project/1321872

9
  1. TLDR, as both elements are on the same render transparent layer, the engine is trying to work out what to render first based on distance from the camera. Depending on the camera angle, it may have calculated that the text element is further away than the image element because it’s very difficult to work out/know what should be rendered first

See [SOLVED] Problem with transparent textures (planes are not sorted correctly)

  1. Why do you expect to? It’s on a layer that doesn’t clear the depth buffer before rendering nor is the depth buffer cleared between rendering the world layer plane and this layer
10

There’s a few ways to workaround this but it depends on what else you have in your scene. Eg will you have models with transparent materials, what will this be used for (eg nametags) etc