Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Sample Effect: Bunny Mask

Learn to create the Bunny 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:

  1. Using a texture to create a make up effect, and adding retouching.
  2. Using distortion to change the shape of the face.
  3. Adding 3D objects - the ears and whiskers in this effect.
  4. Using the Patch Editor to accurately position objects on someone's face.
  5. Using an animation playback controller to animate the whiskers, and the Patch Editor to animate the ears.
  6. Adding interactivity to change the color of the ears.
  7. Using exponential smoothing - to adjust the movement of the ears.
  8. Adding custom instructions.

You can also find out more about what's in the finished effect.

Getting Started

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:

  1. Imported external textures and objects.
  2. Inserted a face tracker.
  3. Inserted and named 4 null objects, as children of the face tracker. You'll use these to manipulate the 3D objects.

The Make Up Effect

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 panel, 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 panel:

  1. Change the Shader Type to Face Paint.
  2. Next to Texture, click the arrow and select bunnyMakeup_tex.

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:

  1. Change Opacity - we chose 80%.
  2. Change BG Influence - we chose 50%.
  3. Change Brightness - we chose 40%.

Your project should look like this:

Retouching

Create a second face mesh and rename it faceMeshRetouch.

In the Inspector panel, create a new material for faceMeshRetouch. Change the Shader Type to Retouching.

You can adjust the sliders to make skin look smoother and eyes and teeth look whiter. For this effect we chose 100% for each.

Distortion

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. In the Inspector panel:

  1. Click + next to Deformation.
  2. Select bunnyFaceMorph.
  3. Under Blend Shapes, adjust the slider to make the deformation more dramatic. We set it to 100%.
  4. Uncheck the boxes next to Eyes and Mouth, so the face mesh doesn't cover them.

The shape of the face should look different now:



Adding the 3D Objects

The whiskers and ears are 3D objects. You'll add these objects to the scene as children of the null objects. This is because they have animations included in the file, which already control their position, scale and rotation. To change these properties in the 3D objects, we can adjust the null objects instead.

To add the objects to scene, drag them from the Assets panel into the Scene tab. We added each object to the scene twice:

  1. Drag bunnyEar_animated onto bunnyEarRotator_left, and again onto bunnyEarRotator_right.
  2. Drag bunnyWhisker_animated onto bunnyWhiskerRotator_left and again onto bunnyWhisterRotator_right.

Positioning the Ears

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 panel. For:

  1. bunnyEarRotator_left, set X to 2.5, Y to 10 and Z to -5.
  2. bunnyEarRotator_right, set X to -2.5, Y to 10 and Z to -5.

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 panel.



Positioning the Whiskers

We used 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. So:

  1. Select bunnyWhiskerRotator_right.
  2. In the Inspector panel, change X to -1 next to Scale.

Again, make sure the material, whisker_mat is set to Double Sided - by checking the box under Render Options in the Inspector panel.

Creating the patches

In the finished effect, we've manipulated the properties of the null objects to position the whiskers.

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.

Then:

  1. In the Inspector, click the circle next to Position. A patch will be made for both null objects.
  2. Drag the face tracker from the Scene tab into the Patch Editor.
  3. Right-click anywhere in the Patch Editor to open the menu. Select a Nose patch, and 2 Add patches.

For both Add patches, change the Type to Point 3D, because we're positioning the whiskers on a 3D object in 3D space.

Connect Nose to the Face port in facetracker0, to capture data on the position of the nose in the scene.



Connecting the patches

Connect: 1. The Left Nostril Position port in the Nose patch to the input port at the top of an Add patch. 2. The Right Nostril Position port in the Nose patch to the input port at the top of the other Add patch. 3. The output port of each Add patch to the patches representing the 3D position of each object.

Your graph should look like this:



We tweaked 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:

  • For the Add patch connected to to whiskerRotator_left, set X to 1.5, Y to -0.8 and Z to -0.1.
  • For the second Add patch, set X to -1.5, Y to -0.8 and Z to -0.1.

The whiskers should now be placed directly under the nose.

Animating the Whiskers

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:

  1. Click + in the Assets panel.
  2. Select New Animation Playback Controller.

To connect the playback controller to the objects in the scene:

  1. Select bunny_whisker_animated.
  2. In the Inspector panel, select Animation Playback Controller from the dropdown next to Animation.
  3. Repeat this step for the other set of whiskers.

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 panel.

Animating the Ears

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.

Creating the patches

