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 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:
You can also find out more about what's in the finished effect.
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 CameraTexture 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.
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:
You'll need to make a couple of changes to the material's property in the Inspector panel:
We'll use the Patch Editor to apply the camera texture to the material.
Your project should look like this:
To to apply the camera texture to the material:
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.
Building this logic starts with a face tracker, to detect the someone's facial movements:
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.
The texture is rescaling now, but it doesn't look quite right. We need to adjust some values in the patches:
Your graph should look like this:
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. In the Patch Editor, select:
Change the Type of the Option Picker to Point 2D - again because we're rescaling 2D objects.
When the face tracker detects eyebrows are raised, the Pulse 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:
Your graph should look like this:
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:
Find out what's happening in the finished effect.
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.
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community