Note: As of January 2025, Meta Spark AR Studio has been officially discontinued by Meta Platforms Inc.
Spark AR Studio is software developed by Meta Platforms Inc. that allowed users to create interactive augmented reality (AR) experiences.
It has been widely used to create popular AR filters for Instagram, Facebook, and other social platforms.
With its intuitive tools and strong community, Spark AR played a key role in the rise of augmentism, a trend that blends art and technology to enhance our perception of the world through digital experiences.
In January 2025, Meta Platforms Inc. decided to end the development and support of Spark AR Studio, marking the conclusion of a platform that significantly contributed to the growth of augmented reality in social media.
A heartfelt thank you to everyone who contributed to Spark AR Studio, its resources, and the advancement of augmentism.
Your creativity, passion, and dedication have left a lasting impact on the world of augmented reality.
using the software Meta Spark Studio
This tutorial is an entry for the 2020 Developer Circles Community Challenge hosted by Facebook.
Regional Winner 🏅
Welcome in this Meta Spark AR Studio tutorial . In this project, we will learn how to make an audio visualizer using the audio features in Meta Spark AR. This is a tutorial for beginner.
At the end of the tutorial you will learn how to make an Audio Visualizer like this:
This tutorial will cover :
- importing the 3d object
- Make it react to audio using the Patch Editor
In this tutorial I’m using the version 99 of Meta Spark AR Studio.
With more than 400,000 creators from 190 countries, Meta Spark AR is the largest platform for mobile AR . Over 1.2 million AR effects where published on Facebook and Instagram .
We are still in the early days! Every update is a surprise with new features.
With or without code, Meta Spark AR Studio enhances your creativity and expand your digital creative skills. A powerful software to create astonishing Augmented Reality effects.
A quick Walkthrough Video of the tutorial.
The following video is a step-by-step video tutorial. It contains and show all the process described in this tutorial.
For this project we need :
- Download Meta Spark AR
- 3D model in the folder 3D-model link to model
- Having Meta Spark AR Player installed in your phone link to Meta Spark AR Player
To start this tutorial, you need to download the software Meta Spark AR Studio and open it. You also need the 3D model 'audioBar.fbx' in the folder '3D-model'. We will see the audio nodes in the patch editor and use it.
Let's start our project by :
- Opening the software
- New Project
- Choose Plane Tracking
Once our project is opened. Let's drag and drop the 3D model in the project then drag the object in the placer.
Select the audioBar in your scene and change the scale value to 0.1 on your right like this :
When done, duplicate the audioBar and change the position of the second audioBar value to 0.2 on the X axis. like this :
Repeat this step until you have 8 audioBar. The scene on your left top of the screen should look like this :
Now let's create the materials we gonna apply on the 3d object (audioBar). For this project I will create 8 materials with different colors.
To apply a material :
- select the cube inside the audioBar
- on the right, create a material
- select your material on the left side of your screen
Like this :
Now that you have your material, we can improve it by :
- changing the 'Shader Type' and choose 'Physically-Based'
- changing the colour
Import an environment texture :
The material should look like this :
The features we are using are only available for Instagram. We have to disable Facebook as a platform. For this we go under : Project > Edit Properties > Uncheck Facebook
Like this :
Now that your scene is placed, we open the Patch Editor : | View > Show/Hide Patch Editor
It will open the Patch Editor.
In your scene :
- drag and drop the Microphone in your Patch Editor.
- Right Click in the patch editor and select under Audio the Audio Analyzer
- link the microphone to the Audio Analyzer ( Microphone to Audio)
The Audio Analyzer is an element that provide us the ability to separate the audio into 8 different channels. The frequencies goes from 0Hz to 12'000Hz.
Info about the Audio Analyzer :
Select your audioBar, on the right of your screen you have to active the scale by clicking the arrow. Here :
Right click in the Patch Editor and add a 'Transition' element. Change the values of the transition element to make it look like this :
Link the Audio Analyzer > Transition > audioBar '3D Scale'
Now we have add a speaker to use it as the output of the audio. In you scene :
- click on 'Add Object' and add a speaker
- select your Speaker
- click on the arrow under Audio
like this :
Link the first output of your Audio Analyzer to the Speaker output (yellow element) :
Repeat the step with the audioBar2
Repeat these steps for all your audioBar objects.
Your patch should look like this :
Now that we are finished ; we can preview our effect to your Meta Spark AR Player app or send to your Instagram account :
We're ready to upload !
On bottom of your screen :
- click Upload and Export
- Follow the process of uploading a filter to your account
Link to the project on GitHub : https://github.com/RobbieConceptuel/spark-ar-tutorial-audio-visualizer
Made with 💖 by Robbie Conceptuel - Updated in 2024