Creating your first AR effect

Get Started

Create AR effects for Instagram and Meta.
Get Started

Create your first AR effect

The Welcome Window

Open Meta Spark Studio and the first thing you’ll see is the Welcome Window. By default you’ll be on the Create New tab. This is where you can create a new blank scene or use the templates built into Spark. Templates are ready-made effects that you can customize quickly and easily to build all sorts of effects.

Explore the additional menu along the left:

Learn — this is where we’ve listed tutorials for beginner, intermediate and advanced creators.
Recent Projects — you’ll find existing projects that you’ve been working on.
Open — click to open up a project on your computer. For example, a project you’ve been sent but haven’t worked on yet.
What’s New — this will take you to the changelog to find all the latest features released in the newest version of Meta Spark.
Creator Community — this will take you to the Facebook page for the Meta Spark community group.
Forum — ask and answer Meta Spark related questions.

Interface Tour

To get started:

Select the Create New tab.
Click Blank Project.

You’re now inside Meta Spark Studio. Let’s take a quick look at the interface. In the top right, you’ll see a window known as the Simulator. This window simulates what you would see on a device screen as you build your effect. Try out the following options:

Drag the corner of the Simulator to expand it.
Click the Undock icon in the top-right to move it around independently or onto a second monitor.
Click the rotate icon along the bottom to switch between landscape and vertical.

When building your effects, it’s really important to test them out on different skin tones, facial features, hair and so on to make sure as many people as possible can use your effect.

In the toolbar on the left, you’ll see a video icon. Click the icon to switch between different people. You can also switch to your webcam to see the effect on yourself.

Viewport

Now let’s take a look at the middle section of the interface: the Viewport. This is a 3D view of Meta Spark’s representation of the real world. It lets you visualize a scene and lay out 3D objects in space accurately.

The small phone icon represents the device itself. The pyramid shape stretching out of the icon is the viewing angle of the device's camera pointing out to the world. Whatever is captured by the device at this angle shows up in the Simulator.

The Assets panel

At the bottom left of the interface, we’ll see the Assets panel. As you start to build effects you’ll need to add different assets into your project, for example, a texture, a 3D object or a sound file.

The Scene panel

Above the Assets panel is the Scene panel. This is where you take assets and other scene objects and assemble them into the effect you want to build. As objects are added to the scene they’ll show up in the Viewport. If the camera is pointing at the object, it will also appear in the Simulator.

The Inspector

On the right is the Inspector. When you select items in the Assets panel or the Scene panel, for example the device, or a default light, the asset's properties show up in the Inspector. You can edit these properties to change the way the asset is being interpreted within your Scene.

That’s all you need to know for now. Keep going to dive in and build your first effect in just a few minutes.

Making and Testing Effects

To start creating an effect, you’ll need some assets. A quick and easy option is to use the assets in AR library. To open AR library, click the Library icon in the toolbar:

To find assets, browse the categories in the menu on the left. You’ll find:

3D Objects from Facebook and Sketchfab.
Music and Sound from the Facebook music and sound library. You can use these as you wish.
Patch Assets and Script Packages. These are both used to create logic in your scenes.
Textures. These are used to add detail to reflections inside shaders.
Color LUTs. These are used to color grade footage, including the camera feed.
Blocks. Ready-made collection of different assets and logic packaged up into one single component that we can then use to build sophisticated effects very quickly.

We’ll use blocks for this effect. With the Blocks tab selected:

Scroll to the bottom and select View All.
Click the Makeup block.
Click Import free. The button changes to Done when the block’s imported.
Close the window.

In the Assets panel, you’ll see a subfolder called Blocks and a block called makeup.

Next, select the makeup block. In the Inspector all the inputs are greyed out and there is no makeup on the user’s face yet. This is because the makeup block is listed as an asset but it’s not yet instantiated in the Scene. To bring it into the scene, click and drag it from the Assets panel to the Scene panel and release. You’ll now see makeup on the face in the Simulator!

Now, in the Scene panel, select the makeup block. All the block’s properties are now available, so we can start editing and playing with our makeup effect.

In the Simulator, you’ll notice the makeup look includes:

Skin smoothing.
Eyelashes — this is because the makeup block contains an eyelash block.
Eye makeup.
Lipstick.

In the Viewport, you can see how the effect looks in 3D space, in relation to the device.

Editing the makeup

With the makeup block selected in the Scene panel, go to the Inspector and adjust the sliders and color inputs to customize your makeup. For this effect we chose:

Eyeliner Color: blue
Lips Color: red

When changing the color, you may need to click OK before you see the change in the Simulator. You may want to edit other options, including:

Light Sensitivity: drag the slider to alter how much the effect responds to the lighting in the scene.
Specular Intensity: this controls how shiny the makeup looks.
Eyelashes Length.

When you’re happy with your effect it’s time to test it out.

Test the effect on a device

Before publishing your effect, you can take a look at what it looks like on your device. To do this, go to the toolbar on the left and click the Test on Device icon. You’ll see two options to Preview in App, to see what the effect looks like on your device — one for Facebook and one for Instagram.

Click Send to send your effect to Instagram.

If the Instagram option isn’t available, it may be that you haven’t linked your Instagram account with the Facebook account you used to log in to Meta Spark Studio. Follow the guidance to link your Instagram account to the Facebook account first.

After a few moments, your effect will send and you’ll get a notification inside Instagram. To find it:

Open Instagram, go to your notifications.
Tap the effect and confirm that the effect is a test version.

You’ll see the effect running inside the Instagram stories camera on your device.

Don’t worry, your effect hasn’t been published to your account, it’s just a test.

Meta Spark Curriculum

Watch this video from the Meta Spark Curriculum to learn how to publish your effect.

BEGINNER

10 MINS

Test link

For now, in Meta Spark Studio, go back to the Test on Device popover. You’ll notice a Test Link dropdown menu and a link to copy. If I want to send your effect to someone, copy this link and share it with them. This is very useful if you’re building an effect for a client and you want to share what you’re working on.

Extra credit — add more assets

To continue experimenting with your effect, try adding more assets or blocks. For example, in the Assets panel:

Click the + to add assets.
Select Search Asset Library.
From the menu on the left select Blocks, scroll to the bottom and select View All.
Select the Eye Color block.
Select Import Free.
Close the window.

The eyeColor block will be listed in the Assets panel. Drag it from the Assets panel to the Scene panel to instantiate.

The person's eyes in the Simulator will turn purple immediately and you’ll be able to edit the eyeColor properties in the Inspector.

Save and publish

Your effect isn’t saved automatically. To save it to your computer:

Click File in the menu bar.
Select Save.
Choose a location on your computer.

Meta Spark will create a project folder containing every asset you imported to this effect. You can package, share and/or submit this file for publishing.

Next steps

Congratulations! You’ve created your first effect. Head to tutorials to carry on learning.

This video features the following 3D assets under CC-BY-4.0:

‘Makerbot Digitizer’ by Chaitanya Krishnan
‘Winterfall’ by SomjadeChunthavorn
‘Love Never Dies’ by shaderbytes
‘Wiz Biz’ by tommonster
‘Clear The Blocks’ by igoremba
‘By the fire’ by JaDe.Dfr'
‘Musashi Miyamoto’ by Yulius Krisna
‘Mech Head’ by Tom3dJay
‘Anya’ by vann
‘Cake for #SketchfabDay!’ by Warkarma
‘lego guy Alien6’ by Chaitanya Krishnan
‘Royal Existentials 079’ by Chaitanya Krishnan

Learn More

LocaleModule

The LocaleModule class encapsulates access to the locale identifier of the device