As a continuation of my research into motion tracking interactive elements onto HTML5 video, and in order to achieve the 3D effects I want, I’ve added perspective.
The process is a little convoluted. It involves Greensock, Edge Animate, Flash CC, After Effects CC and Mocha Pro.
Once I’ve shot the video I bring that into After Effects and do a corner pin track using Mocha. Then I copy the tracking data from Mocha back into After Effects as transform properties. They’re then converted to Layer Markers using a script and the video is then output to FLV. I’ve written an Air program that opens, plays and harvests the cue point (tracking) data from the FLV and spits out a JSON file with sets of 8 data points (upper left X and Y, upper right X and Y, lower left X and Y etc).
I think that’s it!
The 3D tracked elements are interactive and the performance is great on the desktop (Mac and PC) and iPad Air although I’ve tried it on my Nexus 7 (2012) and the coloured circles that animate when you tap look blurred and terrible and the tracking isn’t very tight.
Still it’s a start and the performance is (hopefully) only going to get better on all platforms/devices.