Learn to create an animated face mask effect!
This effect is one of our featured templates. You can find it by opening Spark AR Studio and selecting Samples, or by downloading the sample content. You can adapt any of the assets in this effect to create your own projects.
In this guide, you'll learn about:
If you want to build this effect yourself, open the unfinished effect in the sample content folder. So you can get started quickly, we've already:
Create the make up effect by applying a custom texture to a face mesh.
Start by creating a face mesh as a child of the face tracker that's already in the scene. To help you keep track, rename it. We chose faceMeshMakeup. In the Inspector, create a new material for faceMeshMakeup. Rename the material bunnyMakeup_mat.
You'll need to make a few changes to bunnyMakeup_mat in the Inspector:
The make up looks quite bright at the moment. Under Render Options there are a few changes you can make, so it looks more natural:
Your project should look like this:
Create a second face mesh and rename it faceMeshRetouch.
In the Inspector, create a new material for faceMeshRetouch. Change the Shader Type to Retouching.
You can now adjust the slider to add a smoothing effect to the scene. We set the slider to 100%.
To distort the shape of the face, you'll apply a 3D object called a blend shape. It's listed in the Assets Panel as bunnyFaceMorph. This blend shape makes the eyes and cheeks a bit rounder, and the mouth a bit smaller.
Create a face mesh and rename it faceMeshDistortion. Scroll down to Deformation in the Inspector. Then:
The shape of the face should look different now:
The whiskers and ears are 3D objects.
We'll manipulate the position, scale and rotation of the 3D objects by making changes to the null objects. Otherwise, these properties would be controlled by the animations that are baked into the 3D object.
To add the objects to scene, drag them from the Assets Panel into the Scene Panel. We added each object to the scene twice:
Adjust the null objects to set the position of the ears. We used the manipulators to work out the best position, but you could also set the position in the Inspector. For:
For bunnyEarRotator_right, next to Scale change X to -1. This will flip the ear over to the other side.
It's worth noting that making this adjustment to the scale changes the material's normals - they'll be inside out. Make sure the material, bunnyEar_color_Mat is set to Double Sided - by checking the box under Render Options in the Inspector.
You'll use the Patch Editor to position the whiskers, so they're placed precisely below the nose.
First we need to flip one of the whiskers over to the other side of the face, like we did with the ears. To do this:
Again, make sure the material, whisker_mat is set to Double Sided - by checking the box under Render Options in the Inspector.
You'll position the whiskers by manipulating the position of the null objects.
To create patches to represent the position of the null objects, select bunnyWhiskerRotator_left and bunnyWhisterRotator_right. You can hold down command on your keyboard to select them both at the same time.
In the Inspector, click the arrow next to Position. A patch will be made for both null objects.
For both Add patches, change the Type to Point 3D, because we're positioning the whiskers on a 3D object in 3D space.
The Nose patch is a face landmark patch. It will capture precise data on the position of the nose in the scene, so we can position the objects in relation to it.
Connect the Nose patch to the Face port in facetracker0, to capture data on the position of the nose in the scene.
Your graph should look like this:
Tweak the Add patches, so the whiskers are in exactly the right place. Adjust the X, Y and Z values along the bottom of the add patches:
The whiskers should now be directly under the nose.
The 3D object we've used to create the whiskers has an animation included in the file. The animation is listed as wiggle in the Assets panel. To make the animation play in the effect, we'll use an animation playback controller:
To connect the playback controller to the objects in the scene:
The animation playback controller is set to play the animation at the start of the effect by default, and loop continually while the effect plays. You could change these properties, and the speed of the animation, in the Inspector.
The ears also have animations included in the object files. We could use an animation playback controller to animate the ears too, but in the finished effect we've used the Patch Editor instead.
This is so we can add a Delay patch, making the animation for each ear start at a slightly different time so the movement looks more natural.
To create patches representing the Animation property of the objects:
Next, create the animation patches. Right-click in the Patch Editor and select:
Under BunnyEar_animated in the Assets panel, select Swing and drag it into the Patch Editor:
First connect the Animation Player patches:
To add the Delay patch:
Set the Duration value in the Delay patch. We went with 0.43 seconds.
Your graph should look like this:
The ears should now be animated.
We've used a Screen Tap, Counter and Option Picker to count through different color options when the screen is tapped.
From the menu in the Patch Editor, select a:
Next, create patches to represent the texture and material:
Like with the whiskers, the materials applied to the ears are set to render on both sides of the mesh. To achieve a more performant effect, you could create a second set of materials, and change the Cull Mode from Back to Front, to reverse the normals.
Connect the patches, so your graph looks like this:
Add color options for the ears in the Option Picker. We picked blue and pink, but you could go with something else.
It's important here to set the Alpha value in the Mix patch to grey. This causes the patches to create a mix of the original texture from the texture patch, and the colors coming from the option picker.
In the Counter patch, make sure the Maximum Count matches the number of options in the Option Picker. We set it to 2.
You can test this part of the effect by clicking the gear in the Simulator, and selecting Simulate Touch.
In real life the ears would move in response to the movement of the head, instead of in a uniform way like they are at the moment. For example if the head moved quickly, so would the ears.
To achieve this effect we're going to use exponential smoothing. We've added a Patch Group to the project that you can use to do this. It's listed in the Assets panel as Exponential Smooth Vec3.
We'll use the rotation of the user's head to trigger the exponential smoothing. So when the head rotates, exponential smoothing will cause the ears to move in response.
If you click the right corner of the patch group, the group will expand. You'll see it's made of several patches:
The input is driven by the 3D Rotation of the face tracker.
Unpack allows us to take each of these coordinates and perform separate operations on them. In this case, we've used Exponential Smoothing patches to return a smoothed signal, based on the Damping factor. In this case, we set the Damping factor to 200 milliseconds.
Click Back to Main to return to the graph.
Your graph should look like this:
We've added an instruction token to this effect. We've used:
Congratulations! You've now completed the effect!