We use rotation matrices to adjust for the default orientation of your mobile device.
The W3C spec assumes that your device is lying screen-up with the top pointing north. In this state, the browser should report orientation in Euler angles as 0°α (yaw), 0°β (pitch), 0°γ (roll).
In reality, you’ll be holding it about 90º (or π radians) upright, screen facing you, rotated to one of four landscape or portrait positions. At these angles, it’s easy to confuse yaw, roll, and pitch – the axis of rotations – a weakness of Euler angles known as gimbal lock.
Adding a 90° tilt and screen rotation is not as simple as arithmetically adding degrees. Thankfully, higher beings have already solved this particular problem using two methods: rotation matrices and quaternions.
Well, that’s half the problem solved. We can now transform our Euler angles into rotation matrices or quaternions, and rotate our rotations.
But despite much advice saying that I shouldn’t, I also needed to decompose my rotation matrix back to Euler angles. Eventually, I stumbled upon this.
Quaternions were hyped as more efficient and robust, but they did not work out. Perhaps the composition or decomposition algorithms were faulty. I even tried the quaternions in Cesium’s math libraries, hoping they would be better optimised. No luck. Bad results. Back to hand-hewn rotation matrices.
Aside: this wild goose chase characterises my development experience, and indeed my broader experience with programming, but that will be the subject of a future post.
Anyway, you have rotation matrices to thank for not having to hunch over your device, bound to the screen-up position, as you flit around the world.