Spark AR: augmented reality playground for developers and designers

[unable to retrieve full-text content]

This text aims to present the wonders of Spark AR. There is a lot of excitement around Virtual Reality(VR), Augmented Reality(AR) and Mixed Reality(MR). Spark AR Studio is a program provided by Facebook to develop Augmented Reality filters for social networks. The creative economy states that man’s ability to create is the main production input. To face a market in constant change and with highly qualified professionals, it is necessary to be prepared. As a result, we need knowledge that permeates different areas. Programming and Design tend to be seen as disciplines alien to each other, but the professionals who combine the two skills gain more and more space.

Illustrated example of an augmented reality filter
Illustrated example of an augmented reality filter – Retrive from Zero Gravity Marketing

The Creative Economy covers the cycles of creation, production and distribution of goods and services that use creativity, culture and intellectual capital as primary inputs. From the perspective of the creative economy, man’s ability to create is the main production input, being present not only in creative companies but throughout the economy. It is necessary to be prepared to face a market in constant change and with highly qualified professionals. Every day new technologies are being inserted into daily life. Concepts such as Virtual Reality(VR), Artificial Intelligence(AI) and Robotics that seemed to be ideas from books and films are already common. As a result, the need for knowledge that permeates different study areas is increasingly necessary.

There is a lot of excitement around Virtual Reality(VR), Augmented Reality and Mixed Reality(MR) in today’s technology. With Oculus Rift S, Oculus Quest on Android and Vive Cosmos, virtual reality may be about to enjoy a second coming. MR and AR are interesting technologies for marketers to consider. Unlike VR, they interact directly with real space and are based in a way that VR is not. This can be useful when trying to promote a brand in the real world.

Jobs that require soft skills such as creativity can not be easily replaced by Automation Services. The advent of Instagram and Facebook filters has created a growing demand for qualified digital creators, capable of representing brands on social media. Spark AR can be a good opportunity to get into programming and user experience.

Multiple realities

There is a lot of excitement around Virtual Reality, Augmented Reality and Mixed Reality in today’s technology. Despite the pessimists, VR is certainly not dead. Perhaps they are finally breaking the general market. Virtual Reality is an interface technology between a user and an operating system through 3D graphics or 360º images. The objective is to create a sense of presence in a virtual environment different from the real one.

Augmented Reality is a technology that allows mixing a virtual environment with the real environment. This means that there is better interaction between the execution of tasks and machines. For AR to work, three fundamental elements are needed:

  • A real object with some reference for the interpretation and creation of the virtual item to be made.
  • A camera, or another device that can transmit the real image of the item.
  • Software that captures the signal emitted by the camera.

Mixed Reality is between these two. The experience is entirely digital, but the virtual aspect is anchored in the real world. Mixed reality and AR are interesting technologies for marketers to consider. Unlike VR, they interact directly with real space and are based in a way that VR is not. This can be useful when you’re trying to promote a brand in the real world.

Animation showing the difference between virtual reality, augmented reality and mixed reality
Difference between virtual reality, augmented reality and mixed reality — Retrive from Chris Berno

Perfect for creatives and developers

It’s necessary to be prepared to face a market in constant change and with highly qualified professionals. There is no point in taking a degree and believing that all that academic knowledge is enough. Today’s creatives are launching their destinations and defining the direction of the market. Programming and Design tend to be seen as disciplines alien to each other, but the truth is that the professionals who combine the two skills gain more and more space.

Many designers working with digital interfaces are beginning to expand their limits as creators by learning skills previously restricted to programmers only. Those programming skills are only bringing benefits to the projects in which they are involved. This basic knowledge can greatly reduce the number of failures in your creative project and open a very advantageous dialogue channel with the programming team. The other side of the path is also advantageous.

The progress of computing drove the creation of the term Human-Computer Interaction (HCI). As the name suggests, the starting point was to improve human interaction with machines based on improvements that sought to make machines more intuitive and easier to use. As it is an extremely visual product, when creating these filters with AR, the developer is directly connected to the user. In this way, it is possible to improve skills related to UX concepts. Spark AR Studio is a program provided by Facebook to develop Augmented Reality filters for social networks.

