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.
Under the effects of this section, clicking on the recorder on the device’s screen will cause a toggle effect between three (increasingly complex synchronized) music loops. One of the audio clips would increase in volume, while the others would disappear into the background. This technique is called Loop Layers.
You’ll use the patch editor to build this effect, while trying out different audio, interactive, and animated patches.
Download the sample content to follow this tutorial. You can use any of these resources in your own projects.
Link: pan.baidu.com/s/1QPUXaBCe… Extraction code: 1PF1
If you want to build this effect yourself, open the unfinished effect in the Sample Content folder. We’ve imported the assets you need to get you started quickly.
Object hierarchy
In this effect, we will create child-parent relationships between different objects in the scene. The child object will accept or be affected by the attributes of the parent object.
To make one object a child of another, you simply drag the child onto the parent object. You can also right-click an object and insert an object as a child of it.
When an object is a child of another object, it is listed below the scene panel like this:
In the example above, Boombox_animated is a 3D object. It is a child of the empty placer object. It will accept any transformations applied to empty objects.
Add a plane tracker
To start building the effect, add a plane tracker to your scene. When the camera detects a plane, a child object of the plane tracker appears, such as a table or floor.
When you add a flat tracker, the video in Spark AR Studio goes blank.
Use an empty object
Inserts an empty object as a child of the plane tracker.
Insert an empty object:
- Right-click the plane tracker.
- Select Null Object from the menu.
- Rename it placer.
We’ll use placer to group two objects (together as a group) so we can make changes to them at the same time:
- A 3D object that looks like a stereo.
- An object called a speaker that we configure to play sound in the scene.
Add a RECORDER 3D object
We have added 3D objects to the unfinished project. It is listed as boombox_animated in the assets panel:
To add it to the effects, simply drag and drop it from the Resources panel into the Scene panel. And drag and drop it onto the placer so that it becomes a child of the empty object:
You’ll see the Boombox object in the viewport and emulator, but it’s not animated yet — we’ll use the animated patch to do that later.
Add animation
Build a simple diagram in the patch editor that animates the Boombox. If you expand boombox_animated in the scene panel, you’ll see that it consists of multiple objects:
The first four objects are grids. The grid is where materials are applied to determine the look of the boombox. And a skeleton with three joints. We’re going to manipulate these joints to control the animation. We’re going to animate
- Base_jnt — Adds movement to the bottom of the boombox.
- Speaker_left_jnt and speaker_right_jnt — animate two speakers.
1) Create the patch
We’ll manipulate the joint’s 3D Scale property to make the boombox look bigger and then smaller.
First, a patch is created to represent the 3D Scale of each joint:
- Select Base_jnt in the Scene panel.
- In the inspector, click the arrow next to Scale. This will create a patch and open the patch editor.
Repeat these steps for speaker_left_jnt and speaker_right_jnt so that there are three patches in the patch editor.
Next, create a patch to drive the animation:
Right-click in the patch editor. Select 2 Loop Animations and 2 Transition tiles from the menu.
The Loop Animation patch and the Transition patch are usually used together. This is because the Loop Animation patch controls the progress of the Animation, while the Transition patch can be configured to control how and where objects move.
2) Animate the bottom
First connect:
- Link the Progress port in the Loop Animation patch to the Progress port in the Transition patch.
- Transition patch port outputs to the 3D Scale port in the base_jnt patch.
Because the Start value in the Transition patch is set to 0 by default, the scaling effect is extreme:
To change this value, set the Start value to 0.9.
Boomboxes are getting bigger now, and then coming back to their original size. In the Loop Animation patch, select the check box next to Mirrored. Boombox gets bigger and bigger and then smaller:
Movement is also a bit slow — change Duration to 0.4 to speed up the animation.
The final adjustment is to change Curve in the Transition patch. This sets the movement of the object as it scales. We chose Quintic In, but you can choose something else.
Your finished image should look something like this:
3) Animate the speaker
The speaker animation is very similar to the bottom animation of the Boombox. Once again:
- Connect the Progress port in the second Loop Animation patch to the Progress port in the second Transition patch.
- Connect the output of the Transition port to the 3D Scale port — this time on Speaker_Right_jnt and Speaker_LEFt_jnt.
In Loop Animation patch:
- Select the check box next to Mirrored again.
- Change Duration to 0.2 seconds.
In the Transition patch:
- Change Start to 0.7 and End to 0.85.
- Change Curve to Elastic Out.
Your diagram should look something like this:
Add looping audio
Next time
Add speakers
Next time
Setting Audio Playback
Next time
Set up the audio loop layer
Next time
Add interactive patches
Next time
Add counter and option selector patches
Next time
Link to the patch
Next time
Edit the patch
Next time
Add exponential smoothing
Next time
Edit the animation
Next time
Operating recorder
Next time