How to Create Virtual Lipstick Try On Effect

This tutorial will guide you on how to create a virtual lipstick try on effect using Banuba Makeup API. The API provides ready-made documented methods making it easy for developers to call AR beauty features in their apps. It comes with a Makeup effect .zip archive which includes the most common examples of virtual makeup application. Browse all examples of beauty AR features available with Makeup API.

note

The lips coloring feature requires a lips segmentation neural network. Please, make sure your licence plan includes one by contacting your sales manager or fill in the website form to request it.

You can use the following guide to develop a realistic lipstick try-on feature in e-commerce apps following tips on how to transfer digital makeup colors to AR. Or you can add it to beautification and selfie editing apps where users can modify their appearance in real-time using augmented reality.

1. Preparation

1. Download and install the Banuba Viewer.

2. Download the Makeup effect.

3. Connect the Viewer Color Picker tool to the Makeup effect’s Lips coloring feature: Open the Makeup effect’s config.js using any text editor and add the following lines of code to its bottom:

   function setColor(json) {

   var rgba = JSON.parse(json)

   var color = rgba.join(" ")

   Lips.color(color)

   }

   function setParams(json) {

   var params = JSON.parse(json)

   var saturation = params[0]

   var shineIntensity = params[1]

   var shineBleeding = params[2]

   var brightness = params[3]

   var shineScale = params[4]

   var glitterGrain = params[5]

   var glitterIntensity = params[6]

   var glitterBleeding = params[7]

   Lips

   .saturation(saturation)

   .shineIntensity(shineIntensity)

   .shineBleeding(shineBleeding)

   .brightness(brightness)

   .shineScale(shineScale)

   .glitterGrain(glitterGrain)

   .glitterIntensity(glitterIntensity)

   .glitterBleeding(glitterBleeding)

   }

   Save the file changes.

4. Launch the Banuba Viewer and drag-and-drop the Makeup effect folder into the viewport.

5. Open the Viewer’s ColorPicker tool (View → Colorpicker).

2. Extract the color sample

To extract the right color, select an evenly lit area in the picture without highlights and shadows. You can use a trace of lipstick or painted lips. Pick the area and apply the BLUR operation to achieve a homogeneous effect.

Use the Eyedropper tool to extract the color characteristics and copy the value in hexadecimal format.

Adjust the opacity and the lips settings:

1. sCoef - color saturation (1 is optimal)
2. vCoef - shine intensity (brightness, set 0 for matte lipstick)
3. bCoef - brightness (1 is optimal)
4. sCoef1 - shine bleeding (color saturation, set 0 for matte lipstick)

3. Persist the color selected

When you complete the settings, transfer the values from the Viewer’s ColorPicker window to the Makeup effect’s config.js file:

4. Test the effect

1. Launch the Banuba Viewer if it’s not launched yet.
2. Close Viewer’s ColorPicker tool if it’s opened.
3. Drag-and-drop the effect folder into the viewport.

5. Using one effect for multiple lips colors

Banuba SDK has a built-in feature to change the makeup applied in real time. This is done via SDK’s callJsMethod. E.g. you can change lips color from your app by executing callJsMethod from your Android/iOS/Web app:

Java

// Effect mCurrentEffect = ...

// set lips color

mCurrentEffect.callJSMethod("Lips.color", "0.749 0.224 0.275 1.0");

Swift

// var currentEffect: BNBEffect = ...

// set lips color

currentEffect.callJsMethod("Lips.color", params: "0.749 0.224 0.275 1.0");