There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Quick Start Guide to Spark AR Studio

Something Went Wrong
We're having trouble playing this video.

In this tutorial, you'll build a basic mask effect.

A basic mask is made up of a face tracker, a face mesh, a texture and a material. Everything except the texture can be created in Spark AR Studio. Download the sample content to follow along.

You'll also learn:

  1. The key parts of the interface - there's more detail in our documentation.
  2. How to preview what you're building, using the Simulator.
  3. How to view and edit the default keyboard shortcuts within Spark AR Studio.

If you open the finished effect in the sample content folder, you'll see a mask that makes it look like somebody has drawn on your face with a marker.

Inserting a face tracker

To get started, open Spark AR Studio and create a new project.

The face tracker is the foundation of the mask. To insert one into your scene:

  1. Click Insert.
  2. Select Face Tracker.
  3. Click Insert.

You should now see axes on the face in the middle of Spark AR Studio. This section is called the Viewport. You can use it to visualize and interact with your scene, together with the Simulator.

You'll also see a face tracker listed in the tab on the left. This is called the Scene tab. It lets you manage the hierarchy of objects in your scene.

Inserting Face Meshes

Next, insert a face mesh. This is a 3D object.

To make the face mesh track your face, you'll have to insert it as a child of the face tracker. To do this:

  1. Select Insert.
  2. Select Face Mesh.

You should now see a face mesh in your scene. You can also create relationships between objects in the scene by dragging one on top of the other in the Scene tab.

Importing Texture Files

Textures and materials are inserted from the Assets panel. This panel lets you manage the files you've imported, and the materials you've created using Spark AR Studio.

Textures can be either JPG or PNG. You'll need to create textures in advance. For this tutorial, we've provided a texture or in the sample folder.

To import your file:

  1. Go to Assets.
  2. Click +.
  3. Select Import Assets.
  4. Open the PNG from the sample content folder.

You should see moustache.png in the Textures folder.

You can also import assets by dragging and dropping files into the Assets panel from your computer.

Creating and Editing Materials

Now your texture is in Spark AR Studio, you'll need to create a material to apply it to.

To create a material:

  1. Go to Assets.
  2. Click +.
  3. Select Create New Material.

You should see the material you created in the Materials folder. The material's properties should be displayed in the Inspector panel on the right.

The Inspector panel lists the properties of the selected object, asset or layer and gives you the tools to edit them.

The Shader Type for materials is set to Standard by default. Spark AR Studio includes several different built-in shaders, but the best type of shader to use for basic masks is the face paint material. To change it, click the dropdown menu next to Shader Type and select Face Paint.

Next apply the texture to the material. Click in the gray box next to Texture and select the texture you imported from the menu.

Now you've applied your texture to the material, you can apply the material to the face mesh:

  1. Go to the Scene tab.
  2. Select your face mesh.
  3. Go to Material in the Inspector panel.
  4. Click + next to Material and select the material you created from the menu.

You should now see your material tracking your face.

Previewing Effects

You can preview what your effects will look like on other people and different mobile devices.

You can also preview your effect on different sample videos with a range of skin tones, facial hair, glasses and hair styles, so you can be confident your effect works well for everybody. Click Video in the Toolbar, and select the one you want to use from the menu.

You can also add your own video. To do this:

  1. Click Video.
  2. Click +.
  3. Choose your video from your computer.

The Aspect Ratio menu in the Toolbar lets you resize both the Viewport outline and the Simulator to match the screen dimensions of common mobile devices. To resize the outline click Aspect Ratio then select the name of the mobile device you want to use.

If you want to preview your effect on an actual mobile device, download and install the AR Studio Player app for iOS or Android. Find out how to use it in the Spark AR Player tutorial.

Using Keyboard Shortcuts

Click AR Studio in the menu bar. Select Preferences, then Key Binding to view the list of keyboard shortcuts within AR studio or to create your own.