Learn Spark AR Studio

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

Clear
Back

Sample Effect: Face Zoom

In this guide, we'll show you how to create the Face Zoom 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.



The effect uses the Patch Editor to make a rectangle bigger based on different interactions. We've applied the camera texture to this rectangle to create the zoom effect. The camera texture is the video captured when the effect is being used.

In this guide, we'll cover:

  1. Creating the camera texture.
  2. Adding the camera texture to a rectangle in the scene.
  3. Using the Patch editor to make the rectangle bigger, when someone opens their mouth or raises their eyebrows.
  4. Using the Screen Tap patch to switch between the two effects.

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

Creating the Camera Texture

We've used the video taken by the camera, and played it as a texture in the scene. We'll use the Patch Editor to make it bigger, creating a zoom effect.

To create a texture from the camera video:

  1. Select the Camera in the Scene tab.
  2. In the Inspector panel, click + next to Texture.

It'll be listed as CameraTexture in the Assets panel.



Adding the Camera Texture to the Scene

To add the texture to the scene, you'll need to apply it to a material and apply the material to an object. In this effect, the object is a rectangle.

Creating a rectangle and material

Insert a rectangle. It'll automatically be added as a child of a canvas, so it scales with the screen of the device.

In the Inspector panel:

  1. Select Fill Parent, so the rectangle fills the canvas.
  2. Create click + next to Material to create a material for the rectangle. It'll be listed in the Assets panel as defaultMaterial0.

You'll need to make a couple of changes to the material's property in the Inspector panel:

  1. Change the Shader Type to Flat. This is a performant shader that can be used for materials that don't need to reflect or omit light - like 2D surfaces.
  2. Instead of applying a texture under Diffuse, click the circle next to Texture to create a patch and open the Patch Editor.

We'll use the Patch Editor to apply the camera texture to the material.

Your project should look like this:

Applying the camera texture

To to apply the camera texture to the material:

  1. Click on the CameraTexture in the Assets panel, and drag it into the Patch Editor - you'll see an orange patch.
  2. Right-click in the Patch Editor, and select the Texture Transform patch from the menu.
  3. Connect the RGBA output in CameraTexture to the Texture input in Texture Transform.
  4. Connect the Texture output in Texture Transform to the Diffuse Texture port in defaultMaterial.


The Texture Transform patch is a visual shader. It can be used to apply lots of different transformations to textures in your scene. Find out more.



Using the Patch Editor - Mouth Open

Building this logic starts with a face tracker, to detect the someone's facial movements:

  1. Click Insert and add a face tracker to the scene - it'll be listed as facetracker0 in the scene tab.
  2. Drag the face tracker into the Patch Editor.

We want to detect how open someone's mouth is. Use the Mouth Open patch to do this - you can create this patch by right-clicking in the Patch Editor and selecting it from the menu.

Select an Add patch from the menu. We'll use this to increase the size of texture. Right-click on the patch and change the Type to Point 2D, because we're rescaling a 2D object.



Finally, select a 2D Transform Pack from the menu. We'll use the Scale input in this patch to tell the texture to scale up or down.

Connect:

  1. The Face port in the face tracker to the Face port in Mouth Open.
  2. The Mouth Openness port to the X input in the Add patch.
  3. The Add patch to the Scale port in the 2D Transform Pack.
  4. The 2D Transform output in the 2D Transform Pack to the Transform input in the Texture Transform patch - to apply the transformation to the texture.


The texture is rescaling now, but it doesn't look quite right. We need to adjust some values in the patches:

  1. Change the X and Y values in the Add patch to 1. The scale is set to 0 by default, so this will tell the texture to double in size depending on how open the mouth is.
  2. Adjust the Pivot values in the 2D Transform Pack to 0.5. 0.5 is the center of the frame, so this sets the texture to scale from the center.

Your graph should look like this:



Using the Patch Editor - Eyebrows Raised

The logic in this part of the effect is slightly different from the logic we used with the Mouth Open patch. That's because the texture rescales each time the eyebrows are raised, rather than in response to how much they're raised.

Counting how many times the eyebrows are raised

Start by creating the patches. In the Patch Editor, select:

  1. An Eyebrows Raised patch.
  2. A Pulse, Counter and Option Picker patch.

Change the Type of the Option Picker to Point 2D - again because we're rescaling 2D objects.

Connect:

  1. The Face port in the face tracker patch to the Face port in Eyebrows Raised.
  2. The Eyebrows Raised output to the Pulse patch.
  3. The Turned On port in the Pulse patch to the Increase port in the Counter patch.

When the face tracker detects eyebrows are raised, the Pulse will pass this message to the Counter patch.

Next:

  1. Set the Maximum Count to 3, to detect 3 raised eyebrows and then start counting again.
  2. Connect Counter to Option Picker.

Rescaling the Texture

The Option Picker is where we'll add information to set how much the texture should be rescaled.

Because we've used the Increase port in the Counter, each option will be triggered in ascending order each time the eyebrows are raised:

  1. For the first option, set X to 1 and Y to 1 - to double the texture.
  2. For the second option, set X to 1.5 and Y to 1.5.
  3. For the third option, set X to 2 and Y to 2.

Your graph should look like this:



Switching Between Effects

To set up the logic to switch between effects, select the Screen Tap, Switch and If Then Else patches from the menu in the Patch Editor.

Screen Tap will detect when someone has tapped the screen of their device. Connect:

  1. Screen Tap to the Flip port of the Switch patch - to create the trigger to switch between effects.
  2. Switch to If Then Else:


To finish the effect:

  1. Disconnect the Add patch from the 2D Transform patch.
  2. Connect the output of the Option Picker to the Then input of the If Then Else patch.
  3. Connect Add to the Else port of the If Then Else patch.
  4. Connect the If Then Else port to the Scale input of the 2D Transform patch:


In the Finished Effect

Find out what's happening in the finished effect.

The Scene tab



We added a rectangle, which is a child of a canvas, and a face tracker. We used the Patch Editor to change the size of this rectangle in response to facial movements.



CameraTexture is the video captured when an effect is being used. We used the Patch Editor to apply this texture to a material. The material has been applied to the rectangle to render it in the scene.

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