Hair Segmentation

In this tutorial you’ll use the standard material and a light to create a hair segmentation effect. You’ll also add interactivity, to change hair color when the screen is tapped.

Hair segmentation is achieved with a hair segmentation mask texture, which you can create in Spark AR Studio. You’ll combine this texture with the camera texture in a material, then experiment with settings in the material to apply all kinds of visual effects to the hair.

You can also use the segmentation mask texture to segment someone's skin, instead of their hair.

Download the sample content to see the finished effect.

Creating the textures

Let’s take a quick look at how these textures work together to achieve hair segmentation:

  • The camera texture represents the live video captured by the camera when an effect is being played. When combined with a material, you can adjust the properties in the material to change the pixels in the camera texture - for example changing the color in a filter effect.
  • The hair segmentation texture separates a person’s hair from the rest of the scene.

Combining these two textures in the same material lets you to change the color of the hair, by manipulating the pixels in this part of the camera texture only.

The hair segmentation texture

To add the hair segmentation texture:

  1. Open a new project in Spark AR Studio.
  2. In the Scene panel, select Camera.
  3. Go to the Inspector.
  4. Next to Segmentation, click +.
  5. Select Hair.

Creating the hair segmentation texture.

A texture called hairSegmentationMaskTexture0 will be listed in the Assets panel. To create an effect with skin segmentation instead, simply select this texture in the Assets panel and change the Type to Skin in the Inspector.

The camera texture

Now add the camera texture:

  1. In the Scene panel, select Camera.
  2. In the Inspector, go to Texture Extraction.
  3. Next to Texture Extraction, click +.

A texture named cameraTexture0 will be listed in the Assets panel:

The camera texture is shown highlighted in the Assets panel.

Adding a rectangle

A rectangle will render the textures and material in the scene.

To add the rectangle:

  1. Click Add Object.
  2. Select Rectangle - it’ll automatically be added to the scene as a child of a canvas:

A rectangle can be seen in the Simulator and Viewport, after having been added to the Scene panel.

The rectangle should completely cover the device’s screen. To do this, adjust the rectangle’s properties:

  1. Go to the Inspector.
  2. Click in the box for Width, click Fill Width. Click in the box for Height, click Fill Height.

The rectangle with a checkerboard pattern now covers the entire Simulator.

Creating a material

To create the material you’ll add the textures to:

  1. Select rectangle0 in the Scene panel.
  2. In the Inspector, go to Materials and click +.

A new material will be added to the Assets panel. Rename it hair_mat.

A new material can be seen in the Assets panel.

Editing the material.

Add the textures you’ve already created to the material:

  1. Go to the Inspector.
  2. Under Diffuse, click the dropdown next to Texture and select cameraTexture0.
  3. Check the box next to Alpha.
  4. Next to Texture, click the dropdown and select hairSegmentationMaskTexture0.

You’ll see the video of the camera texture playing in the Simulator:

The user can once again be seen in the Simulator.

Changing the hair color

To give the hair a different color:

  1. Select hair_mat in the Assets panel.
  2. In the Inspector, go to Diffuse.
  3. Next to Color, click the rectangle and choose a color.

A color is chosen and applied to the hair material.

It’s worth experimenting with the opacity of the material, for a stronger or more subtle effect. To do this, adjust the slider next to Opacity in the Inspector.

Adjusting the opacity slider in the Inspector.

For this tutorial set Opacity to 80%.

Editing the Render Options

Editing the Render Options in the material will change appearance of the hair color, so it’s worth experimenting with these settings. For this tutorial:

  1. Change Blend Mode to Add.

The blend mode of our hair material is being adjusted.

Add a light

For extra interest, add a rotating light to the scene. To do this quickly you can use the actions feature, which lets you to add common techniques with just one or two clicks.

Start by adding a light to the scene:

  1. In the Scene panel, right-click canvas0.
  2. Select Add, then Directional Light.

The light with be listed as directionalLight0. Because it’s shining on the scene, the hair will appear lighter and brighter:

The directional light's effect on the hair material is shown.

To rotate the light:

  1. In the Inspector, click Actions in the top right corner.
  2. Select Animate, then Spin.

This will add a series of animation patches to the Patch Editor, controlling the rotation of the light.

The light now rotates within the effect.

The light is quite bright at the moment. To adjust this:

  1. Go to the Inspector.
  2. Next to Intensity, edit the slider. About 85% works well.

Adding interactivity

Use the Patch Editor to change the hair’s color each time the screen is tapped.

Patches you’ll use

You’ll use 4 patches to change the color of the hair:

  • The Screen Tap patch will detect a tap on the device screen.
  • The different hair colors will be set in an Option Picker patch.
  • The Counter patch will count through the colors.
  • A patch representing the Diffuse property of the material will show the color in the scene.

Creating the patches

To create these patches:

  • Right-click anywhere in the Patch Editor to open the menu.
  • From the menu, search for and add the Screen Tap, Option Picker and Counter patches.
  • In the Assets panel, select hair_mat.
  • In the Inspector, go to Diffuse and click the arrow to the left of Texture.
A patch graph containing four patches.

Edit the Option Picker

The Option Picker patch is set to number by default. To add colors to the Option Picker patch instead, change the data type:

  1. Select the Option Picker patch.
  2. Click the blue dropdown menu that appears at the bottom of the patch.
  3. Select Color from the menu.

You can now add colors to the Option Picker patch by clicking the rectangles on the patch, and selecting options from the menu:

Setting up the options picker.

Add as many or as few colors as you like.

Connecting the patches

To connect the patches, connect:

  1. The Tap port of the Screen Tap patch to the Increase port in the Counter patch.
  2. The output of the Counter patch to the Option input in the Option Picker patch.
  3. The output of the Option Picker patch to the Diffuse Texture input in the material patch.

Make sure the Maximum Count value in the Counter patch is set to match the number of options you want to count through in the Option Picker patch.

Here’s how the graph will look if you set 5 colors in the Option Picker:

The finished patch graph, containing 4 patches.

Testing the tap feature

To see the interactive part of this effect:

Your final effect will look like this:

Simulating tap gestures in the Simulator changes color of the users's hair.
Was this article helpful?