Everything you need to know to create an interactive augmented reality experience.
In this guide, we'll show you how to create the Face Zoom effect!
This effect is one of our featured samples. 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:
In this guide, we'll cover:
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:
It'll be listed as cameraTexture0 in the Assets Panel.
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.
To add a rectangle:
It'll automatically be added as a child of a canvas, so it scales with the screen of the device.
Change the size of the rectangle, so it fills the screen of the device. You can do this in the Inspector:
To create a material for the rectangle, click + next to Materials in the Inspector:
The material will be listed in the Assets Panel as defaultMaterial0.
You'll need to make a couple of changes to the material's properties in the Inspector:
We'll use the Patch Editor to apply the camera texture to the material.
Your project should look like this:
Start by creating a patch to represent the camera texture. Click on cameraTexture0 in the Assets Panel, and drag it into the Patch Editor - you'll see an orange patch.
Next, right-click in the Patch Editor, and select a Texture Transform patch from the menu.
The Texture Transform patch is a visual shader. It can be used to apply lots of different transformations to textures in your scene.
To connect these patches:
In the finished effect, the rectangle gets bigger in response to an open mouth, creating a zoom effect.
Building this logic starts with a face tracker, to detect the someone's facial movements:
A series of patches will be created. We're going to use the final one in this effect, faceTracker0.
Next create a patch that will allow us to detect how open someone's mouth is - the Mouth Open patch. To do this:
The Mouth Open patch has two output ports:
For this effect, you'll use the Mouth Openness port. This outputs a signal that indicates how open the mouth is.
To increase the size of texture in response how open the mouth is, you can use the Add patch. Select this patch from the menu in the Patch Editor.
The data type of the Add patch is set to Number by default - you can check this by selecting the patch. You'll see Number written in the blue box underneath the patch.
Click this blue box to change the data type. Select Vector 2 from the dropdown menu, because we're changing the scale of a 2D object, as opposed to a 3D object:
Finally, select a 2D Transform Pack from the menu. This patch can be used to transform 2D objects.
We'll use the Scale input in this patch to tell the texture to scale up or down.
Start by connecting the Face port in the face tracker to the Face port in the Mouth Open patch.
To apply the transformation to the texture, connect the 2D Transform output in the 2D Transform Pack to the Transform input in the Texture Transform patch we made earlier.
The texture is rescaling now, but it doesn't look quite right.
To fix this, we need to adjust some values in the patches.
Start with the Add patch. 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.
Next 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.
Here's how your effect should look now:
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.
Start by creating the patches that'll do this. In the Patch Editor, select:
Change the Type of the Option Picker to Vector 2 - again because we're rescaling 2D objects. Then, connect:
As a result of connecting these patches, when the face tracker detects eyebrows are raised the Pulse patch will pass this message to the Counter patch.
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:
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:
To finish the effect:
This section of the graph should look like this:
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community