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.
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:
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.
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:
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.
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:
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.
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:
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.
Now your texture is in Spark AR Studio, you'll need to create a material to apply it to.
To create a 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:
You should now see your material tracking your face.
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:
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.
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.