Using the Didimo realtime hair library

alt text

A hairstyle consists of a mesh and a haircap map (texture) to be applied on the didimo head to fill transparency gaps. Each hairstyle is built on top of a reference head at design time, which as a given head shape. When applying hairstyles to a didimo, the mesh needs to be deformed to match the didimo head shape. The SDK includes sample hairstyles.

Project Assets

Our SDK provides support to hair and other deformable accessories. Browsing the project assets, you will find related files under Assets\Didimo\Hair:

- 3D_Models - Contains the meshes for the hairstyles;
- Hairstyles_Buttons - Contains preview images of the available hairstyles;
- Materials - Contains the materials used on the hairstyles;
- Textures - Contains the textures referenced by the materials used for hair;
- Prefabs - Contains ready to use hairstyles. Drag and drop them onto a scene to view them.
            Our sample code uses these prefabs to instantiate hairstyles at runtime.

Sample code

Calling the API method to deform assets

The method is called “DeformHair()” and is responsible for:

  • Retrieving the vertex positions of all the meshes used in the hairstyle;

  • Converting the vertex positions from float to 4 bytes (binary) for optimization purposes;

  • Calling the Didimo API endpoint to deform assets;

  • Reading the response as binary and converting to vertex positions before applying it back to the hairstyle vertex positions.

    void DeformHair()
    {
         byte[] vertexBytes = WriteCurrentVertexPositionsToBinary();
         ServicesRequests.GameInstance.DeformDidimoAsset(
                   coroutineManager, didimoCode, currentHair.name, vertexBytes,
                   (newVertexBytes) =>
                   {
                       ReadCurrentVertexPositionsToBinary(newVertexBytes);
                   },
                   exception =>
                   {
                       coroutineManager.StopAllCoroutines();
                       ErrorOverlay.Instance.ShowError(exception.Message);
                   });
     }
    

    A caveat, when converting bytes, it is important to verify that if the system is not Little-endian you need to reverse each converted value (each float corresponds to a 4-byte array).

    //Convert big endian to little endian
    if (!BitConverter.IsLittleEndian)
    {
       Array.Reverse(xValueByteArray);
       Array.Reverse(yValueByteArray);
       Array.Reverse(zValueByteArray);
    }
    

Manager

The Didimo > Hair folder also contains the script for managing hair (HairConfig), which is used in the sample scene. It is attached to the HairConfig game object under DidimoManagerUI and configured as described next.

alt text

The HairConfig script is exposing relevant fields:

  • Hair_placeholder_parent - a reference to the socket on the didimo rig where hair prefabs should be instantiated at (i.e. the head joint).
  • CurrentHair - the hairstyle currently in used by the didimo (will be changing at runtime);
  • ConfigHairPanel - the UI component used to select a hairstyle;
  • HairPrefabs - a list holding the hair prefabs that are available for instantiation;
  • FeatureDisabled - for disabling hair support.

When a didimo is loaded on the demonstration scene, a scrollable component containing hairstyles previews appears at the bottom of the screen. These images are buttons which have been placed within a scrollable component, located at following the scene hierarchy position:

DiDiMoManagerUI > DidimoMenuUi > HairConfig > HairConfigPanel > HairstylesIcons > Panel > Hairstyles > ScrollViewContainer > HairGallery_ScrollView > ScrollerViewport > Content

Each of these buttons hold a preview image and trigger an event to instantiate the matching hairstyle from the prefabs list. Through this component, you can select a hairstyle that will be deformed on our servers and then applied onto the current didimo. The sample code will also cache the response from the server to eliminate the need of a following identical call.


Last updated on 2020-10-06