How to rotate vrDeviceOrientationCamera to specific direction?

I want to initialise the VR camera to look at the same direction as the free camera when the first time user clicks on the VR button.

My project would run on mobile in cardboard style.
On my Android device which supports WebXR things worked as expected.
But on my iPad running iOS12, I can’t make the camera to do the same.

Here is a simple playground,
https://playground.babylonjs.com/#74ZBFB#4

In the playground, after I clicked the VR button, the VR starting scene was either 90deg CW or 90deg CCW from the ball depending on the device’s physical orientation.
I tried setting vrHelper.vrDeviceOrientationCamera.rotation.y and using resetToCurrentRotation(), but I don’t fully understand how they worked.

How can I rotate the VR camera to a specific direction? Or at least have the VR camera look at a default target (e.g. the ball in the sample playground).

You can rotate the camera by multiplying its rotation quaternion in another quaternion that is rotated 90 degrees on the y axis (0, 0.707, 0, 0.707).

I wonder (since i don’t have an iphone) have you tried using the webxr polyfill? does it work? instead of using the vrHelper which is deprecated?

Thank you for your quick reply.

I added
vrHelper.vrDeviceOrientationCamera.rotationQuaternion.multiplyInPlace(new BABYLON.Quaternion(0, 0.707, 0, 0.707));
to the playground but it did not change anything. Am I doing it wrong?
https://playground.babylonjs.com/#74ZBFB#12

My project is actually using the Unity Exporter, the WebXR polyfill was not included and it seems to only support vrHelper. I don’t know how to integrate the two either.

Will need an iphone to check that correctly, but - try setting the rotation after entering VR (even a frame or two after), to make sure it is not the device orientation that is causing the reset. I will see how I can test that on an iphone in the near future.

Aha, just wanted to come here to update my testing result and saw your reply with the same solution.
I put the code in .onAfterEnteringVRObservable event and got the result I want.
https://playground.babylonjs.com/#74ZBFB#19

Thank you for your help. :slight_smile:

1 Like