WebXR controller meshes renderingGroupId

Questions
1

I am testing out the WebXR and It’s working great but I have a problem with the controller meshes. They are rendered behind my meshes in the scene. How can I set the controller meshes renderingGroupId so they get rendered on top?

1 Like
2

Does anyone know how to do that?

3

Hi,

there is no direct way of doing that (like a configuration flag or anything) but you can set it yourself with the corresponding observables:

const xrInput = xr.input // or any other way you are using
xrInput.onControllerAddedObservable.add((controller) => {
  // a new controller was added
  controller.onMeshLoadedObservable.add((rootMesh) => {
    // its mesh is now loaded, set the rendering group id
    rootMesh.rendringGroupId = 2;
  });
})
4

unfortunately it doesn’t work. I tried that way but controllers are still rendered behind my meshes in the scene :confused:

5

want to show an example?

6

Here is an example, as you can see my ground’s rendering Id is set to 1 and controller’s and teleportation target zone to 2, but still ground gets rendered on top. I noticed when I set the teleportation target zone rendering group Id to 2, it gets rendered on top of the ground but the controllers are still rendered behind the ground.
Example

7

renderingGroupId is not inherited, so you hvae to set the child meshes as well:

rootMesh.getChildMeshes(false).forEach(m => m.renderingGroupId = 2)

https://playground.babylonjs.com/#ZAHFTQ#35

2 Likes
8

Thank you! it works like a charm, but still there is another problem that I’m facing right now. The controller’s laser pointers are being rendered behind the meshes in the scene. Can I also set the rendering Id for the laser pointers as well?

9

of course! that is easier:

https://playground.babylonjs.com/#ZAHFTQ#37

This only tells me that I need to add rendering group id to the motion controller as well. on my todo list!

1 Like