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

3D Face Mask Effect

In this tutorial, you’ll learn how to construct a 3D Face mask to create customized face mask effects. You’ll also learn how to control lighting resources with Visual Scripting to apply animated reflection and refraction effects on the 3D face.

This tutorial covers the following:

  • Adding 3D Face
  • Applying PBR (Physical Based Rendering) material
  • Assigning textures
  • Editing lighting resources
  • Controlling lights with Visual Scripting

Get Started

Start by downloading the 3DFace package and locating the Unifinished_3DFace project.

↓ 3DFace.zip

You will see all the required assets imported in the Assets panel.

Asset library with 3DFace assets imported

Add a 3D Face Shape

Start by adding a 3D Face entity, the foundation of your effect. You can do this by clicking + Add Object > Face Effects > 3D Face. You will see a default 3D Face scene object generated on the face in the Preview panel.

Adding a 3D Face scene object to your project

The mesh of the 3D face is generated automatically. You can find it in the Meshes folder of Assets panel.

Assets panel with the Meshes folder open

You will also notice that a Face Paint scene object is generated in the Material folder and automatically assigned to the 3D Face.

Tip
Tip

Face Paint is a built-in material that comes with 3D Face mesh. It is an unlit material (meaning it doesn’t respond to lighting) with UV control that allows you to quickly swap patterns that appear on the face. Learn more about Unlit materials.

Assets panel with the Materials folder open

Apply PBR Material

In this step, you will make the effect respond to different lighting environments. This is done by using PBR material instead of Face Paint material for the 3D Face. Go to the Assets panel and click + Add Asset > Material > Standard PBR to create a new PBR material.

Note
Note

For a more detailed guide of PBR material, refer to the Standard PBR material guide.

Adding Standard PBR material to your project

Then rename the material to 3DFace_mat.

Renaming PBR material by clicking on the material's name

Now you’re ready to put the material on the 3D Face.

Go to the Hierarchy panel and select the 3D Face entity. Find the Mesh Renderer component in the Inspector panel.

Click on the Material parameter, and select the new material 3DFace_mat from the pop-up window.

Assigning the PBR material to the 3D Face scene object

Assign Texture to the Face Mask

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

Inspector panel open and showing 3D Face properties

In the Albedo section, click the checkbox next to Texture On. This will allow you to add a texture file under Texture. Select the 3DFaceMask_baseColor texture from the pop-up window.

Inspector panel open with Albedo section highlighted

Click the checkbox next to Texture On for both Normal and MRAO (Metalness, Roughness, Ambient Occlusion) sections and add their respective texture files. Your material properties should look like this:

Inspector panel for 3DFace_mat open with texture set to on for Normal and MRAO

Notice that the 3D Face has the material in the Scene and Preview, but it is not transparent. This is because the default Blend Mode is normal.

Scroll down in the Inspector Panel to Render State 0. Click on the arrow to display all properties. You can change Blend Mode to Multiply. After doing so, the 3D Face will have the correct effect.

Changing Blend Mode to Multiply in the Inspector Panel

Edit Face Lighting Resources

Next, create the lighting setup in the scene to properly light your PBR materials.

There is one lighting resource in the scene by default, but you want to have two lights to create the color changing effect. Click + Add object > Scene > Directional Light to add one more. Rename one lighting to Face Lighting 1 and the other to Face Lighting 2.

unaligned-image-0
unaligned-image-1

For Face Lighting 1, go to the Inspector panel and find the Directional Light component.

Set the Intensity to 1.2 and Color to #4bfbf8.For Face Lighting 2, set the Intensity to 2.9 and Color to #f568e3.

unaligned-image-0
unaligned-image-1

Feel free to play with the color and intensity parameters of the lighting resources.

3D Face mask example

Now, these two lights are merged together. Animate the rotations of the lighting resources to take things to the next level!

Control Lights With Visual Scripting

In order to control the rotation of the lighting you just added, first click the Graph button in the top left corner to bring up the Visual Scripting panel.

unaligned-image-0
unaligned-image-1

Now it’s time to add Visual Scripting Nodes.

Select Face Lighting 1 to open the Inspector panel. Find the Rotation parameter under Transform and click + to select Set Rotation. You can see the node was created in the Visual Scripting panel. Repeat the same step with Face Lighting 2.

Adding Rotation Nodes to the Visual Scripting panel

Next, use Get Time to control the rotation by clicking + Add node (or right click the panel), then type “Get Time” in the search bar to find the node.

Adding Get Time Nodes to the Visual Scripting panel

Use the same way to add Sin and Multiply nodes. Use these two nodes to limit the rotation values between a certain range.

Adding Sin and Multiply Nodes to the Visual Scripting panel

You also need a Combine node to convert these variables to Vector 3f. Right click on the Visual Scripting panel and find Combine to add. Click the data type on the Combine node and choose Vector3f.

Adding Combine Nodes to the Visual Scripting panel and setting the data type to Vec3

Now link the nodes together. Link trigger from the Update node to Set of Face Lighting 1 so it will be updated every frame. Link the following together: Get time to Sin, Sin tovalue A of Multiply, Multiply to value X of Combine, Combine to Rotation of Face Lighting 1. Thenchange value B of Multiply to 50, so that the X angle will change between -50 and 50.

Linking the Visual Scripting Nodes together

Duplicate the Multiply node to create a second one. Link the Sin output to value A of the second Multiply. Change value B of the second Multiply to 60. Then link the output to the second value of Combine to control the Y-axis in Rotation. This will allow the Y angle to change between -60 and 60.

Duplicate the Multiply Node and add it to the original chain

Next, implement the similar interaction to control the rotation of Face Lighting 2. This time you will use Cos math instead of Sin to map the time variables to control the rotation variables.

Once all the nodes are linked to Face Lighting 2, link Set from Face Lighting 2 to the trigger of Face Lighting 1.

The final graph looks like the image below after you finish. Feel free to tweak value B of Multiply, which will change the rotation changing range.

Both Node chains

Adjust the MRAO Value

Finally, to add the shiny metal effect and reflect the color of the Face Lighting resources, go to the Inspector panel to tweak the Metallic and Roughness in MRAO (Metalness, Roughness, Ambient Occlusion) setting of the 3DFace_mat.

  • Metallic: 0.7
  • Roughness: 0.6
The 3DFace_mat object's Inspector Panel with the MRAO section highlighted

Refresh the preview and view your very own effect in the Scene and Preview!