Skip to main content
TikTok Effect House Platform Logo
Latest
Download
Log in
Template Tutorials

Head Tracking

This tutorial will show you how to attach 3D objects to a person’s head so that it follows their movement, as well as how to setup the PBR material for the 3D object.

This tutorial covers the following:

  • Adding a head tracker
  • Tracking the 3D model
  • Adding a PBR material
  • Assigning textures

Prepare

Before we get started, download the package and open the Unfinished_HeadTracker project in Effect House.

↓ HeadTracker.zip

You will see that all the needed assets have already been imported in the Assets panel, including the alienHat 3D object and all of the texture images.

Add a Head Tracker

First, we have to add a Head Tracker entity. We can do this by clicking + Add Object > AR Tracking > Head Tracker. A Head Tracker will then be added to the Hierarchy.

If you go to the Inspector, you will find Face Binding assigned to Head Tracker. This is the key component that drives the head tracking functionality.

unaligned-image-0

When we add the Head Tracker, a Head object is also created under the tracker object so that it follows the tracker’s movement. The head object is a head-shaped mesh with an Occluder material that will allow us to mask out the user’s head.

Tip
Tip

With the occluder material, the head model can be used to occlude other 3D objects in the scene. For example, if a hat model wraps around the head, we can occlude the back of the hat so it appears to be sharing the same 3D space as the user’s head.

Track the 3D model

Let’s add our alien hat model now! Find alienHat in the Assets panel. Then, click and drag the model to the Head Tracker in the Hierarchy panel. In the Preview window, you’ll now see that the hat is following the head movement.

unaligned-image-0

After dragging alienHat into the scene, which adds joints and built-in animations, the model will begin to move. If you expand alienHat in the Hierarchy tab, and select the SkeletonAndRenderRoot object, the Animation component will appear in the Inspector panel.

You can choose which animation clip you want to play by selecting from the Playback drop-down menu in the Animation component.

Note
Note

The Animator component will be assigned automatically upon import for models that have built-in animations. Refer to Animation controller or Animation Sequence Controller for more details on Animation control.

Set PBR material

Now we can see that our model is placed correctly, but it has no material! Let’s play with the material to give our hat some color.

There is already a material called alienHat_mat in the Assets. If not, try to create a PBR material by clicking + Add Asset > Material > Standard PBR. This will create a default material that will respond to environmental lighting from the scene and to which we can assign custom textures.

Note
Note

Refer to our Standard PBR material guide for more details on material settings.

You can rename the material by right-clicking the Standard PBR material, choosing Rename and typing alienHat_mat. Clear naming conventions will help keep your assets and structures organized when you build large scale projects.

Now we’re ready to put the material on our model! Take a look at the different parts of our alienHat model in the Hierarchy.

We need to apply our material to each of these pieces. Start by selecting the hatBase entity from the Hierarchy panel. We can see the Skin Mesh Renderer component in the Inspector panel.

If the material parameter is empty, click it and select the material alienHat_mat.

unaligned-image-0

Repeat this step for every piece of the alien hat to make sure every mesh has been assigned the material.

Assign textures

Next, we’ll apply textures to the material. Click on the material in the Assets tab to bring up its properties in the Inspector panel.

For our material, we will be applying the base color to the Albedo, the normal texture to the Normal section, and the MRAO texture to the MRAO section. In the Albedo section, click the checkbox next to Texture On. This will bring up an option to add a texture file. Select the alienHat_baseColor texture from the pop-up window.

Repeat this for the Normal section and the MRAO section with their respective textures. Your material properties should end up like this:

We can now see that the base hat has the correct material in the Scene and Preview!