Render Order Issue with UI and NME materials

Questions
, ,
1

I’m having a render order issue with the NME floor rendering through the Textblock. This seems to be set off by both the distance and the angle of the camera to the Textblock. When the camera is close to the Textblock, it renders properly at all angles. If the camera backs off a little, then it will only render properly if the camera is facing the front of the scene. There seems to be 180 degrees of the Textblock rendering above the floor and then snapping to the floor rendering through the Textblock.

Is there a way to elevate the render priority for the Textblock or could this be a normals issue with how the Textblock faces the camera?

Playground: https://playground.babylonjs.com/#058SEW#245

1 Like
2

This may not be the best approach as there might be something wrong with the UI element (@sebavan or @Deltakosh, feel free to correct me if I’m wrong) but you could potentially use your meshes’ renderingGroupId property as a sort of priority (higher the number, later it’s rendered in the process). Again, I’m not sure if this is the best approach but it’s probably the closest to what you’re asking without using multiple cameras and layermasks.

1 Like
3

Actually the problem is a bit more insidious :slight_smile:
@PolygonalSun solution works but it will force your mesh to be over all meshes

In your case the issue is that your ground is flagged as transparent because it contains vertex alpha and thus it is rendered AFTER the rest of the items :wink:

Quick fix:
Available Mesh UFO | Babylon.js Playground (babylonjs.com)

More precisely, line #91:

newMeshes[1].hasVertexAlpha = false;
4 Likes