I’m currently working on a feature that toggles whether a mesh should always be shown or not. For the desktop implementation, I’m using a second camera with a layerMask, and changing the mesh’s layerMask to that one if it needs to be on top. This is working exactly how I want it to.
Now, I also need to get this working when in WebXR mode and I’ve found this to be a bit of a challenge. The methods I’ve tried are…
- Copying the camera from
xrHelper.baseExperience.cameraand setting the layerMask there. That didn’t seem to do much.
- Manually creating a different StereoscopicUniversalCamera or WebXRCamera, and copying the position/rotation from the main XR Camera. This seemed to do something, but I wasn’t able to actually get it to use the layerMask. I had a feeling that the value was ignored.
- Create a
TargetCamerafor each eye, setting the viewport((0, 0, 0.5, 1) for left, (0.5, 0, 0.5, 1) for right)), set the right layerMask, and copying the position / rotation. To my surprise, this actually seemed to do the trick, but it feels a tad hacky and I’d love to hear if there’s a better way to approach it.
I’ve created a playground to demonstrate my current implementation for the desktop which is available here: https://playground.babylonjs.com/#GRQTVW#3. Double-click on the canvas to toggle the alwaysOnTop feature on the box behind the sphere.
If anyone could give me any pointers or tips on how to achieve this in WebXR, it would be appreciated.