This week, Ijon and I wrapped up our animation assignment by converting our After Effects animations into an AR application. We quickly realized that the ambition of our idea was too big for the timeline that we had to execute it in AR, and so we pared it down to two scenes instead of the original 4. All our images, audio and video were sourced from copyright free websites or was purchased for personal use.
Initially we started working in Adobe Aero, but realized quickly that there was no way to hide images/video behind invisible walls, which was necessary if we wanted to create a portal hidden inside of an elevator.
We couldn't find a solution online, so we decided to build the scenes in Spark AR. Since we were unsure which program would yield the better product, Ijon and I developed our animation idea in both platforms. I'll link Ijon's blog post here once it's up, as she can explain the process of creating our animation in Aero.
As for Spark AR, having previous experience working in the software I knew that this animation project was pretty ambitious for what Spark could handle. Any 3D assets or high resolution animations would have to be compressed significantly to work well in Instagram, which has a file size limit of 4 megabytes. This meant that our initial animation idea had to be tweaked to fit the individual software.
As far as the file format that Spark requires, many of our assets had to be converted into either a sprite sheet or an image sequence. I found that the sprite sheet yielded a smaller file size and was necessary to get the background water to move without blowing our size limit.
The sprite sheet that was generated for the background in the deep sea animation
Once I layered all the assets in our scenes and generated the background, I added the occlusion planes, which hid the everything behind it, to give the illusion that doors were opening into a new world. The occlusion planes are a key part of the project and was necessary for the execution in Spark specifically.
behind the curtain of creating in Spark AR
Because It was difficult to add animations in Spark due to file size limitations, I ended up creating particle systems to add more life to the scenes, which made life a lot easier. While the effect is cheesy and not exactly what we originally intended, I still think it's quite fun.
Particles emitters were added to create the fish and bubbles in this scene
The last step was to add interactivity. We wanted the animation timed so that it activated when the image target is in view. In order to do this you have to use the patch editor. The audio, particles, and animations are all tied to the target tracker. I would have liked to have added more interactivity and some more sophisticated code to make the effect cleaner, but we ran out of time.
Obligatory patch editor screenshot for the forest and deep sea scenes respectively
With that done Ijon created the lovely target image, and I created the QR codes that would be necessary to link to instagram and trigger the animation.
target trigger for Instagram
QR Codes as elevator buttons
And that's basically it. I wish Aero was a more robust program with the same amount of advanced features as Spark AR. I also wish Spark AR was able to handle higher quality images and made it easier to upload animations to their platform. But all in all, it was a good experience getting more acquainted with Spark and Aero. We definitely condensed our project to the barest minimum and it's not exactly our vision, but the output worked out, and I feel we were able to get our concept across.
Here's the animation recorded from Spark AR sans audio.