Objective and concept: I wanted to experiment with AR effects. The idea came from wanting to get people to think about the sourcing of coffee. The “portal” opens to a view of the farm where the beans are harvested. These beans were purchased directly from the farmers, a very intentional effort from the roaster towards transparency and accountability.
Approach: I chose Meta Spark Studio because it had the basics I needed baked-in, and a social media filter conceptually fit will with the idea.
AR portal filter demo using Meta Spark Studio
The photo you see is one of Joana and Armel’s farm near San Agustín, Columbia. I owe thanks to Jarryd from Migthy Valley Coffee for the photos, and for guiding me through my coffee learnings in the last few years.
Meta Spark Studio made it so easy that it was underwhelming. The basic first prototype worked in under an hour, though I put a lot more polish into the finished effect.
In the final effect I've included an occlusion box with a panoramic image applied to a half sphere (half-section for explanation purposes below). The sphere made for a much more immersive effect than a flat photo, and the occlusion box served to hide the sphere behind a "window" portal. Meta Spark Studio has the image tracker functionality baked in, so the part to find the label on the coffee bag and attach the 3D model to it was basically drag-and-drop. (I used Blender to create the basic 3D shapes for these.)
Iterations: It was fun to experiment with the subtle tweaks. The first prototype with a static image attached was fun as far as AR goes, but it felt pretty boring. When I added the occlusion box, the effect was much more engaging, but it felt more like a flat photo sliding underneath the coffee packaging, than an immerse "peak" into Joana and Armel's farm. The half-sphere combined with the occlusion box made for a much more polished and interesting effect.
First prototype of static image, second prototype of image behind portal window, third prototype of image stretched on sphere.
View in Blender of occlusion box, and the half-sphere with the photo texture applied in Meta Spark Studio
Challenges: Getting the texture for the sphere was a bit tricky, since I did not have a 180° panorama photo to work with. At first I stitched the few photos I had to get as much coverage as I could, but it wasn't enough coverage and it left an awkward amount of space around the photo. I used Photoshop's AI image generation to extend the image, almost doubling the the dimensions. With a few passes and tweaks, Photoshop did a fantastic job filling in the blank space. At first I wasn't too keen conceptually on using AI-generated images for a transparency and accountability project, but the generated parts are actually barely visible because of how the texture is stretched on a sphere. I applied a spherical distortion, some blur, and fades to the final image to smooth out the effect.
Original image (2-3 real photos stitched together); Photoshop AI-generated image for the surrounding blank space; final texture with distortion and tweaks.
Conclusion and further work: Overall this is very close to the effect I had in mind. I had wanted to also add a soft glow around the portal window for extra polish, but I've been having issues in setting up the shaders and effects. Once that's figured out, a bit of animation to transition in and out would be sweet. At some point, I'll add other portals for the other farmer-traceable beans Jarryd has, and publish the lens.