Amazon launched their first foray into the Android handset market, the Fire Phone in June 2014. It incorporates unique head tracking that lets users look around 3D objects on screen. But how close can we get with regular device orientation?
Amazon’s Fire Phone
The Fire Phone uses 4 additional cameras to achieve its innovative head tracking feature, however we noticed that in all the demos we saw, users moved the device itself, not their head.
Whilst this feature could be a precursor of something more useful on larger format devices (that you might walk around), it got us thinking how well we could mimic it for mobile in HTML5 using the deviceorientation event.
Device Orientation
Modern smartphones incorporate a gyroscope, accelerometer and compass that report the device’s orientation, movement and direction. You may have seen games controlled by tilting your phone, but these features are not widely used outisde of navigation and rotating the display when the phone is turned on its side.
This surprising given that device orientation and direction are available to HTML5 web apps in the browser.
Technical details are explored in another post, we will focus on a few prototype applications here.
Applications
The Fire Phone demonstrations showed users looking around 3D objects, and tilting to scroll. The latter has been available on other Android phones for some time, and is arguably tricky to use in practice.
The prototypes make use of the left-right and forward-back tilt of the phone. You can use this handy page to check that your phone reports this information, and that your web browser makes it available. If you don’t see values updating on that page as you move your phone, device orientation is not being reported to the browser and the demos won’t work… If that’s the case, you might want to try a different browser on your phone.
Looking Around 3D Objects
Whilst the Fire Phone detects the viewer’s head position to change the rotation of objects on screen, we will achieve a similar result using the orientation of the device. The idea is to rotate the object on screen in the same direction, such that tilting your phone lets you see more of the object in a natural way.
Check it out in action on this page (a QR code will be shown on non-mobile browsers for convenience).
The box was created and rotated using CSS3 3D transforms.
We also created another demo using these fluffy little clouds, also created with CSS3. You can tilt your device to look around the clouds.
Orientation Correction
When creating the dynamic perspective prototypes, we wondered what would happen if you rotated the object in the opposite direction, such that it appeared to maintain it’s original position even when you tilted your device.
We’ve applied this technique to a small example web page for the purposes of illustration. This also shows the power of 3D transforms in CSS3 – rotation is applied to an element (here, the) and inherited by everything contained within as you’d expect.
Conclusion
Device orientation and motion (via the deviceorientation and devicemotion events) are little-used but increasingly relevant in web development for a mobile-first world. There are relatively few real-world applications, but great potential for gestural input that doesn’t require your free hand.
We’ve shown simple examples inspired by the Amazon Fire Phone demos that used multiple cameras to achieve similar results. Our next demo will show a practical application – remote mobile control of a more sophisticated model, rendered with 3D Javascript library three.js.