Member of Technical Staff

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.

Lytro original light field camera orange version.Original "butter stick" Lytro camera in orange.

Light field photo of a squirrel by Mugur Marculescu, Union Square NYC.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.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.

Lytro player UX process sketches for patent application.In order to communicate parallax effects, I used sketching depicting depth.

Lytro player UX process sketches for input map in patent application.Input map showing how touch screen and mouse inputs control the player.

Lytro player UX process sketches for patent application.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.

Lytro web application templates, views and schedule.I'm a big fan of Edward Tufte, what else can I say.

Video walkthrough of the web app interface. I designed the interaction and wrote 80% of the UI code in JS and HMTL5. Visual design by Jason Wilson.