In this tutorial you'll build an effect that places glasses to the face. You'll also add two different color gradient effects and interactivity.
Download the sample content to follow this tutorial. You can adapt any of the assets in this effect in your own projects.
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'll need to help you get started quickly.
The glasses are a 3D object. To put them onto a face:
You'll see the shape of the glasses tracking the face:
To complete the glasses, add a material and texture. Start by creating the material:
You're going to apply a sequences of textures to the material - rather than just one. Later we'll use the Patch Editor to give the user the ability to switch between each texture in the sequence by tapping the screen of the device showing a different style of glasses each time.
We've already added the 3 textures you'll need for this sequence to the project - they're listed in the Assets panel as design.01, design.02 and design.03.
To make the textures into a sequence:
Then create an asset called an Animation Sequence to add the texture sequence to:
Finally, to add the sequence to the material:
You'll now see the texture sequence on the glasses in the scene, moving very quickly. To fix this we'll use the Patch Editor to add simple logic and interactivity so the frame only changes when 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 an occluder to cover the face, hiding the arms of the glasses when someone turns their head.
To create an occluder:
You'll need to make a few changes to the material. In the Inspector:
To change the glasses showing in the effect you'll build a simple graph in the Patch Editor. The patches will control the Current Frame property of the animation sequence, changing which frame is shown when the glasses are tapped.
Creating the patches
To create the patches:
Now drag the glasses_25D object from the Scene panel into the Patch Editor, to create a purple patch representing it:
Next, right-click in the Patch Editor and select:
In the graph we're going to build, the Object Tap patch will capture a tap on the glasses in the scene.
Connecting the patches
To build the graph, connect:
Set the Maximum Count to 4. This will show the 3 textures in the sequence, and no texture for the final count - so the person using this effect won't seem to be wearing any glasses at all.
Here is how the graph will look:
You can test the effect out in the Simulator, by clicking the gear icon and selecting Simulate Touch.
The next stage in this tutorial is to build a graph that will change the color of the glasses when the screen is tapped. You'll use the Diffuse and Emission properties of the material applied to the glasses to do this. When someone taps the screen, the color we set under the Emission property will override the color set under Diffuse.
Setting the colors
Select glasses_mat. In the Inspector:
Your project will look like this:
To set up the logic to switch colors, 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:
In the Counter patch, set the Maximum Count to 2, to reflect the 2 color options we're counting between.
Finally, add the Environment color to the Option Picker by clicking on the colored square next to the second port. We picked white.
When someone uses an effect, the camera takes a video of what is being captured. This is called the camera texture. It can be used like any other texture in the scene.
For the next part of this tutorial we'll change the color of the pixels in the camera texture to create 2 color gradient effects.
First create the camera texture:
The texture will be listed in the Assets panel as cameraTexture0.
To add the texture to the scene you'll need an object and material to apply it to:
You'll see a small square in the middle of your scene:
To make the rectangle fill the whole device screen:
At the moment the glasses are partially hidden by the rectangle. Editing the layers will make the objects render in the right order.
In the Layers panel, create a new layer. It will be called layer1 by default - rename it foreground_layer. To help you keep track, rename the other layer glasses_layer.
In the Scene panel, assign the face tracker, canvas and rectangle to foreground_layer.
Create a material and add the camera texture
Next create a material for the rectangle, and rename it. We called it foreground_mat. To add the camera texture to the material, select foreground_mat in the Assets panel. In the Inspector:
This will show the user in the scene again:
The two color gradients in this effect area created using visual shader patches.
Creating the patches
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.
Adjusting the patches
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 patches change the colors of the pixels in the camera texture and create the gradient filter effect.
Adding the camera texture
You'll use a series of patches to combine the camera texture with the color gradient
Create a patch for the CameraTexture by dragging it from the Assets panel into the Patch Editor. Then use the menu in the Patch Editor to create 3 more patches:
Set the second value in the Dot Product patch to 0.25, and the second value in Swizzle to xxx1.
To build this section of the graph, connect:
Here's how your graph will look:
And you'll see the gradient in your effect:
For the black and white effect, create another Gradient patch and another Gradient Step patch. Select a Circular gradient this time. Adjust the start and end range in the Gradient Step patch to 0.6 and 2. We kept the colors as black and white, but you could choose different ones instead.
Again, create a Dot Product, Swizzle and Add patch. To build this section of the graph, connect:
Set the value of Dot Product to 0.45, and Swizzle to xxx1.
Here's how this part of the graph will look:
You can't see the gradient in the scene yet, because you need to connect both parts of the graph together and add the logic to switch between the two gradients.
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 to the graph:
We can use the Counter patch we added earlier to cause the gradients to change at the same time as the glasses color.
To do this, simply connect the output of the Counter patch to the Alpha port in the Mix patch.
For an extra layer of interest, follow these steps to add two different sound effects:
The audio files you’ll need are listed in the Assets panel under Audio:
To customize the effect, you can choose your own from a wide variety of audio files in AR Library.
Add the speakers
Use an object called a speaker to render sound in any effect. This effect will use 4 speakers. One will render the sound that’s triggered when the gradient changes. The other 3 will render the sound effects that play when the glasses change.
To add the speakers:
To help you keep track, rename the speakers:
Rename the other 3 speakers speakerTapGlasses0, speakerTapGlasses1 and speakerTapGlasses2.
Here’s how the Scene panel will look. We’ve highlighted the 4 speakers:
So the volume isn’t too loud, adjust all 4 speakers:
Adding audio when the gradient changes
For this part of the effect you’ll use the Multi-Clip Controller and Audio Player patches. They’ll connect a patch representing the audio file to the speaker, rendering the sound in the scene. The Screen Tap patch will then be connected to this new section of the graph, playing the sound in response to the same screen tap that changes the gradient.
To create the patches, right-click in the Patch Editor to open the menu. Select a:
Drag the arl_sfx_SynthPop_os_02.m4a audio clip from the Assets panel into the Patch Editor. An orange patch will be added to the Patch Editor:
To add a patch for the speaker:
A yellow patch will be added to the Patch Editor:
To build the graph, connect:
Now, each time the screen is tapped and the gradient changes, the sound will play.
Adding audio when the glasses change
When the glasses change, you’ll set up the effect to play one of 3 sounds randomly. This variation makes the effect more interesting.
Like before, start by connecting each audio file to a speaker using:
Create and connect these patches, so your graphs look like this:
Now set up a trigger to play one of the sounds at random each time the glasses are tapped, using the Random, Floor and Option Sender patches.
The Random and Floor patches will output a random number between 0 and 3. The Option Sender will route the pulse signal to one of the 3 audio files connected to it each time the glasses object is tapped.
Create these patches using the menu in the Patch Editor.
The Option Sender is set to output a number by default. For this effect it should output a pulse. To change the data type:
Because there are 3 audio clips, set the End Value in the Random patch to 3.
Here’s how the section of the graph will look:
To finish connect the top 3 outputs of the Option Sender patch to a Play input in a Multi-Clip Controller patch:
A signal will now be sent to one of the 3 Multi-Clip Controller patches at random, playing a different sound each time the glasses are tapped.
Use interaction patches animate objects in your effect.
Make something happen when your effect has been open for a set amout to time.