HTML5 Light Field Image Parallax & Refocus Player
Lytro was a computational photography company which was acquired by Google in 2018.
I joined the company in 2011 and became the lead SW engineer on the web UI team. During that time I built the world's first light field picture viewer with simultaneous refocus and parallax. This player enabled the proprietary format from becoming interactive in web browsers, on iOS and Android.
Original "butter stick" Lytro camera in orange.
Light field photo of a squirrel by Mugur Marculescu, Union Square NYC.
Player interaction design
I did extensive sketching before the development process started to work through interaction problems. The scans below depict cleaned up sketches used for the patent filing process.
Animation timing diagram to account for delay in conscious perception. This solves for the finger being in the way on touch screens and the time it takes for the eye to to look at the hint location.
In order to communicate parallax effects, I used sketching depicting depth.
Input map showing how touch screen and mouse inputs control the player.
Depictions of various parallax thumbnail display treatments and effects.
Implementation running on iPhone
The app runs at the phone's native framerate due to GPU acceleration and uses the accelerometer and gyroscope sensors to animate the parallax effect. Fun fact, Steve Jobs saw this demo and a few months later the iPhone parallax wallpaper effect shipped. Simple coincidence?
Web team UX/UI eng lead
I also led the UI and UX development for the Lytro web site and customer photo gallery web app. My responsibilities included developing the component architecture, layout hierarchy, and implementing the clientside logic.
I'm a big fan of Edward Tufte, what else can I say.