Skip to main content

On Face Prefabs

GLTF

"faces": [
{
"gltf": {
"@mesh": "path/to/gltf/model",
"rotation": "0 0 0",
"scale": "1.0 1.0 1.0",
"translation": "0.0 0.0 0.0",
"animation": {
"name": "Animation 1",
"mode": "loop",
"seek_position": 100
},
"@use_physics": false,
"gravity": "0.0 -1000.0 0.0",
"bones": {
"bone_1": 1.0,
"bone_2": 0.0,
"bone_3": 1.0,
"bone_4": 0.0,
"bone_5": 1.0
},
"colliders": [
{
"center": "0. 0. 0.",
"radius": 100.0
},
{
"center": "10. 110. 420.",
"radius": 650.0
},
{
"center": "14. 300. 156.",
"radius": 10.0
}
],
"constraints": [
{
"from": "bone_1",
"to": "bone_2",
"distance": 10.0
},
{
"from": "bone_2",
"to": "bone_3",
"distance": 50.0
},
{
"from": "bone_3",
"to": "bone_4",
"distance": 30.0
},
{
"from": "bone_4",
"to": "bone_5",
"distance": 60.0
}
],
"damping": 0.99
}
// ...
}
// ...
]

Place a 3D model in the GLTF format on the face.

ParameterDescriptionOptionalDefault Value

@mesh

Path to a GLTF model. Note the leading @ in the parameter, it is mandatory. Supported formats: .glb, .gltf. Note that all included files, such as GLTF model, shaders, textures, sounds (if there are any), must be located in one folder.

++

rotation

Rotation angles (in degrees) over X, Y, Z axes. Note the default value.

`${props.title} icon`

"-90 0 0"

scale

Scale along X, Y, Z axes.

`${props.title} icon`

"1 1 1"

translation

Translate the model along X, Y, Z axes (in millimetres).

`${props.title} icon`

"0 0 0"

animation

Play animation from GLTF file. All keys are optional (in most cases just empty object is enough to play the default animation).

Parameters:

name - Select animation from file by name.

seek_position - Where to start animation relatively from the start position (in ms).

mode - ("off" | "loop" | "once" | "once_reversed" | "fixed") - how to play the animation selected by "name".

`${props.title} icon`

{}

@use_physics

Load GLTF with physics simulation. Note the leading @ in the parameter, it is mandatory.

`${props.title} icon`

false

gravity

Sets gravitation vector along X, Y, Z axes.

`${props.title} icon`

"0 0 0"

bones

Sets bones inversed mass. Object, where key is a name of bone and parameter is an inversed mass.

`${props.title} icon`

[]

colliders

Add sphere colliders for physical bones. Array of objects, each object is a separate collider.

Parameters:

center - X, Y, Z coordinates of the center of sphere.

radius - float radius of the sphere.

`${props.title} icon`

[]

constraints

Add constraint between two bones. Array of objects, each object is a one constraint.

Parameters:

from - "from" bone name.

to - "t" bone name.

`${props.title} icon`

[]

damping

Damping parameter for physics simulation, good values usually are in [0.9-1.0] range.

`${props.title} icon`

0.99

note

To create a 3D model in GLTF format for use in the effect, it is recommended to use our head geometry as a template. If the model is created without our head geometry, it the scale must be set to 0.1 and the rotation set to -90 degrees over the X axis in the prefab.

Video Texture

"faces": [
{
"video_texture": {
"@mesh": "path/to/gltf/model",
"use_separate_alpha": true,
"video": "path/to/video/texture",
"alpha": "path/to/video/texture/alpha",
"rotation": "0 0 0",
"scale": "1.0 1.0 1.0",
"translation": "0.0 0.0 0.0",
}
// ...
}
// ...
]
ParameterDescriptionOptionalDefault Value

@mesh

Path to a GLTF model. Note the leading @ in the parameter, it is mandatory. Supported formats: .glb, .gltf. Plane quad is set by default.

`${props.title} icon`

``

use_separate_alpha

