Everything you need to know to create an interactive augmented reality experience.
In this guide, we'll show you how to create an effect that tracks a 3D object - the glasses - to the face. You'll also add two different gradient effects, and interactivity.
This effect is one of our featured samples. You can find it by opening Spark AR Studio and selecting Get Started on on the Visual Shaders sample, or by downloading the sample content. You can adapt any of the assets in this effect in your own projects.
You'll learn about:
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 put them onto a face:
You'll see the shape of the glasses tracking the face:
To finish the glasses we need to 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.
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 an occluder, which in this case is face mesh with a material applied to it to hide 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:
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:
Now drag the glasses_25D object from the Scene tab into the Patch Editor, to create a purple patch representing this object.
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.
The Object output 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 Environment properties of the material applied to the glasses object to do this. When someone taps the screen, the color we set under the Enironment property will override the color set under Diffuse.
Select glasses_mat. In the Inspector:
Your project should 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 is set 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.
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 to create 2 color gradient effects.
To 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:
Next create a material for the rectangle, and rename it. We called it foreground_mat.
To apply the camera texture, select foreground_mat. In the Inspector:
This will show the user in the scene again. However, the glasses are hidden by the rectangle and camera texture:
We'll edit the layers and materials 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 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.
Next we're going to make a change to the render options in the foreground material:
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 patches change the colors of the pixels in the camera texture and create the gradient filter effect.
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 the second value in the Dot Product patch to 0.25, and the second value in Swizzle to xxx1.
Your graph should look like this:
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 any you like.
Again, create a Dot Product, Swizzle and Add patch. Connect:
Set the value of Dot Product to 0.45, and Swizzle to xxx1.
Here's how this part of the graph should look:
You can't see the gradient yet, because we need to connect both parts of the graph together.
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:
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.
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 now finished the glasses and gradient effect!
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community