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.

Download Meta Spark AR Studio

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 :

1. Opening the software
2. New Project
3. 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 :

1. drag and drop the Microphone in your Patch Editor.
2. Right Click in the patch editor and select under Audio the Audio Analyzer
3. 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

Join a Developer Circles 😌

Learn more about Meta Spark AR Studio here :

Download Meta Spark AR

Link to the project on GitHub : https://github.com/RobbieConceptuel/spark-ar-tutorial-audio-visualizer

Link to additional resources to learn : https://sparkar.facebook.com/ar-studio/learn/

Join the Meta Spark AR Community

Made with 💖 by Robbie Conceptuel - Updated in 2024