Rendering groups messing up highlight layers and 3D GUI

I have a mesh that I want to render on top of other meshes.
I also use highlight layers and a 3D GUI.

When the mesh rendering group is modified, the highlight layer get messed up and the 3D GUI get rendered on top of all the other elements: https://playground.babylonjs.com/#R069YG#3
Also, if the rendering group is set back to 0 the issues still persist.

Is there a way to fix this? The documentation mentions that highlights requires stencil and depth info but I don’t see how to fix this.

You can force a rendering group id in the highlight layer options: https://playground.babylonjs.com/#R069YG#4

This will unblock your second case

1 Like

Thank you! It fixes the highlight layer issue.

I still have the 3D GUI being suddenly rendered on top of the rest and I don’t see how to fix it, though.

But this is the entire point of the rendering group here, if you do not want it to render after why changing its group ? I am not sure to fully understand what you expect to happen ?

I might not having being clear enough, sorry.

As you can see here, when I set the sphere on the right to be rendered on top of the box, the 3D GUI get also rendered on top of the other meshes, which is not intended.
Even reverting the sphere’s renderingGroupId to 0 doesn’t fix the 3D GUI being rendered on top.

I see what you mean but unfortunately you would need to rely on a separate scene for this :frowning:

Basically, the controls are rendered after the full scene has been drawn but here we are clearing the depth information before rendering the sphere so it can replace the box. Which means that when we render the controls there is nothing else than the sphere in the canvas for them.

It would require quite some changes to allow interleaving utility layer and rendering group. May I ask why you would like to do this ? I am wondering if there are any other options ?

May I ask why you would like to do this ?

I have a scene with a 3D GUI. I can also switch the camera to have an overhead view in which the 3D GUI isn’t necessary but a mesh needs to be rendered on top.

So the mesh on top and the 3D GUI are never used at the same time.

 

However if renderingGroupId is altered, even if it’s reverted back to its original value, the 3D GUI (even if created afterwards) will be always rendered on top.
See this playground.

Ok got it, yes this seems like a bug to me I ll push a fix soon

1 Like

Will be fixed by fix empty rendering group side effects by sebavan · Pull Request #12159 · BabylonJS/Babylon.js · GitHub

1 Like

Thank you a lot!