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 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")

  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.