Stereoscopic email

We just got back from the first ever virtual reality conference, which reminded me of a stereoscopic email we put together last December. At the time Graeme was working on a VR project, and I joked that I wanted to send an Oculus email but few people would have a headset. His reply was, 'Do the finger-thingy', which lead to this proof of concept. View the stereoscopic email  (there's a pause at the start to give your eyes time to focus, best in a browser that supports CSS animation).

Hold your finger up

If you hold your finger up just in front of your eyes in the center of the two images, moving slowly back from the monitor let your eyes loosely focus on your finger until a 3D image pops into view. Its a low-fi way to do 3D without needing a headset or glasses.

 

How's it work?

It's four layers of images in the z-axis, with CSS animation added. The CSS contains offsets in the layer positions to create the stereoscopic effect. We've specified a fallback image for clients that don't support CSS, like Outlook. It reminds me of those old dioramas, the idea was to eventually add animation to each of the transparent PNG foreground characters.

iOS Gmail app

We ran into a nasty bug in the iOS Gmail app, where it would unpack the layers (below left). Graeme only cracked it last minute so it showed the static fallback, though this left us no time to replace the placeholder artwork. I could see myself deploying scrolling horizontal emails, though probably not stereoscopic ones.

Posted 2014-05-28 19:47:40