Left and right views are different in VR mode


I’ve used scene.createDefaultVRExperiance() for VR. I’ve used GUI Line element for reticle. I’ve noticed that left and right views are different. I’m working on a project where I’ve to hover reticle on a mesh to change photodomes. But with this effect, I’ve to place mesh in between left and right views of reticle. Please suggest a way to get equal left and right views and reticle in center.

Panolens.js has equal left and right views:

I wish to do the same using BabylonJS

Fullscreen GUI requires the right projection to work in VR. It was recently added to the API, but only if you are sing WebXR layer (which offer a “fullscreen” quad layer). Otherwise, the fullscreen UI will not render correctly. There is no way around it, sadly.

What you can always do is to create a GUI for mesh, and put the mesh in front of the XR camera (for example using parenting). This will emulate the same behavior.

Also, I would recommend you not to use the WebVR experience helper, which is deprecated and no longer supported. WebXR and the default webxr experience helper is the right way to go.

Something like this - VR with Reticle | Babylon.js Playground (babylonjs.com)

Hi @RaananW,
I’m using webXR as you suggested. For webVR i’ve used VRDeviceOrientationFreeCamera instead of createDefaultVRExperience, What camera or settings can i use to get same webXR experience instead of using createDefaultXRExperienceAsync() ?

At what scenario do you need the device orientation camera instead of WebXR?
WebXR allows better tracking of your environment. Device orientation uses the device’s gyro/accelerometer data which tend to drift and be a little inconsistent.