Simple device orientation

Work in progress
1

Hello,

i had big stuggle getting WebVr to run.

Then i had a look into the code of WebVR Pollyfill,

github-webvr-pollyfill FusionPoseSensor.onDeviceOrientation()

They are using Quat.setFromEuler() with another axes order than playcanvas. First I copied the code and was a bit happy about a simple orientation. But i still thought, understanding the behavior would be much better than copy paste engineering :smiley:

What helped is to understand that setFromEuler is the same as calling setFromAxisAngle 3 times and multiplier the quaternions! Now the code is much more readable, and suddenly no magic number left.

here is the main part of my code

const LEFT90 = new pc.Quat().setFromAxisAngle(pc.Vec3.LEFT, 90);

function fromOrientation({ alpha, beta, gamma }, orientation) {
    const a = new pc.Quat().setFromAxisAngle(pc.Vec3.UP, alpha);
    const b = new pc.Quat().setFromAxisAngle(pc.Vec3.RIGHT, beta);
    const g = new pc.Quat().setFromAxisAngle(pc.Vec3.FORWARD, gamma);
            
    let rot = a.mul(b).mul(g).mul(LEFT90);
    if (orientation) {
        const dir = rot.transformVector(pc.Vec3.FORWARD);
        rot = new pc.Quat().setFromAxisAngle(dir, orientation)
                    .mul(rot);
   }
   return rot;
}

complete class with orientation listener and crazy safari IOS code is in my project.
playcanvas - DustBust
src/orientation.js

2 Likes
2

Thank you sooo much @HellG - my mind was turning into a quaternion stew before I found you. Iā€™m creating a 3D room explorer on phone with device orientation controlling playcanvas camera and this has resolved my twist dilemma! :smiley:

1 Like