Pictofit / iOS SDK / 2.6.2 / Avatar Configurator

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.

Example of the Avatar Configurators

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

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)

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 RRAvatar class 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


All components around avatar capturing are already preconfigured so that users have a great experience. Still our SDK allows advanced customisation which is explained in the subsequent sections.

Automatic Pose Readjustment

This features makes sure that the pose of an avatar changes naturally when users adjust properties like the weight. Automatic Pose Readjustment is enabled by default using a config file that is part of the SDK. You can easily disable it by calling the disablePoseReadjustment method of the RRAvatar3DUserAdjustmentsLayout class.

Automatic Pose Readjustment when changing the avatar's weight.

Depending on the range of certain shape properties and the body pose, it might be necesarry to use a different configuration than the default one. When given a customized configuration file, the following code will enable the behaviour:

func enablePoseReadjustments(configPath: String) {
  let config = RRPoseReadjustmentConfig.load(fromConfigFile: configPath)!
  try! self.editorLayout!.enablePoseReadjustment(config)

Editor Layout Config File

The RRAvatar3DUserAdjustmentsLayoutConfig includes necessary information for using the RRAvatar3DUserAdjustmentsLayout class covering the following things:

  • A set of adjustable morphs
  • A set of pose presets
  • A set of shape presets

For starters, we recommend to not provide any config file to the RRAvatar3DUserAdjustmentsLayout class. In that case, the layout uses a default configuration that comes with the SDK. You can create a template JSON file that shows all possbile settings of the config file using the method createTemplateConfigFile() of the RRAvatar3DUserAdjustmentsLayoutConfig class.

© 2014-2020 Reactive Reality AG