Interactive Avatar Configurator

After successful capturing and uploading, the data will be processed fully automated by the Pictofit Content Service. The result is an avatar in the form of a .hav3d file that you can configure in terms of body pose and shape using the RRAvatar3DUserAdjustmentsLayout class. After editing, the avatar can be converted to 2D using the RRAvatarConverter which can then be used for mix & match.

To edit an avatar, you will need to create an RRAvatar3D object from a .hav3d file. You now can instantiate a RRAvatar3DUserAdjustmentsLayout object that you then just set as the layout property of an RRGLRenderView instance. The following code snippet shows how to initialize the configurator:

func initializeHeadAvatarEditor(avatar: RRAvatar3D) {
  // Instantiate the editor layout
  self.editorLayout = RRAvatar3DUserAdjustmentsLayout()
  // set the avatar you want to edit
  self.editorLayout!.avatar = avatar
  // Attach the layout to an RRGLRenderView instance you are showing on screen
  self.renderView.layout = self.editorLayout
}

SWIFT

See the API docs for more details on how you can apply poses and modify the body shape using the RRAvatar3DUserAdjustmentsLayout class. To create your own pose and shape presets you will need Pictofit Studio and create a custom RRAvatar3DUserAdjustmentsLayoutConfig file. The SDK already comes with a set of default poses and shape modifiers.

Saving and Loading the Configurator State

The RRAvatar3DUserAdjustmentsLayout class provides functionality to save and load the state of an edited avatar. This is required if you want to allow users to modify the avatar at a later point again. In that case, you also have to store the configurator state alongside with the .hav3d file. The following code snippet shows how you can implement the loading and saving of the editor state:

func loadState(statePath: String) {
  let layoutState = RRAvatar3DUserAdjustmentsLayoutState.load(fromFile: statePath)!
  self.editorLayout = RRAvatar3DUserAdjustmentsLayout(state: layoutState, avatar: self.avatar!, poseAndShapeDataProvider: nil)
  self.renderView.layout = self.editorLayout
}

func saveState(statePath: String) {
  let layoutState = self.editorLayout!.layoutState
  try! layoutState.save(toFile: statePath)
}

SWIFT

Converting to 2D for Mix & Match

After users have finished adjusting their avatar within the configurator, it can be converted to an instance of the RRAvatarclass using the RRAvatarConverter class. The converted avatar is then immediately usable for 2D mix & match. All you are going to need is a properly set up RRAvatar3DUserAdjustmentsLayout that is attached to an RRGLRenderView instance and to load the avatar you want to convert. The resulting 2D avatar will then look exactly the same as seen in the configurator. The following code snippet shows how to do it:

func convertAvatar() -> RRAvatar {
  let avatarConverter = RRAvatarConverter.init(renderView: self.renderView, layout: self.editorLayout!)
  let avatar = try! avatarConverter.convertTo2DAvatar()
  
  return avatar
}

SWIFT

Custom Poses

All components around avatar capturing are already preconfigured so that users have a great experience. Still our SDK allows advanced customisation like custom poses. The poses can be created for you by the PICTOFiT Content Team. For each pose, you’ll receive a .bm3dpose file which needs to be shipped with our your app. The following snippet shows how to load a custom pose.

  func setPose(layout: RRAvatar3DUserAdjustmentsLayout, poseFilePath: String)
  {
    let pose = RRBodyModel3DPose.load(fromFile: poseFilePath)!
    try! layout.setBodyModelPose(pose)
  }

SWIFT