WebXR controller meshes renderingGroupId

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

Does anyone know how to do that?


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;

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

want to show an example?

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.

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

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



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?

of course! that is easier:


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

1 Like