Size Recommendation & Visualisation

The PICTOFiT SDK allows you to compute the recommended size of a product for a certain avatar. This helps your customers to choose the right size when ordering clothing online. Furthermore, our technology can give the user visual & textual feedback on the detailed fit of a product.

To enable these features, we need a garment 2D asset (.garment) with included sizing information. You can use the RRGarment.garmentSizeTable property to check if your asset has this information.

Computing the Recommended Size

The simplest way of using this functionality is to tell the customer the recommended size for this product. Therefore we need an avatar and a specific size table for the product. Measurements are taken from the avatar and then compared to the information stored in the size table to compute a recommendation. All information around the body shape is stored as RRBodyModel3DState object. The RRAvatar.getBodyModel3DState method allows you to access this information. The following snippet shows how to compute the recommended size for a garment/avatar combination.

  func getRecommendedSize(provider: RRAbstractLargeObjectDataProvider,
                          avatar: RRAvatar, garment: RRGarment) -> String {
    let bodyModelState = try! avatar.getBodyModel3DState(provider)
    let sizeRecommendation = RRSizeRecommendation.init(bodyModel3DState: bodyModelState, garmentSizeTable: garment.garmentSizeTable!)
    let recommendedSize = sizeRecommendation.getSizeRecommendation() // e.g. "M" or "32x30"
    return recommendedSize
  }

The actual returned size is a string and can be in different formats like “M” or “32x30” depending on the product.

You can now already go one step further and also give your customer textual feedback on the fit. To access this information, call the RRSizeRecommendation.getFitCategoriesForSizeName method. It returns a dictionary which maps measurements (like e.g. hip_circumference) to an RRSizeRecommendationFitCategory value which can have the following values:

• loose

• slightly loose

• good fit

• slightly tight

• tight

This information together with the corresponding measurement now can be presented to the customer in textual form like for example “The jeans in the selected size will be a little bit loose around your hips” or using icons/visuals to illustrate.

Showing the Heat Map Overlay

Our tech also allows to visualise this information on the product directly in the form of heat maps. This first requires to show the garment on an avatar. Have a look at the section about Virtual Try-On in 2D to learn how that is done. Showing the size hints as heat map overlay is then very simple:

  func visualizeFit(garmentRenderable: RRGarmentRenderable,
                    sizeRecommendation: RRSizeRecommendation)
  {
    let sizeRecommendationRenderable = RRSizeRecommendationRenderable.init()
    try! sizeRecommendationRenderable.setup(with: sizeRecommendation)
    garmentRenderable.sizeRecommendationRenderable = sizeRecommendationRenderable
  }

This will now show the heat map overlay for the recommended size. But you can also show it for a selected size. Therefore, get the list of the available size using RRSizeRecommendationRenderable.getSizeNames and then set the chosen size through RRSizeRecommendationRenderable.setCurrentSizeName.

To hide the overlay, simply set the RRSizeRecommendationRenderable.isHidden property to true. To remove it, set RRGarmentRenderable.sizeRecommendationRenderable to nil.