search

adtile / Full-Tilt

Other
314 stars 71 forks source link

Issue with alpha when facing the horizon #2

Closed clemorphy closed 9 years ago

clemorphy commented 9 years ago

Hi

I am experiencing an issue : I get wrong alpha values (with deviceOrientation) when the device is perpendicular to the horizon. You can test it on your "box2d" demo. Start the demo while holding the device perpendicular to the horizon with beta around 90, and then orient down, and up. While you are slowly orienting the device up and down, when you are approaching the perpendicular position (your start position) alpha goes completely crazy and the red square is moving to the left and right, although you are only orienting the device up and down.

I can reproduce this behaviour on an iPad 3 (iOS7) and a Nexus 5 (Android 4.4.4), in both portrait an landscape orientations.

I really need a library like the one you are building cause I am going nuts with all the differences in the gyro behaviour between all the OS, devices, browsers ... So if I can test anything for you, just ask me.

richtr commented 9 years ago

Hi @clemorphy.

What you are seeing is the effect of 'gimbal lock' when we use Euler angles in CSS transforms.

If we implemented the box2d example using a different system such as rotation matrices or quaternions then this problem disappears (since quaternions and rotation matrices avoid gimbal lock situations from occurring in the first place).

So rather than using Euler angle values in box2d.html#L168 you should replace that with a CSS transformation matrix value like:

box.style[transformCSSPropName] = 'matrix( /* 2d rotation matrix values here */ )';

You just need to figure out the 2d rotation matrix values required for this. This article would be a good place to start.

Full Tilt JS already provides rotation matrix and quaternion representations of the device orientation that can be used as input for calculating the desired CSS transformation matrix.

richtr commented 9 years ago

I've added a simple method to avoid gimbal lock in the box2d model (see: commit https://github.com/richtr/Full-Tilt-JS/commit/256cbc39d1290235256beaf9e50bfb5bfe301c6a).

As mentioned above, the best way would be to avoid using Euler angles for this type of 2d transform altogether. Further input on solutions for that would be welcome.

clemorphy commented 9 years ago

Thank you very much for this explanation. I have seen sometimes the "gimbal lock" term but honestly I didn't understand what it means and I had no idea that the issue I exposed was related with gimbal lock. I am using Euler angles because I needed to have angles between 0 and 360 for x and 0 and 180 for y in order to simulate movements in a 3d environment. But I am going to follow your advice and try to use matrix or quaternions. I checked your modifications on the box2d demo and just ignore values when "85 < beta < 95" is not an option for me.