Smooth transition between DeviceOrientation and Free cameras

Hello, guys. I’m developing a plugin for panoramic viewer in a project. I have to replicate behavior from krpano. There is a possibility to enable/disable deviceOrientation. I did replicate this by switching between instances of FreeCamera and DeviceOrientation(DO)Camera. I’ve been struggling with the following problem: when I make a transition from FreeCamera to DOCamera there is a jump to real world orientation of Device. I tried using Animations to change _initialQuaternion if DOCamera but the result is crazy rotation around the wrong Axis. I had a slightly different solution which worked well on Chrome emulated sensory data. It worked with a 50/50 chance on the iPad. On my Huawei phone the rotation appears to be from some completely random angle.
Maybe my understanding is not completely correct. I think that camera’s rotationQuaternion is updated by camera inputs. So I can’t use rotationQuaternion as animated value because it will be overwritten by inputs. I have to use _initialQuaternion.
At the moment I can’t provide playground example. Maybe I’ll add it later.

This one is for @RaananW or @Cedric :smiley:

https://playground.babylonjs.com/#BMZ70E#3 Here is something I tried to put together

I would try to interpole camera position, up and target as both camera types inherits from TargetCamera.
Might be less efficient to interpolate 3 values instead of 1 but on the other hands, it makes it easier to code and test the result.

1 Like

The device orientation camera has a function called resetToCurrentRotation(axis) which takes the current rotation quaternion, and “resets” the initial quaternion to be the negative rotation of it. This will be multiplied by the rotation the devie actually provides, so initially, it should provide the same rotation (at least on the same frame). You will need to make sure that the device camera’s rotation is always updated, so that you can “reset” it at the right moment. Also make sure you provide the right Axis to be reset. in your case, i assume it is more than Y, so the vector should be (1,1,1).

I think this one works for me. https://playground.babylonjs.com/#BMZ70E#4. Here is a quick and a bit dirty way I did it. I would appreciate some comments on cleaning up.

1 Like