Skip to main content
Version: 4.3.0

3D Face Mask

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.

Get Started

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

↓ 3DFace.zip

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

assets panel

Add a 3D Face Shape

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

add 3d face

The mesh of the 3D face is generated automatically. You can find it in the Meshes folder in the 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

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 face paint

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 the Add button [+] > Material > Standard PBR to create a new PBR material.

note

Learn more about Standard PBR material.

add a standard pbr material in the assets panel

Then rename the material to 3DFace_mat.

rename a standard pbr material in the assets panel

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 the Material parameter, and select the new material 3DFace_mata from the pop-up window.

assign the pbr material to the 3d face object

Assign Texture to the Face Mask

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

3d face properties in the inspector panel

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

albedo property in the inspector panel

Select the Texture On checkboxes 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 Blend Mode is set to Normal by default.

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

change 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 the Add button [+] > Scene > Directional Light to add one more light. Rename one light to Face Lighting 1 and the other to Face Lighting 2.

add a directional light in the hierarchy panel  light objects in the hierarchy panel

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.

face lighting1 properties in inspector panel  face lighting2 properties in inspector panel

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

3d face mask example with lighting resources

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.

click the graph button to open visual scripting  visual scripting panel

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 the Add button [+] to select Set Rotation. You can see the node was created in the Visual Scripting panel. Repeat the same step with Face Lighting 2.

add rotation nodes in 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.

add get time node in 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.

add sin and multiply nodes in 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.

add combine node and set the data type to vec3 in the visual scripting panel

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 to value A of Multiply, Multiply to value X of Combine, Combine to Rotation of Face Lighting 1. Then change value B of Multiply to 50, so that the X angle will change between -50 and 50.

link nodes together in the visual scripting panel

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_in_visual_scripting

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 3DFace_mat.

  • Metallic: 0.7
  • Roughness: 0.6
3dface_mat object in the inspector panel with mrao highlighted

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