If provided video will be combined (common video on the left and video's alpha on the right) this field must be set to false. If there will be two separate videos (common video and alpha) this field must be set to true.

++

video

Path to a video texture file. Note that if use_separate_alpha is set to false, this video must be split in half: left is the common video and right is the video's alpha. Information about supported formats can be find here video formats.

++

alpha

Path to a video texture alpha file. Note that if use_separate_alpha is set to true, this video will be used as the alpha for the video. Information about supported formats can be find here video formats.

`${props.title} icon`

``

rotation

Rotation angles (in degrees) over X, Y, Z axes. Note the default value.

`${props.title} icon`

"-90 0 0"

scale

Scale along X, Y, Z axes.

`${props.title} icon`

"1 1 1"

translation

Translate the model along X, Y, Z axes (in millimetres).

`${props.title} icon`

"0 0 0"

Earrings

"faces": [
{
"earrings": {
"@mesh_left": "path/to/left/gltf/model",
"@mesh_right": "path/to/right/gltf/model",
"@use_physics": true,
"animation": {
"name": "static",
"mode": "fixed"
},
"scale": "1 1 1",
"bones_in_mv_space": false,
"gravity": {
"left": "0.0 -1800.0 0.0",
"right": "0.0 -1800.0 0.0"
},
"damping": {
"left": 0.99,
"right": 0.99
},
"bones": {
"left": {
"Bone_L_1": 0.0,
"Bone_L_2": 1.0,
"Bone_L_3": 1.0,
"Bone_L_4": 1.0,
"Bone_L_5": 1.0
},
"right": {
"Bone_R_1": 0.0,
"Bone_R_2": 1.0,
"Bone_R_3": 1.0,
"Bone_R_4": 1.0,
"Bone_R_5": 1.0
}
}
}
// ...
}
// ...
]

Place two 3D models of earring in GLTF format on the each ear.

ParameterDescriptionOptionalDefault Value

@mesh_left

Path to the left earring GLTF model. Note the leading @ in the parameter, it is mandatory. Supported formats: .glb, .gltf. Note that all included files, such as GLTF model, shaders, textures, sounds (if there are any), must be located in one folder.

++

@mesh_right

Path to the right earring GLTF model. Note the leading @ in the parameter, it is mandatory. Supported formats: .glb, .gltf. Note that all included files, such as GLTF model, shaders, textures, sounds (if there are any), must be located in one folder.

++

@use_physics

Load GLTF models with physics simulation. Note the leading @ in the parameter, it is mandatory.

`${props.title} icon`

true

scale

Sets scale along X, Y, Z axes. Note if the same scale is needed for both earrings, this field is just a string. Otherwise, it is an object containing left and right fields, which are strings.

`${props.title} icon`

"1 1 1"

animation

Play animation from GLTF files. All keys are optional (in most cases just empty object is enough to play the default animation). Note if the same animation is needed for both earrings, this field is a object with the corresponding properties. Otherwise, it is an object containing left and right fields, with the needed properties.

Parameters:

name - Select animation from file by name.

seek_position - Where to start animation relatively from the start position (in ms).

mode - ("off" | "loop" | "once" | "once_reversed" | "fixed") - how to play the animation selected by "name".

`${props.title} icon`

{}

gravity

Sets gravitation vector along X, Y, Z axes. Note if the same gravity is needed for both earrings, this field is just a string. Otherwise, it is an object containing left and right fields, which are strings.

`${props.title} icon`

"0 0 0"

bones

It sets the bones' inverse mass. The object, where the key is the bone's name and the parameter is the inverse mass. These can be the same for the left and right earrings, or you can specify different settings for each using the right and left fields.

`${props.title} icon`

[]

damping

Damping parameter for physics simulation, good values usually are in [0.9-1.0] range. Note if the same damping is needed for both earrings, this field is just a integer. Otherwise, it is an object containing left and right fields, which are integers.

`${props.title} icon`

0.99

note

Each field can be specified separately for each ear, or identically for both ears at once. For example, the scale can be specified the same for both:

"scale": "1 1 1",

Or it can be specified separately for each ear:

"scale": {
"left": "0.5 0.5 0.5",
"right": "1 1 1"
}

Or it can be specified just for the left earring:

"scale": {
"left": "0.5 0.5 0.5"
}

Action Units

"faces": [
{
"action_units": {},
// ...
}
// ...
]

Enable action units from a GLTF model.

Eyes Whitening

Usage

"faces": [
{
"eyes_whitening": {
"strength": 1.0
}
// ...
}
// ...
]

Makes the look more expressive by whitening the eyes.

ParameterDescriptionOptionalDefault Value

strength

Eyes whitening. Float number in the range [0.0, 1.0].

++

Preview

Right image compareLeft image compare
Drag

Eyes Flare

Usage

"faces": [
{
"eyes_flare": {
"strength": 1.0
}
// ...
}
// ...
]

Apply flare to the eyes.

ParameterDescriptionOptionalDefault Value

strength

Flare brightness. Float number in the range [0.0, 1.0].

++

Preview

Right image compareLeft image compare
Drag

Teeth Whitening

Usage

"faces": [
{
"teeth_whitening": {
"strength": 1.0
}
// ...
}
// ...
]

Apply whitening to the teeth.

ParameterDescriptionOptionalDefault Value

strength

Teeth whitening. Float number in the range [0.0, 1.0].

++

Preview

Right image compareLeft image compare
Drag

Softlight

Usage

"faces": [
{
"softlight": {
"strength": 1.0,
"texture": "path/to/file"
}
// ...
}
// ...
]

Apply softlight to the face.

ParameterDescriptionOptionalDefault Value

strength

Softlight strength. Float number in the range [0.0, 1.0].

++

texture

Path to custom softlight texture.

`${props.title} icon`

``

Preview

Right image compareLeft image compare
Drag

Morphing

Morph (i.e. deform) certain parts of the face.

Usage

"faces": [
{
"morphing": {
"eyebrows": {
"spacing": 0.6,
"height": 0.1,
"bend": 1.0
},
"eyes": {
"rounding": 0.6,
"enlargement": 0.3,
"height": 0,
"spacing": 0.3,
"squint": 0.3,
"lower_eyelid_pos": 0,
"lower_eyelid_size": 0,
"down": 0,
"eyelid_upper": 0,
"eyelid_lower": 0
},
"face": {
"narrowing": 0,
"v_shape": 0,
"cheekbones_narrowing": 0,
"cheeks_narrowing": 0,
"jaw_narrowing": 0,
"chin_shortening": 0.3,
"chin_narrowing": 0,
"sunken_cheeks": 0.0,
"cheeks_jaw_narrowing": 0,
"jaw_wide_thin": 0,
"chin": 0,
"forehead": 0.3
},
"nose": {
"width": 0.3,
"length": 0.2,
"tip_width": 0.1,
"down_up": 0.1,
"sellion": 0.2
},
"lips": {
"size": 0.4,
"height": 1.0,
"thickness": 0.1,
"mouth_size": 0.2,
"smile": 0.8,
"shape": 0.4,
"sharp": 0.6
}
}
// ...
}
// ...
]

All settings are optional.

Eyebrows

ParameterDescriptionOptionalDefault Value

spacing

Adjusting the space between the eyebrows [-1; 1].

`${props.title} icon`

0.0

heightheight

Raising/lowering the eyebrows [-1; 1].

`${props.title} icon`

0.0

bend

Adjusting the bend of the eyebrows [-1; 1].

`${props.title} icon`

0.0

Eyes

ParameterDescriptionOptionalDefault Value

rounding

Adjusting the roundness of the eyes [0; 1].

`${props.title} icon`

0.0

enlargement

Enlarging the eyes [0; 1].

`${props.title} icon`

0.0

height

Raising/lowering the eyes [-1; 1].

`${props.title} icon`

0.0

spacing

Adjusting the space between the eyes [-1; 1].

`${props.title} icon`

0.0

squint

Making the person squint by adjusting the eyelids [-1; 1].

`${props.title} icon`

0.0

lower_eyelid_pos

Raising/lowering the lower eyelid [-1; 1].

`${props.title} icon`

0.0

lower_eyelid_size

Enlarging/shrinking the lower eyelid [-1; 1].

`${props.title} icon`

0.0

down

Eyes down [0; 1].

`${props.title} icon`

0.0

eyelid_upper

Eyelid upper [0; 1].

`${props.title} icon`

0.0

eyelid_lower

Eyelid lower [0; 1].

`${props.title} icon`

0.0

Face

ParameterDescriptionOptionalDefault Value

narrowing

Narrowing the face [0; 1].

`${props.title} icon`

0.0

v_shape

Shrinking the chin and narrowing the cheeks [0; 1].

`${props.title} icon`

0.0

cheekbones_narrowing

Narrowing the cheekbones [-1; 1].

`${props.title} icon`

0.0

cheeks_narrowing

Narrowing the cheeks [0; 1].

`${props.title} icon`

0.0

jaw_narrowing

Narrowing the jaw [0; 1].

`${props.title} icon`

0.0

chin_shortening

Decreasing the length of the chin [0; 1].

`${props.title} icon`

0.0

chin_narrowing

Narrowing the chin [0; 1].

`${props.title} icon`

0.0

sunken_cheeks

Sinking the cheeks and emphasizing the cheekbones [0; 1].

`${props.title} icon`

0.0

cheeks_and_jaw_narrowing

Narrowing the cheeks and the jaw [0; 1].

`${props.title} icon`

0.0

jaw_wide_thin

Jaw wide/thin [0; 1].

`${props.title} icon`

0.0

chin

Face chin [0; 1].

`${props.title} icon`

0.0

forehead

Forehead [0; 1].

`${props.title} icon`

0.0

Nose

ParameterDescriptionOptionalDefault Value

width

Adjusting the nose width [-1; 1].

`${props.title} icon`

0.0

length

Adjusting the nose length [-1; 1].

`${props.title} icon`

0.0

tip_width

Adjusting the nose tip width [0; 1].

`${props.title} icon`

0.0

down_up

Nose down/up [0; 1].

`${props.title} icon`

0.0

sellion

Nose sellion [0; 1].

`${props.title} icon`

0.0

Lips

ParameterDescriptionOptionalDefault Value

size

Adjusting the width and vertical size of the lips [-1; 1].

`${props.title} icon`

0.0

height

Raising/lowering the lips [-1; 1].

`${props.title} icon`

0.0

thickness

Adjusting the thickness of the lips [-1; 1].

`${props.title} icon`

0.0

mouth_size

Adjusting the size of the mouth [-1; 1].

`${props.title} icon`

0.0

smile

Making a person smile [0; 1].

`${props.title} icon`

0.0

shape

Adjusting the shape of the lips [-1; 1].

`${props.title} icon`

0.0

sharp

Lips sharp [0; 1].

`${props.title} icon`

0.0

Preview

Right image compareLeft image compare
Drag

Eyes

Eyes recoloring.

Usage

"faces": [
{
"eyes": {
"eyes": "0 0.2 0.8 0.64",
"corneosclera": "1 1 1 1",
"pupil": "0 0 0 1"
}
// ...
}
// ...
]
ParameterDescriptionOptionalDefault Value

eyes

Eyes (i.e. iris) color. See note about color format above.

`${props.title} icon`

"0 0 0"

corneosclera

Corneosclera ("sclera" in everyday language) color.

`${props.title} icon`

"0 0 0"

pupil

Pupil color. See note about color format above.

`${props.title} icon`

"0 0 0"

Preview

Right image compareLeft image compare
Drag

Hair

Hair recoloring. Usually one parameter is used to set the hair color:

"faces": [
{
"hair": {
"color": [
"0.19 0.06 0.25 1.0"
]
}
// ...
}
// ...
]

But hair recoloring supports up to 5 parameters to make vertical colors gradient. Here is the example with 2 color parameters:

"faces": [
{
"hair": {
"color": [
"0.19 0.06 0.25 1.0",
"0.09 0.25 0.38 1.0"
]
}
// ...
}
// ...
]
ParameterDescriptionOptionalDefault Value

color

Apply solid color if one element supplied or gradient recoloring if array (like stands in the sample). See note about color format above.

`${props.title} icon`

"0 0 0 0"

Preview

Right image compareLeft image compare
Drag

Hair Strands

Hair strands recoloring. Supports from 1 to 5 colors parameters to recolor different strands.

"faces": [
{
"hair_strands": {
"color": [
"0.80 0.40 0.40 1.0",
"0.83 0.40 0.40 1.0",
"0.85 0.75 0.75 1.0",
"0.87 0.60 0.60 1.0",
"0.99 0.65 0.65 1.0"
]
}
// ...
}
// ...
]
ParameterDescriptionOptionalDefault Value

color

Apply colors to hair strands. Supports up to 5 different colors in array. You can also provide one element.

`${props.title} icon`

"0 0 0 0"

Preview

Right image compareLeft image compare
Drag