In this guide, we'll show you how to create the Glasses and Gradient 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 in your own projects.
You'll learn about:
You can also find out more about what's in the finished effect.
If you want to build this effect yourself, open the unfinished effect in the sample content folder. We've already imported the assets and objects you need, to help you get started quickly.
The glasses are a 3D object. To add them so they track the face:
You'll now see the shape of the glasses tracking the face:
To finish the glasses we need to add a material and texture. To create a material:
The 3 textures that make up the different glasses were imported as a sequence. To apply the texture sequence:
You'll now see the texture sequence on the glasses in the scene, moving very quickly. We'll use the Patch Editor to add simple logic and interactivity so the frame only changes when the someone taps the glasses on the screen.
Occluders hide 3D objects when they wouldn't be visible in real life.
In this effect you'll use a face mesh with a material applied to it to hide arms of the glasses, for example when someone turns their head. Below, we've added an occluder to the image on the left, hiding the glasses arm.
To create an occluder:
You'll need to make a few changes to the material. In the Inspector panel:
We'll connect a patch representing the Current Frame property of the animation sequence to a series of other patches, telling the frame to change when the glasses are tapped.
To create the patches:
Next, right-click in the Patch Editor and select:
Object Tap will capture a tap on the glasses in the scene.
The Object port in glasses_25D to the Object port in Object Tap.
The Tap port in Object Tap to the Increase input in the Counter patch, to send a signal telling the counter to increase each time the object is tapped.
Set the Maximum Count to 4. This will show the 3 textures in the sequence, and no texture for the final count - so the user won't seem to be wearing any glasses at all.
The patches should be connected like this:
You can test this out in the Simulator, by clicking the gear icon in the corner of the simulator and selecting Simulate Touch.
The glasses change color when the screen is tapped. We'll use the Diffuse and Emission properties of the glasses' material to do this.
Select glasses_mat. In the Inspector panel:
Emission is a global color override. So in this effect when someone taps the screen, the color set under Emission will override the color set under Diffuse.
The Inspector panel should look like this:
To set up the logic, you'll need to create some more patches using the menu in the Patch Editor. Right-click in the Patch Editor, and select a:
Connect the 4 patches, so your graph looks like this:
Make sure the Maximum Count is set to 2, to reflect the 2 color options we're counting between.
Finally, add the Emission color to the Option Picker by clicking on the small colored circle. We picked white.
You could add more color options to this effect, by increasing the Maximum Count, and adding more colors to the Options Picker.
When someone uses an effect, the camera takes a video of what is being captured. This is called the camera texture, and can be used like any other texture in the scene.
In this effect we've changed the color of the pixels in the camera texture, creating the 2 color gradient effects:
To create the camera texture:
To add the texture to the scene, you'll need an object and material to apply it to:
To apply the texture, select foreground_mat. In the Inspector panel:
At the moment, the glasses are hidden by the rectangle and camera texture. We'll use layers to change this.
At the moment, the glasses are hidden. To change this, we need to use layers so the objects render in the right order.
In the Layers tab, create a new layer. It'll be called Layer1 by default - rename it glasses_layer.
The Render Mode should already be set to Opaque by default and it should be at the top of the list. This is where we'll assign the objects that we want to render first.
In the Scene tab, assign the face tracker, face mesh, the glasses_25D 3D object and its child object to glasses_layer.
Set the Render Mode for Layer0 to Cutout. Everything else in the scene will be assigned to this layer by default, and render last.
Right-click in the Patch Editor. Select a Gradient patch and a Gradient Step patch from the menu.
In the Inspector, create a patch to represent the Diffuse Texture property of foreground_mat.
To achieve the same gradient effect as in the finished project, you'll need to change some values in the patches:
Connect the output of the Gradient patch to the Gradient input in the Gradient Step patch.
If we simply connected the output of the Gradient Step to the Diffuse Texture port in foreground_mat, the gradient would cover the foreground:
We need to add the CameraTexture, so the gradient changes the pixels in this texture.
Create a patch for the CameraTexture by dragging it from the Assets panel into the Patch Editor.
To connect the CameraTexture, use the menu in the Patch Editor to create 3 more patches:
Set Dot Product to 0.25, and Swizzle to xxx1.
Your graph should look like this:
For the black and white effect, create another Gradient patch and select a Circular gradient. Adjust the start and end range to 0.6 and 2. We kept the colors as black and white, but you could choose any you like.
Again, create a Dot Product, Swizzle and Add patch. Connect:
Set the value of Dot Product to 0.45.
Your graph should look like this:
The final step is to add the logic to switch between the two color gradients. We'll do this with the same screen tap that switches the glasses color by adding a Mix patch:
Your graph should look like this:
We can use the Counter patch we added earlier to cause the gradients to change at the same time as the glasses color. Connect the output of the Counter patch to the Alpha port in the Mix patch.
We chose the Alpha port because alpha is a value from 0 to 1. Set to 0 it's not mixing the two inputs, set to 1 the second input will take over the first.
You've finished the Glasses - Advanced effect!
Find out what's happening in the Assets panel, in the finished effect.
glasses_25D is a 3D object, shaped like a large pair of glasses.
The 3 different glasses in the effect are 3 textures, added to the project as a sequence. In the example content folder, they're named design.01, design.02 and design.03.
We imported these textures as a sequence, because we can build a simple graph using the Patch Editor to easily switch between each frame.
glasses_mat is applied to the 3D object. We've then applied the texture sequence to this material.
occluder_mat has been applied to a face mesh. Occluders are materials that can hide, or occlude, other objects.
foreground_mat is applied to a rectangle that fills the whole canvas. We've used the Patch Editor to specify the appearance of this material.
CameraTexture. Using the camera texture takes the input video from the device's camera - for example, the video of someone using the effect, and turns it into a texture.
design.[1-3] are the 3 textures that make up the animation sequence - the 3 different pairs of glasses you can see in the effect.