How to use Virtual Nails Try On Effect

This tutorial will guide you on how to create a virtual nails coloring effect using Banuba API. The API provides ready-made documented methods making it easy for developers to call AR features in their apps.

Download example

note

The nails coloring feature requires a nails 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.

Preview

Drag

Resource preparation

Nails color preparation

1. Design or pick the color you want to use in effect. In our example, we use the color: #FFFF496C.
2. Split the color into separate channels: red, green, blue and alpha:
   • red: 255
   • green: 73
   • blue: 108
   • alpha: 255
3. You have your colors in [0, 255] format. You need to convert them into the [0, 1] by dividing each channel value by 255.
   • red: 255 / 255 = 1.0
   • green: 73 / 255 = 0.28627450980392155
   • blue: 108 / 255 = 0.4235294117647059
   • alpha: 255 / 255 = 1.0

Integrating nails coloring feature into your iOS app

1. Build your project with Banuba SDK.

2. Use the test_Nails effect or your version of this effect to enable nails coloring feature.

   sdkManager.loadEffect("test_Nails")

   note

   You also need to disable ARKit on sdk initializing:

   let configuration = EffectPlayerConfiguration(renderMode: renderMode, useARKitWhenAvailable: false)

   sdkManager.setup(configuration: configuration)

3. If you run your application now, you will face the problem: There will be an error message in debug console:

   `feature_parameters` is missing, using default RED color and gloss 50.

   It happens because we haven't specified the color yet.

4. Let's specify the nails color and gloss:

   • With BanubaSdkManager: You should use this property to set the color and gloss:

     @objc public var featureParameters: [BNBFeatureParameter]?

     Where first parameter is the color, and the second is the gloss (optional, only first element of BNBFeatureparameter fo gloss is considered).

     Here is an example:

     sdkManager.featureParameters([

     BNBFeatureParameter(x: 0., y: 1., z: 0., w: 1.), // Green nails

     BNBFeatureParameter(x: 60., y: 0., z: 0., w: 0.) // Gloss 60

     ])

   • Without BanubaSdkManager: You will have such lines of code in your application:

     let framedata = BNBFrameData.create(...)

     effectPlayer.push(framedata)

     All you need to do is to add your feature color into the framedata:

     let framedata = BNBFrameData.create(...)

     frameData?.addFeatureParameters([

     BNBFeatureParameter(x: 0., y: 1., z: 0., w: 1.), // Green nails

     BNBFeatureParameter(x: 60., y: 0., z: 0., w: 0.) // Gloss 60

     ])

     effectPlayer.push(framedata)

5. Now you can run your application to test the nails segmentation and coloring.