😎 Face Tracking

Welcome to the Face Tracking module where you can configure your next face paint, avant garde attire, halloween mask, and many more!!

By combining the face mesh (the hat) with the face texture (the face paint), you can create some pretty engaging fan based experiences that run in a mobile browser! Visit the face tracking tuturial video for a walk through.

The Face Tracking module is a fun way to bring one's face into the augmented reality equation. Tapping into the computer vision libraries of our partners, illust gives creators the ability to generate both a face mesh and a face texture, and why not do them at the same time! Let's jump in...

Glossary of Studio Terms

Generate a Face Mesh

Enable Mesh Face Tracking: this toggle creates a mesh tethered to one's face. Essentially you can take any 2D, 3D or even message from the studio and activated it when the camera views your face. See examples:

Anchor Point: this is the location on the face where the origin of the experience will be rendered. This means you can anchor the experience on a specific attribute of the face such as rendering the experience on your chin, your nose, your forehead, etc.

For this hat, we selected forehead for the anchor point. Mesh transforms gave it the perfect placement.

Mesh Face Tracking Transforms: this is where you can fine tune your AR experience. Simply use the transform functions of scale, rotation, and position to properly place your work. (Pro tip: start with the scale to get an accurate assesment of the piece on your face, then work on the position, then work on the rotation as the final step to get it just right!)

Generate Face Texture

A face texture can be seen like Face paint. Essentially, configuring this experience gives creators the ability to take an image and generate a texture that pinpoints a specific area of the face such as the lips, nose, cheek, or wraps the entire face. See examples below:

[Insert 2 examples image of face texture]

Enable Texture Face Tracking: when selected to on (blue button on the right), this gives a creator the opportunity to upload a 2D image or upload an image of a color to be used as what looks like paint on one's face.

Upload File: used for the 2D texture (note: please upload a png or jpg only)

Alpha Map: selecting an alpha map determines the area on the face that you would like to generate a texture. For example, selecting the "Mask Shape" will give the face effect a "Zoro" like appearance. The white area of the alpha map is the part the texture image will be applied to. Try some of them our, there's plenty to play around with!

Select your alpha map style...

Not quite "Zoro" but give it a try!

Alpha Map Upload: want to implement your own design, please use the uploader (png/jpg only)

Opacity: Opacity of the face textured. 0 is fully transparent, 1 is fully opaque. Usually should not be fully opaque, or the alpha map will show through. 0.9 is a good default.

How to Configure a Face Target in the Studio

Pro Tip: when configuring a Face Effect in the studio, we recommend having the effects AR preview window open as a tab on your browser. Each saved change to the studio will result in a change to the open browser window of the effect. You may want to refresh the browser window from time to time if making many changes.