Learning Spark AR in Public

Introduction

Spark AR Studio is an application developed by Meta to create AR filters on social media platforms like Facebook and Instagram. Other social media AR app includes Lens Studio for Snapchat and Effect House for TikTok.

Motivation

I have always dreamt of creating my own Instagram filter in 2019-2020. My action plan is to migrate my existing Lightroom presets into Instagram compatible filters as a starter project and explore further once I have familiarized myself with Spark AR basics.

I finally put things into action and recently created my Spark AR Filters in 2022.

Learning Points

Here are some of my learning points from my first starter project:

1. Always plan for the target platforms before developing your filter

• There are 3 types of experiences that Spark AR filters can support on Facebook and Instagram
  1. Sharing new experiences on stories, reels, posts or messages
  2. Real-time video experience for real-time video calls
  3. Existing Media (Applying filters on saved images or videos)
• All capabilities and patches are available for sharing new experiences, and the availability of capabilities reduces as you go down the list.
• For example, filters cannot be applied to existing media if the filters use native UI like UI Picker or UI Slider

2. The option is to apply filter on existing media is precious

• If a filter has been published with capabilities that are not compatible with existing media, updating the published filter with a backward-compatible project will not bring back to option to apply the filter to existing media.

• There is no known workaround for this. I have to resubmit my filters as a new submission to get the option to apply for existing media.

3. Understanding gestures

There are 5 gestures available on Spark AR.

These gestures are :

• Tap

  • Most common in filters. Users can tap the screen to toggle a setting or cycle through a list of settings.

• Pan

  • Can also be understood as a tap and drag gesture. Typically used to drag and drop a prop around the viewport.

• Long Press

  • An alternative to Tap. It is less intuitive than Tap, but it can be used to add additional functionality to the filter.

• Pinch

  • Typically used to resize a prop. However, the default gesture, pinch to zoom, will not longer work if this gesture is enabled.

• Rotate

  • 2-Finger-Rotate. Least common in filters, can be used to skew or rotate the orientation of a prop.

Instruction is key

• Keep any interactions or gestures as intuitive as possible.
• Include instructions as much as possible.
• Understand the differences between Automatic Instructions and Custom Instructions. Use them wisely and avoid overlaps for a better user experience.

Resources

This section documents a list of valuable resources that I have used to pick up this skill:

• DJS CREATES : High-quality Spark AR tutorials in bite-size format

• Eddy Adams: Most comprehensive masterclass about Spark AR on YouTube

• Udart: Deep-dive on various patches for a thorough understanding

References

• Best Practice for Creating Effects in Spark AR Studio

• Best Practices for Target Tracking in Spark AR Studio