Skip to main content

How to Create Avatars (Autobone)

This tutorial will guide you on how to create the Avatar effect using the system of joints and animate it with the Autobone shader.

You can also create Avatars using the blendshapes (action units). Please refer to the Example: Action Units example.

Resource preparation#

Avatar model#

Design your avatar effect in any 3D editor. In our example, we import the model of Grinch created in the MAYA 3D editor. The source files of the effect are available per client’s request. Please, get in touch with your sales manager.

Joints#

In this example we animate avatar emotions using the system of joints. We position the joints on the 12 key points of the face and skin them to the corresponding areas on the avatar model.

Head base model and Face mesh mask#

To design your effect and make sure it positions correctly on the face or head, use our head model (FBX) and face mesh mask (FBX).

Textures#

We need BaseColor, Roughness, Metallic, Normal textures. We made them in the Substance painter.

To design a lightweight effect and achieve its greater productivity, please, follow our guidance on How to Optimize 3D Face Filters.

Export effect files#

  1. Create Effect Folder and name it.
  2. Create the src folder inside Effect Folder where we place the source files.
  3. Export the geometry and joints as .fbx file to the scr folder. Turn on the animation and skin options when exporting your files.
  4. Export textures from Substance painter.

Effect construction#

  1. Open your effect in the Filter Editor. We see it picked up all the textures in the src folder.
  2. Add HDRI texture for realistic rendering of the objects in the scene. We’ll use it for IBL (image-based lighting).
  3. Refresh the Effects Constructor, and the HDRI texture appears in the TEXTURES tab.
  4. Click ‘Construct’ and the textures in KTX format appear in the effect folder.
  5. Set up the Draw Order of the materials in the Rendering tab. To identify the right draw order for your effect, you may try several options. Generally, we recommend putting transparent materials at the bottom. For our Grinch effect we have the following draw order:
  • Eyes
  • Grinch
  • Teeth
  • Fur
  • Brows
  • Baby
  1. Assign textures to materials and press ‘Construct’. As you see, the avatar doesn’t display emotions, so we need to activate the Autobone option.

Emotion animation with Autobone#

To animate avatars, we use the Autobone utility.

  1. To get the correct bsm2 file, you need to use the bsm2_autobone utility which you can download via the link.
  2. Select the FBX file of your constructed avatar and drag-and-drop it on fbx_bsm2_autobone.bat in the bsm2_autobone utility. It will generate a new file named grinch.bsm2
  3. Copy and replace this file in the built folder of your effect
  4. Copy the autobone.vert file to the build folder too. It’s the vertex shader for the materials.
  5. Open the cfg.toml file in any code editor, even a text editor is ok. Change the vertex shaders of the materials to autobahn.vert for which we need the Autobone option.
    Example: Eye.vert, Grinch.vert, fur.vert, teeth.vert and other → autobone.vert image
  6. To set the strength of your emotion animation, go to the autobone.vert file and change the number in the line #define MORPH_MULTIPLIER 3.0.
    The value of this parameter defines the multiplier of the value that shifts the points on the face. A value of 0 will result in no joint shifts, a value of 1 will shift the joints equally according to the nearest face points.
  7. Save the changes and drag the effect folder into the viewer window. You can now see your avatar is animated.
Last updated on