To create patches representing the Animation property of the objects:

  1. Select bunnyEar_animated_left in the Scene tab - you'll need to expand the null object first.
  2. Click the circle next to Animation in the Inspector panel.
  3. Repeat these steps for bunnyEar_animated_right.

Next, create the animation patches. Right-click in the Patch Editor and select:

  1. A Loop Animation patch - this patch will tell the animations to loop continuously.
  2. 2 Animation Player patches - to drive the animations for each ear.
  3. A Delay patch.

Under BunnyEar_animated in the Assets panel, select Swing and drag it into the Patch Editor.



Connecting the patches

First connect the Animation Player patches:

  1. Connect the Animation port in the first Animation Player patch to the Animation port in bunnyEar_animated_left.
  2. Connect the Animation port in the other Animation Player patch to the Animationport in bunnyEar_animated_right.


Next, connect:

  1. The Swing patch to the Animation Asset input port of each Animation Player.
  2. The Progress port in Loop Animation to the Progress port in one of the Animation Player patches.

To add the Delay patch:

  1. Connect the Progress port in Loop Animation to the input in then Delay patch.
  2. Connect the output of the Delay patch to the Progress port in the other Animation Player 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.

Changing Color Options

We've used a Screen Tap, Counter and Option Picker to count through different color options when the screen is tapped.

Creating the patches

From the menu in the Patch Editor, select a:

  1. Screen Tap patch - to detect when someone taps the device screen.
  2. Counter - to count through color options the option picker.
  3. Option Picker - this is where we'll set the color options. You'll need to set the Type to Color.
  4. Mix patch - to combine the logic with the texture and material.

Next, create patches to represent the texture and material:

  1. Select bunny_tex in the Assets panel, and drag it into the Patch Editor to create a patch.
  2. Select bunnyEar_color_mat in the Assets panel. This is the material applied to the bunny ears.
  3. In the Inspector panel, click the circle next to Diffuse Texture to create a patch representing this property.

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.

Connecting the patches

Connect the patches, so your graph looks like this:



Adding the color options

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:



Using Exponential Smoothing

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.

Creating the patches

  1. Create patches for the 3D Rotation property of the null objects bunnyEarRotator_left and bunnyEarRotator_right.
  2. Drag the Exponential Smooth Vec3 patch group into the Patch Editor.

The Patch Group

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.

Connecting the patches

  1. Connect the Input port in Exponential Smooth Vec3 to the 3D Rotation port in facetracker0.
  2. Connect the Output port in Exponential Smooth Vec3 to the 3D Rotation ports in bunnyEarRotator_left and bunnyEarRotator_right.

Your graph should look like this:



Adding Custom Instructions

We've added an instruction token to this effect. We've used:

  1. A Runtime patch to detect how long the effect has been running.
  2. A Less Than patch. We adjusted the value in this patch to 3 seconds. This will display instructions while the effect has been running for less than 3 seconds.


Congratulations! You've now completed the effect.

In the Finished Effect

Find out what's happening in the finished effect.

Objects



bunnyEar_animated is a 3D object. We've instantiated this object twice in the scene, to create the ears. It includes an animation, swing, a material and a texture.



bunnyFaceMorph is a morph object. We've applied it to a face mesh, to distort the shape of the face.



bunnyWhisker_animated is another 3D object. Again, we've instantiated this object twice in the scene to create the whiskers. It includes an animation, wiggle, and a material.

Materials



faceWarpMaterial0, combined with the bunnyFaceMorph, creates the face distortion effect.

BunnyMakeup_mat has the texture bunnyMakeup_tex applied to it, to create the make up effect.

faceRetouch_mat is where we've used Spark AR Studio to create the retouching effect.

Textures



We've applied bunnyMakeup_tex to a material to create the makeup effect.

bunny_tex is applied to the ears. We've used the Patch Editor to define its color.

The patch group and playback controller



Exponential Smooth Vec3 is a patch group that we've used to apply a smoothing effect to the animation of the ears.

Whiskers Animation Playback Controller controls the animation of the whiskers in the scene.

In the Scene tab

All objects are children of a face tracker - so they respond to the movement of the user's face.

The 3D objects that create the ears and whiskers have been grouped under 4 null objects. In the image below, bunnyEarRotator_left is the null object. We made patches to represent some of the properties of these null objects, and manipulated them using the Patch Editor. Underneath each container, you can see the skeletons, joints and mesh that make up the object:



There are 3 face mesh in the scene - this is where we've applied the make up texture, retouching material and deformation effect.



Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs