Rotating a WebXR camera about the world Y axis

Questions
1

I’m currently porting a WebVR app to WebXR (almost done!). Mostly in VR I want the angle of the camera to match the angle of the user’s head (to avoid nausea). But I’d like my users to be able to reset the view by rotating the whole world about them (so that the objects behind them can be moved in front of them). It’s important that the floor remain level during this manual rotation, though, regardless of the user’s head orientation.

I was able to accomplish that with WebVR before using code like this: Babylon.js Playground (click the VR goggles to start the rotation in VR).

But as you can see, with the new WebXR system, the rotation no longer occurs about the world Y axis. At the same time, I don’t think it’s rotating around any local axis either (though I could be mistaken).

In case it helps, I’ve seen this problem in:

  1. Chrome, macOS, using the WebXR device emulator browser extension,
  2. Firefox, Windows, using the WebXR polyfill (HTC Vive)

Is it possible to rotate the WebXR camera about the world Y axis, even if the user’s head is tilted to the side or forward when rotating?

Thanks for your help.

2

The WebXR camera’s rotation is just like any camera’s rotation, so you can use the quaternion to rotate around any axis you wish. When you rotate the camera, it actually rotates the base transformation of the headset, not including the current user orientation. So if the user is looking “back” (relative to his headset’s position in the real room) and you rotate the camera 180 degree, the user will look to the front.
Note that the camera efforts itself when entering XR to fit the transformation of the native camera that was just replaced.

3

Having said that, I wonder how the polyfill supports this. The base transformation adjustment is a new feature in WebXR, one that will be hard to emulate correctly. Try multiplying the camera’s quaternion in another quaternion with rotation around the y axis. You can see that in action in the teleportation feature (rotates x degrees around y)

2 Likes
4

Thanks @RaananW. I took a look at the teleportation code and found the line you were referring to. Very helpful. In case anyone is looking for a similar solution, I implemented it here: https://playground.babylonjs.com/#HRVW3U#1

2 Likes