Virtual Makeup API

Banuba provides the Makeup API designed to help you integrate augmented reality beauty try on features into your app. The AR makeup features fit into e-commerce try on apps, makeovers, selfie editors and portrait retouching software. It aims to overlay realistic makeup onto the face to showcase the product or let users change their appearance.

Download example

tip

Read more about how to use and combine Makeup API and Face Beauty API features.

The Beauty module allows to enhance the face with the following built-in features:

Face makeup

For features that allow to set custom texture:

note

To put textures under subfolder, e.g. custom_textures/makeup_1.png, specify this textures in cfg.toml inside no_preload_textures = [ ].

Makeup

Sets texture as composite makeup (i.e. all-in-one: lashes, shadows, eyeliner, etc).

config.js

/* Feel free to add your custom code below */

// set texture as makeup

Makeup.set("example_makeup.png")

// reset makeup

Makeup.clear()

Java

// Effect mCurrentEffect = ...

// set texture as makeup

Makeup.callJSMethod("Makeup.set", "example_makeup.png");

// reset makeup

Makeup.callJSMethod("Makeup.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set texture as makeup

currentEffect?.callJsMethod("Makeup.set", params: "example_makeup.png")

// reset makeup

currentEffect?.callJsMethod("Makeup.clear", params: "")

JavaScript

// const player = new Player(...)

// set texture as makeup

player.callJsMethod("Makeup.set", "example_makeup.png")

// reset makeup

player.callJsMethod("Makeup.clear")

Preview

Drag

Highlighting

config.js

/* Feel free to add your custom code below */

// set highlighter color

Highlighter.color("0.75 0.74 0.74 0.4")

// reset highlighter color

Highlighter.clear()

Java

// Effect mCurrentEffect = ...

// set highlighter color

mCurrentEffect.callJSMethod("Highlighter.color", "0.75 0.74 0.74 0.4");

// reset highlighter color

mCurrentEffect.callJSMethod("Highlighter.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set highlighter color

currentEffect?.callJsMethod("Highlighter.color", params: "0.75 0.74 0.74 0.4")

// reset highlighter color

currentEffect?.callJsMethod("Highlighter.clear", params: "")

JavaScript

// const player = new Player(...)

// set highlighter color

player.callJsMethod("Highlighter.color", "0.75 0.74 0.74 0.4")

// reset highlighter color

player.callJsMethod("Highlighter.clear")

Preview

Drag

Set a custom highlighter texture

config.js

/* Feel free to add your custom code below */

// set a custom highlighter texture

Highlighter.set("highlighter.png")

Java

// Effect mCurrentEffect = ...

// set a custom highlighter texture

mCurrentEffect.callJSMethod("Highlighter.set", "highlighter.png");

Swift

// var currentEffect: BNBEffect = ...

// set a custom highlighter texture

currentEffect?.callJsMethod("Highlighter.set", params: "highlighter.png")

JavaScript

// const player = new Player(...)

// set a custom highlighter texture

player.callJsMethod("Highlighter.set", "highlighter.png")

Contouring

config.js

/* Feel free to add your custom code below */

// set contour color

Contour.color("0.3 0.1 0.1 0.6")

// reset contour color

Contour.clear()

Java

// Effect mCurrentEffect = ...

// set contour color

mCurrentEffect.callJSMethod("Contour.color", "0.3 0.1 0.1 0.6");

// reset contour color

mCurrentEffect.callJSMethod("Contour.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set contour color

currentEffect?.callJsMethod("Contour.color", params: "0.3 0.1 0.1 0.6")

// reset contour color

currentEffect?.callJsMethod("Contour.clear", params: "")

JavaScript

// const player = new Player(...)

// set contour color

player.callJsMethod("Contour.color", "0.3 0.1 0.1 0.6")

// reset contour color

player.callJsMethod("Contour.clear")

Preview

Drag

A custom Contour texture may be provided by placing a corresponding .png or .ktx file into the effect's folder.

config.js

/* Feel free to add your custom code below */

// set a custom contour texture

Contour.set("contour.png")

Java

// Effect mCurrentEffect = ...

// set a custom contour texture

mCurrentEffect.callJSMethod("Contour.set", "contour.png");

Swift

// var currentEffect: BNBEffect = ...

// set a custom contour texture

currentEffect?.callJsMethod("Contour.set", params: "contour.png")

JavaScript

// const player = new Player(...)

// set a custom contour texture

player.callJsMethod("Contour.set", "contour.png")

Foundation

info

Requires Skin segmentation Neural Network.

config.js

/* Feel free to add your custom code below */

// set foundation color

Foundation.color("0.73 0.39 0.08 0.3")

// set foundation strength (skin smoothing)

Foundation.strength("1")

// reset foundation strength and color

Foundation.clear()

Java

// Effect mCurrentEffect = ...

// set foundation color

mCurrentEffect.callJSMethod("Foundation.color", "0.73 0.39 0.08 0.3");

// set foundation strength (skin smoothing)

mCurrentEffect.callJSMethod("Foundation.strength", "1");

// reset foundation strength and color

mCurrentEffect.callJSMethod("Foundation.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set foundation color

currentEffect?.callJsMethod("Foundation.color", params: "0.73 0.39 0.08 0.3")

// set foundation strength (skin smoothing)

currentEffect?.callJsMethod("Foundation.strength", params: "1")

// reset foundation strength and color

currentEffect?.callJsMethod("Foundation.clear", params: "")

JavaScript

// const player = new Player(...)

// set foundation strength (skin smoothing)

player.callJsMethod("Foundation.strength", "1")

// reset foundation strength

player.callJsMethod("Foundation.clear")

Preview

Drag

Blush

config.js

/* Feel free to add your custom code below */

// set blush color

Blush.color("0.7 0.1 0.2 0.5")

// reset blush color

Blush.clear()

Java

// Effect mCurrentEffect = ...

// set blush color

mCurrentEffect.callJSMethod("Blush.color", "0.7 0.1 0.2 0.5");

// reset blush color

mCurrentEffect.callJSMethod("Blush.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set blush color

currentEffect?.callJsMethod("Blush.color", params: "0.7 0.1 0.2 0.5")

// reset blush color

currentEffect?.callJsMethod("Blush.clear", params: "")

JavaScript

// const player = new Player(...)

// set blush color

player.callJsMethod("Blush.color", "0.7 0.1 0.2 0.5")

// reset blush color

player.callJsMethod("Blush.clear")

Preview

Drag

A custom Blush texture may be provided by placing a corresponding .png or .ktx file into the effect's folder.

config.js

/* Feel free to add your custom code below */

// set a custom blush texture

Blush.set("blush.png")

Java

// Effect mCurrentEffect = ...

// set a custom blush texture

mCurrentEffect.callJSMethod("Blush.set", "blush.png");

Swift

// var currentEffect: BNBEffect = ...

// set a custom blush texture

currentEffect?.callJsMethod("Blush.set", params: "blush.png")

JavaScript

// const player = new Player(...)

// set a custom blush texture

player.callJsMethod("Blush.set", "blush.png")

Softlight

Highlights a face like a directional flashlight.

config.js

/* Feel free to add your custom code below */

// Sets softlight strength from 0 to 1

Softlight.strength("1")

Java

// Effect mCurrentEffect = ...

// Sets softlight strength from 0 to 1

mCurrentEffect.callJSMethod("Softlight.strength", "1");

Swift

// var currentEffect: BNBEffect = ...

// Sets softlight strength from 0 to 1

currentEffect?.callJsMethod("Softlight.strength", params: "1")

JavaScript

// const player = new Player(...)

// Sets softlight strength from 0 to 1

player.callJsMethod("Softlight.strength", "1")

Preview

Drag

Eye makeup

For features that allow to set custom texture:

note

To put textures under subfolder, e.g. custom_textures/makeup_1.png, specify this textures in cfg.toml inside no_preload_textures = [ ].

Eyeliner

config.js

/* Feel free to add your custom code below */

// set eyeliner color

Eyeliner.color("0 0 0")

// reset eyeliner color

Eyeliner.clear()

Java

// Effect mCurrentEffect = ...

// set eyeliner color

mCurrentEffect.callJSMethod("Eyeliner.color", "0 0 0");

// reset eyeliner color

mCurrentEffect.callJSMethod("Eyeliner.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set eyeliner color

currentEffect?.callJsMethod("Eyeliner.color", params: "0 0 0")

// reset eyeliner color

currentEffect?.callJsMethod("Eyeliner.clear", params: "")

JavaScript

// const player = new Player(...)

// set eyeliner color

player.callJsMethod("Eyeliner.color", "0 0 0")

// reset eyeliner color

player.callJsMethod("Eyeliner.clear")

Preview

Drag

A custom Eyeliner texture may be provided by placing a corresponding .png or .ktx file into the effect's folder.

config.js

/* Feel free to add your custom code below */

// set a custom eyeliner texture

Eyeliner.set("eyeliner.png")

Java

// Effect mCurrentEffect = ...

// set a custom eyeliner texture

mCurrentEffect.callJSMethod("Eyeliner.set", "eyeliner.png");

Swift

// var currentEffect: BNBEffect = ...

// set a custom eyeliner texture

currentEffect?.callJsMethod("Eyeliner.set", params: "eyeliner.png")

JavaScript

// const player = new Player(...)

// set a custom eyeliner texture

player.callJsMethod("Eyeliner.set", "eyeliner.png")

Eyeshadow

config.js

/* Feel free to add your custom code below */

// set eyeshadow color

Eyeshadow.color("0.6 0.5 1 0.6")

// reset eyeshadow color

Eyeshadow.clear()

Java

// Effect mCurrentEffect = ...

// set eyeshadow color

mCurrentEffect.callJSMethod("Eyeshadow.color", "0.6 0.5 1 0.6");

// reset eyeshadow color

mCurrentEffect.callJSMethod("Eyeshadow.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set eyeshadow color

currentEffect?.callJsMethod("Eyeshadow.color", params: "0.6 0.5 1 0.6")

// reset eyeshadow color

currentEffect?.callJsMethod("Eyeshadow.clear", params: "")

JavaScript

// const player = new Player(...)

// set eyeshadow color

player.callJsMethod("Eyeshadow.color", "0.6 0.5 1 0.6")

// reset eyeshadow color

player.callJsMethod("Eyeshadow.clear")

Preview

Drag

A custom Eyeshadow texture may be provided by placing a corresponding .png or .ktx file into the effect's folder.

config.js

/* Feel free to add your custom code below */

Eyeshadow.set("eyeshadow.png")

Java

// Effect mCurrentEffect = ...

// set a custom eyeshadow texture

mCurrentEffect.callJSMethod("Eyeshadow.set", "eyeshadow.png");

Swift

// var currentEffect: BNBEffect = ...

// set a custom eyeshadow texture

currentEffect?.callJsMethod("Eyeshadow.set", params: "eyeshadow.png")

JavaScript

// const player = new Player(...)

// set a custom eyeshadow texture

player.callJsMethod("Eyeshadow.set", "eyeshadow.png")

Eyelashes

config.js

/* Feel free to add your custom code below */

// set eyelashes color

Eyelashes.color("0 0 0")

// reset eyelashes color

Eyelashes.clear()

Java

// Effect mCurrentEffect = ...

// set eyelashes color

mCurrentEffect.callJSMethod("Eyelashes.color", "0 0 0");

// reset eyelashes color

mCurrentEffect.callJSMethod("Eyelashes.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set eyelashes color

currentEffect?.callJsMethod("Eyelashes.color", params: "0 0 0")

// reset eyelashes color

currentEffect?.callJsMethod("Eyelashes.clear", params: "")

JavaScript

// const player = new Player(...)

// set eyelashes color

player.callJsMethod("Eyelashes.color", "0 0 0")

// reset eyelashes color

player.callJsMethod("Eyelashes.clear")

Preview

Drag

A custom Eyelashes texture may be provided by placing a corresponding .png or .ktx file into the effect's folder.

config.js

/* Feel free to add your custom code below */

// set a custom eyelashes texture

Eyelashes.set("eyelashes.png")

Java

// Effect mCurrentEffect = ...

// set a custom eyelashes texture

mCurrentEffect.callJSMethod("Eyelashes.set", "eyelashes.png");

Swift

// var currentEffect: BNBEffect = ...

// set a custom eyelashes texture

currentEffect?.callJsMethod("Eyelashes.set", params: "eyelashes.png")

JavaScript

// const player = new Player(...)

// set a custom eyelashes texture

player.callJsMethod("Eyelashes.set", "eyelashes.png")

Eyebrows (Coming soon...)

Lipstick

Matt

config.js

/* Feel free to add your custom code below */

// set lips matt color

Lips.matt("0.85 0.43 0.5 0.8")

// resets lips color

Lips.clear()

Java

// Effect mCurrentEffect = ...

// set lips matt color

mCurrentEffect.callJSMethod("Lips.matt", "0.85 0.43 0.5 0.8");

// resets lips color

mCurrentEffect.callJSMethod("Lips.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set lips matt color

currentEffect?.callJsMethod("Lips.matt", params: "0.85 0.43 0.5 0.8")

// resets lips color

currentEffect?.callJsMethod("Lips.clear", params: "")

Preview

Drag

Shiny

config.js

/* Feel free to add your custom code below */

// set lips shiny color

Lips.shiny("1 0 0.49 1")

// resets lips color

Lips.clear()

Java

// Effect mCurrentEffect = ...

// set lips shiny color

mCurrentEffect.callJSMethod("Lips.shiny", "1 0 0.49 1");

// resets lips color

mCurrentEffect.callJSMethod("Lips.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set lips shiny color

currentEffect?.callJsMethod("Lips.shiny", params: "1 0 0.49 1")

// resets lips color

currentEffect?.callJsMethod("Lips.clear", params: "")

Preview

Drag

Glitter

config.js

/* Feel free to add your custom code below */

// set lips glitter color

Lips.glitter("0.552 0 0 1")

// resets glitter color

Lips.clear()

Java

// Effect mCurrentEffect = ...

// set lips glitter color

mCurrentEffect.callJSMethod("Lips.glitter", "0.552 0 0 1");

// resets glitter color

mCurrentEffect.callJSMethod("Lips.clear", "");

Swift

// var currentEffect: BNBEffect = ...

// set lips glitter color

currentEffect?.callJsMethod("Lips.glitter", params: "0.552 0 0 1")

// resets glitter color

currentEffect?.callJsMethod("Lips.clear", params: "")

Preview

Drag