TMPro Text showing through mesh with custom shader

Hello everyone,
I just created a custom Shader using the URP shader graph by following a tutorial on how to make a “hologram” shader. There’s a very specific case where I want to use this shader; an electric sign. I want to place a mesh in front of the info text on the sign so that the result looks like this:

…And this is what it looks like, until you look at it from a certain angle. When you look at the sign from the right or top, the text suddenly renders in front of the “hologram” mesh like this:

If you can’t see what I mean, the text in this image is completely black, meanwhile the text in the first image has the hologram mesh rendering in front of it.

There are a few things I want to note that might help clear things up:

  • The custom shader is a Lit Transparent shader using the URP shader graph.
  • The TMPro Material is using the “Distance Field” shader and not the “Distance Field Overlay” shader, I already checked that

Is this happening because I’m using a transparent shader? Or are the text and the hologram mesh too close together? Or is there a problem I don’t see?

Thanks in advance for your help.

Hi, yes this is caused by both the custom shader and the TMPro material shader being transparent and rendered with the same order - which they will be sorted based on distance to camera, so at some angles one will become more close to the camera and thus being rendered on top.

In your case your text’s background is always opaque, so you can solve this by setting a lower order on the text. TextMeshPro - Text component > Extra Settings > Order in Layer, give it a lower number than the hologram material’s sorting priority: