R/GA has recently released their 2007 Interactive Holiday Card. I spent a good bit of time over the past few weeks working on it with a team of talented folks here at R/GA.
Tattoo Santa takes advantage of the performance improvements in Flash Player 9 to warp an image onto a mesh real time. By combining this with video playback, we are able to insert content into a video real time. I’m guessing that this basic technique is going to be pretty common place in the next few years as it has a wide variety of applications (besides the obvious one of putting tattoos on Santa).
Figure 1. Tattoo Santa offers 6 different tattoo designs which incorporate a custom message from the user.
Figure 2. You can upload a custom image to be tattooed on Santa’s back.
In the past, this kind of compositing required a server component, which would require a fairly large infrastructure investment to deploy. By offloading the compositing to the client (Flash), we minimize the server usage, code complexity, bandwidth requirements and time delay for viewing the results. In Tattoo Santa, there is no round trip to the server, you see the results applied real time as you interact with the piece.
Besides a few rough prototypes, this is the first time I’ve used this technique and it was quite a learning experience. Besides running into some surprising cross browser/version differences in the Flash Player (wtf adobe), there are performance issues with running the video at the size we chose which only became apparent at a point in the project when it was too late to revisit. All in all, I think Tattoo Santa came out pretty well, especially considering it was out first time doing this type of thing. I already have a lot of ideas on how we can improve the visuals and automate the production work, which I hope to put into practice on some future project.
Make Your Own Tattoo Santa Greeting
We’re using the same technique of perspective texture mapping that’s used in 3D Engines like Papervision and Sandy. We defined the points of our mesh by tracking marker dots that were physically drawn onto the actor, and later removed in Adobe After Effects.
I wrote the code as an employee of R/GA and therefore it’s not my code to release.
Well thanks for explination. Again it is a very cool effect.
Hello,
You’ve done a very good job!
Is it possible to explain how you’ve created the mesh: When you’ve tracked marker dots, do you import the 3D track data into Flash, or do you creta a 3D mesh in a software like Blender or 3DSMax?
If you use a 3D software, how can you import the 3D into Flash?
Thank you very much for your answer
Nat says:
I love the effect, really nice job. Do you think you will share any of the code. Show how you did it? I would love to learn the effect but i can’t find anything on compositing like that.