Face Tracking
Learn how to create a face tracking experience using Blippbuilder
Last updated
Learn how to create a face tracking experience using Blippbuilder
Last updated
This article is a quick start guide providing instructions and guidelines to create a face tracking experience.
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.
Click on 'Create A New Project', provide a name for your project and click 'Continue.'
A pop-up will appear on the screening providing you with options to select the type of AR project you wish to create.
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.
The following section provides information on how to utilize various design canvas elements to create, preview and publish a project:
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:
The following are the basic features and design elements that can be utilized for face tracking:
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 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:
You can 'Download Sample Texture' file or apply and check preview as shown below:
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.
Add any 3D Object on the the Design Canvas and choose object anchor settings from the options below:
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.
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:
Close the screen to navigate back to the project.
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
