Skip to main content

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 the 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 the 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")
  3. If you run your application now, the debug console will display an error message: 
    `feature_parameters` is missing, using default RED color and gloss 50.
    It happens because you haven't specified the color yet.
  4. Let's specify the nail color and gloss:

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

      @objc public var featureParameters: [BNBFeatureParameter]?

      Where the first parameter is the color, and the second is the gloss (optional, only the first element of BNBFeatureparameter for 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 the following 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.