In this article, we explain how you can create a simple mask effect with Facebooks AR Studio. Mask effects are wonderful elements in 3D configurators.

A basic mask consists of a Face Tracker, a Face Mesh, a texture and a material. Anything but the texture can be created in Facebook AR Studio.

Facebook Augmented Reality Studio

You will also learn the following:

  1. The most important parts of the interface.
  2. How to use the simulator to get a preview of what you have just built.
  3. How to display and edit the standard keyboard shortcuts in Facebooks.

When you open the finished effect in the Sample Content folder, you’ll see a mask that makes it look like someone has drawn a marker on your face.

Insert a Face Tracker.

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

The Face Tracker is the basis 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 Facebooks AR Studio. This section is called the Viewer. You can use it to visualize and interact with your scene with the simulator.

You will also see a Face Tracker listed in the tab on the left. This is called the Scene tab. This allows you to manage the hierarchy of objects in your scene.

Insertion of face meshes.

Next, insert a Face Mesh. This is a 3D object.

For the Face Mesh to track your face, you need to insert it as a child of the Face Tracker. To do that:

  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 the mouse over each other on the Scene tab.

Import texture files.

Textures and materials are inserted from the Assets pane. In this area, you can manage the imported files and the materials you created with Facebook AR Studio.

Textures can be either JPG or PNG. You must create textures in advance.

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 Texture folder.

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

  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 Texture folder.

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

Create and edit materials.

Since your texture is now in the AR Studio, you must create a material to which you want to apply it.

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 properties of the material should be displayed in the Inspector window on the right.

The Inspector window lists the properties of the selected object, asset, or layer and provides the tools to edit them.

The shader type for materials is configured to Default in the Settings. Facebooks AR Studio contains several different built-in shaders, but the best type of shader that can be used for simple masks is the material of the face color. To change it, click the drop-down menu next to the shader type and select Face Paint.

The texture is then applied to the material. Click in the gray box next to Texture and select the texture you imported from the menu.

Now that you have 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. In the Inspector window, go to Material.
  4. Click + next to Material and select the material you created from the menu.

You should now see that your material is tracking your face.

Preview the effects.

You can preview how their effects will look on other people and different mobile devices.

You can also preview their effects on various sample videos with a variety of skin tones, facial hair, glasses and hairstyles, so you can be sure that their effects will work well for everyone. Click Video on the toolbar and select the video you want from the menu.

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

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

In the Aspect Ratio menu in the toolbar, you can adjust both the size of the Viewer border and the size of the simulator to fit the screen size of common mobile devices. To resize the outline, click Aspect Ratio, and then select the name of the mobile device you want to use.

To preview your effect on a current mobile device, download and install the AR Studio Player app for iOS and Android.

Use keyboard shortcuts.

Click AR Studio on the menu bar. Select Settings, then select Shortcuts to view the list of keyboard shortcuts in AR Studio or to create your own.

Thank you for visiting.