Device orientation and panning

www.babylonjs-playground.com/#21UPR3#40

I’ve made that naive test but it doesn’t work as I expected, I remove the canvas control from the device orientation as soon as the panning takes the control and it is applied again once the panning is not longer needed, but the orientation goes to the original controled by the device.

Any tip on this? thank you in advance!

pinging @trevordev

@Escobar I don’t believe the device orientation camera was designed to be rotated manually like this as there is some internal caching of quaternions which will make modifying the rotationQuaternion manually result in unexpected behavior like you are seeing. As a use it may also be confusing if touch panning and device orientation are active at the same time because if you pan and then move the device up, the device up may no longer be the same as babylon space up.

If you want to have full control over the camera I would recommend just using a BABYLON.FreeCamera and adding the device orientation logic yourself in your app so you can control the order of the quaternion multiplication to behave as desired. See orientationchange and deviceorientation usage in Babylon.js/deviceOrientationCamera.ts at master · BabylonJS/Babylon.js · GitHub

@trevordev
I’ve made a simplier example from one of your base demos:
https://www.babylonjs-playground.com/#21UPR3#43

now I’m using FreeCamera instead device based one but unfortunatly as soon as I
attach the control camera.attachControl(canvas); to a camera that has DeviceOrientation input (camera.inputs.addDeviceOrientation();) it takes the control and the orientation gets reset.

Thank you for your help!

1 Like

Does this playground work for your scenario?
https://www.babylonjs-playground.com/#21UPR3#44
Here it will perform spherical panning if the device does not have an orientation sensor but if it does it will switch cameras to a device orientation camera.

Otherwise, I would recommend using a free camera and manually controlling it (not attaching built in controls) as described in my last post.

@trevordev yes ideally it was my intention too.

I tried to use a free camera that could deal with an additional input (deviceorientation) that should be added to the current rotation, I also prefer not to switch between cameras, but unfortunatly I have no idea how to implement it.

My naive idea was that adding camera.inputs.addDeviceOrientation(); will sum its effect but it actually overrides the desired behaviour.

Yea unfortunately using that is likely the best way at this time. But doing something custom should be possible if its still needed. Im happy to help debug it if you get a playground started and run into issues.

The other thing is that if dragging and device orientation were supported at the same time the behavior isn’t well defined for the user. If the view is dragged up and then the device is tilted up further it is confusing that the Babylon down is no longer real world down.

I think that this PG is pretty near https://www.babylonjs-playground.com/#21UPR3#43 but once I attach the control again (camera.attachControl(canvas):wink: I should set the initial view for the device to the current orientation before being attached.

In other words my ideal situation should be something like:
camera.rotationQuaternion = manualRotationQuat * deviceOrientationQuat;

I’m not sure that that can give you your desired result. If you drag right and then look up on the device vs look up on the device and then drag right I think you would get the same result with that math but as a user I would expect different results so instead I would rotate the camera for each orientation or touch event’s small movement individually when the event occurs.