The simplest way to solve gimbal lock when using DeviceOrientation events in javascript - How to make a perfect spirit level/bubble level app

Question

Starting with...

window.addEventListener("deviceorientation", handleDeviceTilt);
function handleDeviceTilt(event){
// Here we can use event.beta, event.gamma
// Note that we don't need event.alpha because that's just the compass as we
// don't need to know which way is north to build a simple bubble-level app
// or similar apps.
}

...in this case beta and gamma values are nice and usable as long as the phone or tablet is held parallel to the ground (like resting on a table). But when the phone or tablet is held parallel to a wall, we can't get realistic values. gamma gets especially crazy when the device is held upright/vertically (i.e. portrait mode) which is the most common way of holding a mobile device.

Please observe the problem with an Android device by looking at the cube HERE

We need to calculate the real angles so that we can use the tilt information accurately in the app. The question is,

What would be the simplest way to calculate the real angles like realBeta and realGamma (perhaps by using Math.cos() and Math.sin() or by some other method) in order to unlock the so called gimbal lock? Can this be done without matrices and/or quaternions? My guess is "yes" because the "distortedness" in gamma is proportional in some way to beta. If quaternions are the only solution then how exactly do we get realGamma or actualGamma or fixedCorrectGamma using them?

Note 1: There is a spirit level app on PlayStore that does show the real tilt angles of the device perfectly. So there is proof that it is doable. However as of 2021 there seems to be no open source code available for such an app written in javascript.

Note 2: This issue has been mentioned here.

Note 3: Precision is necessary. The closer we get to exact angles the better. alpha can be omitted for simplicity.

WHAT IS THIS USEFUL FOR?

By solving this problem we would be able to use deviceorientation to make something similar to this,

---

...or for example we could use gamma to steer a car in a vertical racing game.

---

You can observe the problem in action by visiting HERE (or by finding something similar) on your mobile device. Turn on the switch that says [Show orientation angles] and watch γ (gamma) as beta approaches 90deg. Also see what happens to the Gyro-Cube when you try to hold your device in a perfectly upright position.

Final thought,

We may need some arcane mathmagics.

Answer 1

I'm afraid that obtaining the info you are looking for only through the deviceorientation event is not possible precisely for the reason you say yourself: gimbal lock.

There are hordes of mathematicians studying in this regard, the result we can learn from their studies is that the only solution to the gimbal lock problem is to avoid it: when we start to get too close, we have to change our approach.

An alternative way to obtain that angle (which works only when the phone is almost vertical, so exactly when we need an alternative) could be to use devicemotion data rather than deviceorientation data.

window.addEventListener("devicemotion", event => {
  const { x } = event.accelerationIncludingGravity;

  const radiantsRes = Math.asin(x / 9.80665);
  const degreesRes = (radiantsRes * 180) / Math.PI;

  console.log(degreesRes.toFixed(2), radiantsRes.toFixed(10))
});

Answer 2

The three angles you are given is an orientation expressed as a chain of 3 rotations, in a specific order, from a specific starting point.

What you are asking for is this same orientation expressed as a different chain of rotations from a different starting point.

Converting between these representations requires linear algebra. That means using matrices.

The first step is to convert the angles to a rotation matrix (code from here):

function getRotationMatrix( alpha, beta, gamma ) {
    const degtorad = Math.PI / 180; // Degree-to-Radian conversion
    var cX = Math.cos( beta  * degtorad );
    var cY = Math.cos( gamma * degtorad );
    var cZ = Math.cos( alpha * degtorad );
    var sX = Math.sin( beta  * degtorad );
    var sY = Math.sin( gamma * degtorad );
    var sZ = Math.sin( alpha * degtorad );

    var m11 = cZ * cY - sZ * sX * sY;
    var m12 = - cX * sZ;
    var m13 = cY * sZ * sX + cZ * sY;

    var m21 = cY * sZ + cZ * sX * sY;
    var m22 = cZ * cX;
    var m23 = sZ * sY - cZ * cY * sX;

    var m31 = - cX * sY;
    var m32 = sX;
    var m33 = cX * cY;

A way to read the matrix is that it contains 3 column vectors:

• [m11, m21, m31] is the vector pointing to the right relative to the screen
• [m12, m22, m32] is the vector pointing up relative to the screen
• [m13, m23, m33] is the vector pointing directly out from the screen

These vectors are given in a coordinate space where the Z axis points directly up, e.g. opposite to earth's gravity.

What you asked for is to express this orientation as rotations from the upright position. For convenience later we will rearrange the matrix so that the order of the column vectors becomes out, right, up:

    return [
        m13, m11, m12,
        m23, m21, m22,
        m33, m31, m32
    ];
};

And since you are assigning the greatest importance to the rotation about the out axis (X) and the least importance to the rotation about the up axis (Z), we will decompose this matrix to rotations in the order X-Y-Z (code from here):

function getEulerAngles( matrix ) {
    var radtodeg = 180 / Math.PI; // Radian-to-Degree conversion
    var sy = Math.sqrt(matrix[0] * matrix[0] +  matrix[3] * matrix[3] );
 
    var singular = sy < 1e-6; // If
 
    if (!singular) {
        var x = Math.atan2(matrix[7] , matrix[8]);
        var y = Math.atan2(-matrix[6], sy);
        var z = Math.atan2(matrix[3], matrix[0]);
    } else {
        var x = Math.atan2(-matrix[5], matrix[4]);
        var y = Math.atan2(-matrix[6], sy);
        var z = 0;
    }
    return [radtodeg * x, radtodeg * y, radtodeg * z];
}

Now, to get the representation you want, simply write:

var rotation = getEulerAngles(getRotationMatrix(alpha, beta, gamma));

• rotation[0] is the steering wheel angle that you wanted for the upright position.
• rotation[1] is the tilt angle.
• rotation[2] is the "compass" angle that you were not interested in.

I have uploaded a working demo that you can access from your phone browser here.