The software provides a gallery of templates for the user to create their filters. This program is ideal for adding icons to the face (beard, glasses, hat, etc.) creating image effects, or even interacting with 2D|3D objects. With face-tracking set up automatically, you can create more accurate interactions. Also, the Facebook tool allows you to create AR filters with great freedom. This powerful AR software works by combining objects and assets. You can do it using a kind of block programming to create interactive actions. Also, it is possible to use Javascripts for creating unique interactions with the effects created. Few lines of code can take your filters to another level.

Spark AR effect gallery
Spark AR effect gallery — Retrive from Spark AR

Get involved

The Spark AR community is very active. In addition to the various videos on YouTube, we can highlight other ways to gain new knowledge about the tool:

  • Spark AR Creators — a Facebook group where global Filter creators discuss and ask questions.
  • Spark AR Tutorials — On the platform website there is a range of examples of filters to be made. This can be a good start.
  • Spark AR Community— Group ideal to ask for advice, share their filters and ask about feedback to other creators.

Just create

Now it’s time to create. Let’s establish some rules to create digital content. Treat the filter as any regular software. The regular Software cycle would be:

1) Code

Spark AR allows you to add interaction, animation and logic to your effects using Patches. They act as visual building blocks, with each patch performing a unique function. This allows you to add interaction and complexity without knowing how to code. By connecting patches, it is possible to pass and receive information to and from one another. Such is known as a Graph. To reduce repetition when working on effects, Spark AR has Blocks. This enables us to save and export pieces of a Graph and add the block whenever you need it.

Spark AR Studio also supports JavaScript for adding logic and interactivity to effects. Scripting is broken down into modules with each module implementing a particular functionality. Spark AR Studio uses reactive programming, a declarative programming model that uses asynchronous data streams. This permits creating relationships between objects, assets and values. To be able to access the APIs belonging to a module, it is not necessary to load into a script using the required method.

2) Test

There are 3 ways to test your filter. The first way is to use the built-in videos that already exist in the Spark AR software. That allows you to see how your filter will look like on Instagram or Facebook. You will see in the right top corner a video. Spark AR software also allows you to preview how the filter behaves depending on the shape of the faces. You can choose the models on the left side of the program.

The second way is to download the Spark AR App for Android or iOS. Once it’s installed, plug your device via cable to your computer. After this, find an icon that says “Test on device”. This feature will allow you to test at runtime your filter with the camera of your phone without publishing it. The final way it’s, once your filter gets into the Spark AR distribution website, to a friend to check out your new creation. This is an important step in the development since is the most accurate way to find if your filter doesn’t run in every phone.

3) Deploy

After exporting your effect, you’ll need to submit it to be published in Spark AR Hub. This is the website where you can create and check your filters. The publishing process includes picking a name for your effect, uploading your effect file, attaching your demo video and icon and waiting for it to be accepted. Today that time for acceptance is up to 10 days. However, this can vary depending on the week.

Spark AR deployment flow
Spark AR deployment flow — Retrive from Spark AR

4) Repeat

Practice makes perfect. The more you practice, better the solutions you will create. Just remember to always try to keep it simple. The most used filters are very simple and they get hundreds of views and downloads. In this repository you can find some examples of simple filters to start.

To face a market in constant change and with highly qualified professionals, it is necessary to be prepared. As a result, the need for knowledge that permeates different study areas is increasingly necessary. Programming and Design tend to be seen as disciplines alien to each other. The truth is that the professionals who combine the two skills gain more and more space. Spark AR Studio is a program provided by Facebook to develop Augmented Reality filters for social networks. The tool allows designers to improve their programmer side. In addition to the developers being able to train aspects related to the user experience. The Spark AR community is very active and it is possible to find useful materials online. Practice makes perfect. The more you practice, the better the solutions you will create.

The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.


Spark AR: augmented reality playground for developers and designers was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a comment

Your email address will not be published.