Face Tracking

Learn how to create a face tracking experience using Blippbuilder

Introduction

This article is a quick start guide providing instructions and guidelines to create a face tracking experience.

Procedure

Follow the steps below to create a WebAR experience on a face using Blippbuilder:

• Login to HUB

• You will be re-directed to the Blippbuilder page.

Blippbuilder Page

• Click on 'Create A New Project', provide a name for your project and click 'Continue.'

Create a Project

• A pop-up will appear on the screening providing you with options to select the type of AR project you wish to create.

Type of experience- Face

Select the option 'Select Face' face based tracking.

• You will be re-directed to the Blippbuilder design canvas.

The Design Canvas functionalities are the same for any kind of project. Refer below section for information on utilising various design canvas elements to create face tracking experience.

Process

The following section provides information on how to utilize various design canvas elements to create, preview and publish a project:

Design Canvas

A model 3D face will appear on the screen upon which various basic elements, layout and models can be embedded to create a face tracking experience as shown below:

3D Face Model

The following are the basic features and design elements that can be utilized for face tracking:

Face Settings

Enable the following face settings based on the type of experience you want to create:

• Face Mesh A default face mask is created and the mask will be applied on the user's face. You can also choose to 'Fill eyes', 'Fill mouth' or 'Flip Texture Vertically' if required.

Face Mesh

• Face Texture (Custom) Blippbuilder offers a variety of in-built face textures which can be applied. You can alternatively choose to apply your own texture by clicking 'Add Texture' as shown below:

Custom Face Texture

You can 'Download Sample Texture' file or apply and check preview as shown below:

Stripe Face Texture

The face texture files, in case has an animation with a .gif file, the animation will not appear on the face.

• Enable Head Hider Use this setting to hide the head in case the object is placed behind the head of the user

• Enable Neck and Shoulder Hider Use this setting to hide the neck and shoulder of the user in case the object is placed in these areas

• Enable Ear Hider Use this setting to hide the ear of the user in case the object is placed in these areas

• Enable Screen Colour Overlay Use this setting to modify the background screen colour.

Screen Colour Overlay

Object Settings

Add any 3D Object on the the Design Canvas and choose object anchor settings from the options below:

Anchoring Object

• Anchor object to 'Face Position and Rotation': This will ensure the 3D object is anchored to the the face position and rotation which means the object will also move as the face moves or rotates in line with the face.

• Anchor object to 'Face Position' : This will ensure the 3D object is anchored ONLY to the face position which means the object will remain stagnant with the rotation of the face.

Preview and Publish

Preview

• To test the Blipp created click on the 'Preview' icon from the top right of the screen.

• A test Blipp is created which can be accessed by scanning the QR code displayed on the screen

• The test code expires in 20minutes

• Refer below image for more information:

Preview Project

• Close the screen to navigate back to the project.

Publish

• After reviewing the preview, the project can be published.

• Click the 'Publish' icon from the top right of the screen.

• The Status of the project will appear as 'Live' if published. Refer image below:m

• Scan the QR code on the to test the published project.

• Apply this QR code on all surfaces from which you desire the AR Experience to be triggered.

• For more information refer image below

Published Project