Clear
Back

There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

As a result of the coronavirus (COVID-19) outbreak, we have a reduced capacity to review effects and delays in publishing are expected. Learn more.

Tutorial: Glasses and Gradient

In this tutorial you'll build an effect that tracks a pair of 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.

You'll learn about:

  1. Using 3D objects to create glasses that respond to the movement of someone's face.
  2. Creating occluders to make the effect more realistic.
  3. Using the Patch Editor to switch the frames of the glasses and their color.
  4. Adding the camera texture to an effect.
  5. Manipulating the camera texture to create the purple and black and white gradient effects.
  6. Changing the gradients when the screen is tapped.
  7. Adding audio.

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.

Adding the glasses

The glasses are a 3D object. To put them onto a face:

  1. Insert a face tracker by clicking Add Object and selecting Face Tracker.
  2. Drag the object glasses_25D from the Assets panel onto faceTracker0 in the Scene panel.

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:

  1. Select the glasses_25D mesh in the Scene panel - it will be nested under the glasses_25D object.
  2. In the Inspector, click the dropdown under Materials and select Create New Material.
  3. In the Assets panel, rename the material glasses_mat.

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:

  1. Select them all at the same time by holding down control or command on your keyboard and clicking each texture.
  2. In the Inspector, change the Type from Single Texture to Texture Sequence.


Then create an asset called an Animation Sequence to add the texture sequence to:

  1. Click Add Asset.
  2. Select Animation Sequence.
  3. Select the animation sequence - it'll be listed in the Assets panel as animationSequence0.
  4. In the Inspector, click the dropdown next to texture and select the sequence - design.0[1.2].

Finally, to add the sequence to the material:

  1. Select glasses_mat in the Assets panel.
  2. Under Diffuse in the Inspector, click the dropdown next to Texture.
  3. Select animationSequence0 from the list.

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.

Adding an occluder

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:

  1. Create a face mesh as a child of the face tracker. Move it to the top of the list in the Scene panel, so it's directly underneath the face tracker.
  2. For the face mesh, uncheck the boxes next to Eyes and Mouth in the Inspector. This will make the occluder cover the full face.
  3. In the Inspector, create a material for the face mesh and rename it occluder_mat.

You'll need to make a few changes to the material. In the Inspector:

  1. Set the Shader Type to Flat - as we don't need this material to omit or respond to light.
  2. Set Opacity to 1% - so the material isn't actually visible in the scene.
  3. Check the box for Double Sided - because the back of the face mesh can be exposed when someone turns their head.

Switching glasses frames

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.

Creating the patches

To create the patches:

  1. Select animationSequence0 in the Assets panel.
  2. In the Inspector, click the arrow next to Current Frame - this will open the Patch Editor and create a patch representing this property.


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:

  1. An Object Tap patch.
  2. A Counter patch.


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

Connect:

  1. The Object output port in glasses_25D to the Object port in Object Tap.

  2. 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.

  3. The Count port in the Counter patch to Current Frame in the design.-animation patch, to tell the current frame to change.

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.

The patches should be connected like this:



You can test this out in the Simulator, by clicking the gear icon and selecting Simulate Touch.

Switching glasses color

The glasses change color when the screen is tapped. We'll use the Diffuse and Emission properties of the material applied to the glasses object 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:

  1. Choose a Color under Diffuse - we picked black.
  2. Check the box to the right of Emission.
  3. Under Emission, click the arrow next to Texture to create a patch representing this property.

Your project should look like this:

Creating the logic

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:

  1. Screen Tap patch - to detect a tap on the screen.
  2. Counter - to count between the 2 colors.
  3. Option Picker - to set the color options we'll count between. Change the Type to Color.

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.

You could add more color options. Just add more colors to the Options Picker and increase the Maximum Count value in the Counter patch.

Using the camera texture

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:

  1. Select the Camera in the Scene panel.
  2. In the Inspector, click + next to Texture Extraction.

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:

  1. Add a rectangle - it'll automatically be inserted as the child of a canvas.
  2. Rename the rectangle - we called it foreground.

You'll see a small square in the middle of your scene:



To make the rectangle fill the whole device screen:

  1. In the Inspector, click in the first box next to Size and select Fill Width.
  2. Click in the second box and select Fill Height.

