Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations

Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.

Specialized AR filter designers can cost anywhere from $1,000 to $30,000.

In this tutorial, learn how to create interactive world effects using scripting in Spark AR Studio.

We’ll map boomboxes with audio sample effects, using scripts to add interactivity instead of using the patch editor.

This effect shows how to animate and place 3D models in the real world, and can be manipulated with touch gestures. It also includes looping audio.

If this is your first time using scripts in Spark AR Studio, see the Scripting Basics and Responsive Programming guide.

Download the sample project

To follow this tutorial:

  1. Download sample content

Link: pan.baidu.com/s/19Ha0Dz6z… Extraction code: FOUC

  1. Open unfinished effects in Spark AR Studio V67 and later

We have imported the resource files you need to get started.

Set the scene

Before we can focus on the script, we need to set the scene. Objects cannot be created in scripts, so we need to add them to the scene before accessing them.

1. Understand resource files

In the Assets panel, you’ll find two folders:

  • Boombox_animated — This folder contains boombox 3D models (boombox_Animated), and an animation (Beats), Some textures (dropShadow_mat and boombox_mat) and textures (Texture 0 and Texture 1) are applied to the model.

  • Audio — This folder contains Audio files in boombox_loop.m4a format.

Second, add plane tracker

We’ll start building this effect by adding a Plane Tracker.

When the camera detects a plane, child objects of the plane tracker, such as a table or floor, appear. We’ll use a flat tracker to locate the boombox.

Add a plane tracker to your scene:

  1. Click Add Object at the bottom of the Scene Panel.
  2. Select Plane Tracker from the menu.
  3. Click Insert.

After you add the plane tracker, a planeTracker0 object will appear in the Scene Panel, and the simulator will prompt you to view the new grid view (which has replaced the face video).

Add an empty object

Null objects acting as empty groups are a great way to group objects together, as we’ll do in the next steps.

Add an empty object as a child of the plane tracker:

  1. Right-click the planeTracker0 object.
  2. Select Add > Null Object.

When you add an empty object, a nullObject0 object appears in the Scene Panel.

We’ll rename the empty object to something more descriptive, because we’ll reference it later in the script. We call it placer because we’re going to use it to put boombox in the world.

Rename an object:

  1. Right-click the nullObject0 object.
  2. Click Rename

  1. Change the name to placer.

Your Scene Panel will look like this

Add a recorder

Click and drag the boombox_animated folder into the placer to add it as a subfolder.

It will appear in the viewport and emulator, and while it is not yet animated, we will change it later in the script.

We will also update the position of the recorder so that it is centered on the plane tracker. Here’s what to do:

  1. Select the boombox_animated object in the Scene panel.
  2. Change the z-axis position to 0.3 in the inspection panel.

Add audio files

There are several steps to adding audio effects in Spark AR Studio. To control how the audio is played, we need to create an audio playback controller and add speakers to the scene to emit the audio.

1) Create an audio playback controller:

  • Click Add Assets at the bottom of the Assets panel.
  • Select Audio Playback Controller.

2) Add audio files to playback controller:

  • Select audioPlaybackController0 in the Assets panel.
  • Select boombox_loop.m4a from the audio drop down box and check the Loop box in the inspector.

3) Create and configure speakers:

  • Right-click the Placer object in the Scene panel and choose Add > Speaker.
  • Select the Speaker0 object in the Scene panel.
  • Select audioPlaybackController0 from the inspector’s Audio drop – down menu.

At this point, your scene panel and resource panel now look like this, respectively:

Add scripts

To create the script

  1. Click Add Asset at the bottom of the Assets panel.
  2. Choose the Script.

The Script0 object will appear in the Assets panel.

Open the script

To open the script, double-click the script0 file in the Assets panel.

The script file opens in the default editor associated with the JavaScript file on your computer.

Delete existing script code

The new script is pre-populated with code to help you understand some of the basics of the script. Because this tutorial will cover everything we need to know about scripting for this project:

  1. Remove all existing code, leaving the script empty.
  2. Save your empty script.

Now that the scenario is set up and we have created the script, we can start writing the script.