CLEAR

Sample Effect: Glasses - Advanced

In this guide, we'll show you how to create the Glasses - Advanced 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:

  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.

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.

Adding the Glasses

The glasses are a 3D object. To add them so they track the face:

  1. Insert a face tracker.
  2. Drag the object glasses_2D from the Assets panel into the Scene tab, so they're a child of the Face Tracker.

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:

  1. Select the glasses_2D mesh in the Scene tab - it will be nested under the glasses_2D object.
  2. In the Inspector panel, select Create New Material under Materials.
  3. Rename the material glasses_mat.

The 3 textures that make up the different glasses were imported as a sequence. To apply the texture sequence:

  1. Select the material in the Assets panel - it'll be listed as defaultMaterial0.
  2. Under Diffuse in the Inspector panel, click the dropdown next to Texture.
  3. Select design.-animation from the list.


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.

Adding an Occluder

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 right, hiding the glasses arm.



To create an occluder:

  1. Create a face mesh as a child of the face tracker. Move it to the top of the list, so it's directly underneath the face tracker in the Scene tab.
  2. For the face mesh, uncheck the boxes next to Eyes and Mouth, so the occluder covers the full face.
  3. In the Inspector panel, 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 panel:

  1. Set the Shader Type to Flat - as we don't need this material to omit or respond to light.
  2. Set Opacity to 0% - so the material isn't actually visible in the scene.
  3. Check the box for Double Sided - because sometimes the back of the face mesh is 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 design.-animation in the Assets panel.
  2. In the Inspector panel, click the circle next to Current Frame - this will open the Patch Editor and create a patch representing this property.
  3. Drag the glasses_2D 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:

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

Object Tap will capture a tap on the glasses in the scene.

Connecting the patches

Connect:

  1. The Object port in glasses_2D 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 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.

Switching Glasses Color

The glasses change color when the screen is tapped. We'll use the Diffuse and Emission properties of the glasses' material to do this.

Setting the colors

Select glasses_mat. In the Inspector panel:

  1. Choose a Color under Diffuse - we picked black.
  2. Check the box next to **Emission*.
  3. Under Emission, click the circle next to Texture to create a patch we can use to switch between both colors.

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:

Creating the logic

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:

  1. Screen Tap patch - to detect when a user taps 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:



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.

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, 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:

  1. Select the Camera in the Scene tab.
  2. In the Inspector panel, click + next to Texture Extraction. CameraTexture will now be listed in the Assets panel.

To add the texture to the scene, you'll need an object and material to apply it to:

  1. Insert a rectangle - it'll automatically be inserted as the child of a canvas.
  2. Rename the rectangle - we called it foreground.
  3. In the Inspector panel, click Fill Parent so that it completely fills the canvas.
  4. Create a material for the rectangle, and rename it. We called it foreground_mat.

To apply the texture, select foreground_mat. In the Inspector panel:

  1. Change the Shader Type to Flat - because we don't need this material to omit or respond to light.
  2. Apply the CameraTexture under Diffuse.

At the moment, the glasses are hidden by the rectangle and camera texture. We'll use layers to change this.

Adding Layers

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

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 changes the pixels in this texture.

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 Dot Product to 0.25, and Swizzle to xxx1.

Connect:

  1. The RGB port in CameraTexture to Dot Product.
  2. Dot Product to Swizzle.
  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:

Creating the Black and White Gradient

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:

  1. CameraTexture to Dot Product.
  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.

Your graph should look like this:



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:

  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.

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!

In the Finished Effect

Find out what's happening in the finished effect.

Objects



glasses_2D is a 3D object, shaped like a large pair of glasses.

Animatons



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.

Materials



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.

Textures



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.