Adding layers

At the moment, the glasses partially are hidden by the rectangle. 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.

Create a material and add the camera texture

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:

  1. Change the Shader Type to Flat.
  2. Apply the CameraTexture under Diffuse.
  3. Click the arrow next to Advanced Render Options.
  4. Uncheck the boxes next to Use Depth Test and Write to Depth Text.

This will show the user in the scene again:

Creating the purple gradient

We used visual shaders in the Patch Editor to create the 2 gradient effects.

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:

  1. Click in the Gradient patch and select a Vertical gradient - there are other gradients to choose from if you want to.
  2. In the Gradient Step patch, choose 2 colors - we picked orange and purple.
  3. In the Gradient Step patch adjust the start and end range to set where each color starts and finishes - we picked -0.1 for the Start Range and 0.9 for the End Range.

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

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:

  1. An Add patch - to combine the camera texture with the gradient.
  2. A Dot Product patch and a Swizzle patch.


Set the second value in the Dot Product patch to 0.25, and the second value in Swizzle to xxx1.

Connect:

  1. The RGB output port in CameraTexture to the top input port in the Dot Product patch.
  2. The output of the Dot Product patch to the input in the Swizzle patch.
  3. The Output ports in the Gradient Step patch and the Swizzle patch to the Add patch.
  4. The Add patch to the Diffuse Texture port in foreground_mat.

Your graph should look like this:



And you'll see the gradient in your effect:

Creating the black and white gradient

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. Connect:

  1. The camera texture patch to the Dot Product patch.
  2. Dot Product to Swizzle.
  3. The outputs of both Swizzle and the Gradient Step patch to the Add patch.

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.



Switching colors

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:

  1. Select a Mix patch from the menu in the Patch Editor.
  2. Instead of Diffuse Texture in the foreground_mat, connect the output of both Add patches to the Mix patch.
  3. Connect the Mix patch to Diffuse Texture.


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.

Adding audio

To add an extra layer of interest, follow these steps to add two different sound effects:

  • Each time the screen is tapped and the gradient changes, a sound will play.
  • Each time the glasses are tapped, one of 3 sounds will play at random.


We’ve added the audio files you’ll need. They’re listed in the Assets panel under Audio:



To customize the effect, you can choose your own from a wide variety of specially-created audio files in AR Library.

Add the speakers

To render sound in any effect, you’ll need a scene object called a speaker. 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:

  1. Click Add Object.
  2. Select Speaker from the menu.
  3. Add 3 more speakers, either by repeating these steps or using keyboard shortcuts to copy and paste the speaker you’ve already added.

To help you keep track, rename the speakers:

  1. Right-click on speaker0 in the Scene panel.
  2. Select Rename.
  3. Name it speakerTapBackground.

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:

  1. Select the speakers in the Scene panel - you can hold down shift on your keyboard to select them all at the same time.
  2. In the Inspector, set the Volume property to 50%.

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:

  • Multi-Clip Controller patch.
  • Audio Player patch.

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:

  1. In the Scene panel, select speakerTapBackground.
  2. Go to the Inspector.
  3. Click the arrow to the left of Audio.

A yellow patch will be added to the Patch Editor:



Connect:

  1. The output of the Screen Tap patch to the Play input of the Multi-Clip Controller patch.
  2. The output of the Multi-Clip Controller patch to the Controller input in the Audio Player patch.
  3. The output of the orange patch representing the audio clip to the Audio Clip input in the Audio Player patch.
  4. The output of the Audio Player patch to the Audio input in the yellow patch representing the speaker.


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:

  • A patch representing each audio file, of the remaining 3 audio files.
  • A patch representing the Audio property of each remaining speaker.
  • The Multi-Clip Controller and Audio Player patches.

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:

  1. Select the Option Sender patch.
  2. Click the menu at the bottom of the patch and select Pulse.

Connect:

  1. The output of the Object Tap patch to the Value input in the Option Sender. This tells the Option Sender to output a pulse when the glasses are tapped.
  2. The output of the Object Tap to the Randomize input in the Random patch.
  3. The Random patch output to the Floor patch input.
  4. The Floor patch output to the Option input in the Option Sender.

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.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?