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.
Let’s take a quick look at how these textures work together to achieve hair segmentation:
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:
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:
A texture named cameraTexture0 will be listed in the Assets panel:
A rectangle will render the textures and material in the scene.
To add the rectangle:
The rectangle should completely cover the device’s screen. To do this, adjust the rectangle’s properties:
To create the material you’ll add the textures to:
A new material will be added to the Assets panel. Rename it hair_mat.
Editing the material.
Add the textures you’ve already created to the material:
You’ll see the video of the camera texture playing in the Simulator:
Changing the hair color
To give the hair a different color:
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.
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:
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:
The light with be listed as directionalLight0. Because it’s shining on the scene, the hair will appear lighter and brighter:
To rotate the light:
This will add a series of animation patches to the Patch Editor, controlling the rotation of the light.
The light is quite bright at the moment. To adjust this:
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:
Creating the patches
To create these 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:
You can now add colors to the Option Picker patch by clicking the rectangles on the patch, and selecting options from the menu:
Add as many or as few colors as you like.
Connecting the patches
To connect the patches, connect:
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:
To see the interactive part of this effect:
Your final effect will look like this: