Adding VR capabilities without affecting the arcRotateCamera setup and existing postprocesses

good day, i have a large react app where I use arcRotateCamera to rotate around a mesh and also some postprocessing to change color Luts, etc

now I just want to add the bottom right VR button so that people can also see and study the mesh with VR glasses if they like, so I add this:

var vrHelper = scene.createDefaultVRExperience({
createDeviceOrientationCamera: false
})
vrHelper.displayLaserPointer = false;

however I get two issues when I do this:

a) first, when I add that I get in the console these errors that say:
“BJS - You are trying to reuse a post process not defined as reusable”
this only appears when I add the above lines, any tips?

b) second, if I delete all my existing postprocesses, the position of my mesh changes, its as if the camera is being influenced by the addition of the VR stuff, how can I add VR capability without impacting my existing arcRotateCamera setup?

thank you :slight_smile:

The VR experience helper is deprecated and should not be used anymore.

Try the WebXR experience helper, which does not create a new camera for your desktop and only initializes the XR layer for you. WebVR doesn’t work on most (if not all) major browsers, so - it is time to use WebXR instead. You can read about it here: WebXR | Babylon.js Documentation

@RaananW thank you, the issue is that i read the WebXR is only compatible with chrome so far, is this correct? I would only use something that was cross-platform, otherwise is not useful for my purposes

Oh, WebXR is supported on chrome, edge, firefox. WebVR is deprecated and will be removed soon from the only browser that supports it (firefox). And there is apolyfill to convert between WebVR and WebXR. So, if you are looking for browsers compatibility, i would go with WebXR:

@RaananW definitely its the best option available, but its concerning that I see zero support from safari, apple, iOS; I cannot implement anything with it until it becomes truly cross-platform

Don’t get me started on Apple… But as you can see, iOS doesn’t support WebVR as well.
You can always fallback to device orientation camera (or the VR device orientation camera) if webxr is not available. That is what the webvr experience helper does (and was removed in the WebXR experience helper).

Technically, the webxr polyfill should be able to fallback to cardboard-style implementation, but I have to be honest and say that I have never tried it.

It is documented here - immersive-web/webxr-polyfill: Use the WebXR Device API today, providing fallbacks to native WebVR 1.1 and Cardboard (github.com) and here - WebXR | Babylon.js Documentation

1 Like

@RaananW that “Don’t get me started on Apple” sounds very familiar, I think i have said something similar many times :smiley:

thank you for the suggestion, will check it out :wink:

1 Like