This tutorial begins with a quick tour of the Spark AR Studio interface. You’ll learn about the Simulator and its relationship to the Viewport and how to use the Assets and Scene panels. After this, you’ll create and test your first makeup effect, in just a few simple steps!
You don’t need any of your own assets to build this effect, just download Spark AR studio and follow the video tutorial or the written instructions below.
Open Spark AR 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:
To get started:
You’re now inside Spark AR 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:
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.
Now let’s take a look at the middle section of the interface: the Viewport. This is a 3D view of Spark AR’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.
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.
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:
We’ll use blocks for this effect. With the Blocks tab selected:
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:
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:
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:
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 Spark AR 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:
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.
Watch this video from the Spark AR Curriculum to learn how to publish your effect.
For now, in Spark AR 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.
To continue experimenting with your effect, try adding more assets or blocks. For example, in the Assets panel:
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.
Your effect isn’t saved automatically. To save it to your computer:
Spark AR will create a project folder containing every asset you imported to this effect. You can package, share and/or submit this file for publishing.
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: