Draw order of parametric shapes

Hi, again two dumb questions at once have come up :slight_smile:

So my issue is that I would like to draw parametric shapes (specifically the LinesMeshes returned by MeshBuilder.CreateLines) and make sure one line is always on top of the other (including the edgesRendering). My specific issue is that the meshes change their ordering when clicked. This surfaces only with a PointerDragBehavior, not with scene.pick. I tried to reproduce this issue in a PG, but failed.

https://playground.babylonjs.com/#1IYSYD#7

Here it works, the order stays the same. I have no idea why it happens in my code and not there.

I’m hoping there is a way to tell the scene to always draw one mesh above the other. They share the same z coordinates. Can this be done somehow? This is a 2D app, so I can’t just change the coordinates.

edit: Figured it out. I am redrawing the other mesh as part of my drag code. But still I’d like to redraw it under the mesh that’s being dragged, if that is in any way possible. Mainly for performance reasons.

Second edit: Fudging around with the z values doesn’t work in the first place. They are not taken into account for LinesMeshes apparently

Thank you in advance!

There is a way to do that:) just set the top mesh to mesh.renderingGroupId = 1. This property works like zIndex for CSS

1 Like

Perfect! Thank you. I knew there was something.