0
443
ViewsThe simplest way to solve gimbal lock when using DeviceOrientation events in javascript - How to make a perfect spirit level/bubble level app
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
realBetaandrealGamma(perhaps by usingMath.cos()andMath.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 getrealGammaoractualGammaorfixedCorrectGammausing 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.
1 answers
Answer question0
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))
});