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 enables you to give the user visual & textual feedback on the detailed fit of a product.

Check out this demo to see the feature in action. You can also find the source code for it in our sample repository.

Size Visualisation

This section describes how you can show textual and visual feedback about the fit of a garment in a given size on a specific avatar. It is very convenient and easy to use the size recommendation & visualisation feature, all we need to use is the Pictofit.IVirtualDressingRoom interface as it encapsulates all the required handling.

Analog to the virtual try-on, we need to provide an avatar and a garment instance for which we want to get the recommendation and visualisation. Have a look at the section about virtual try-on to learn more about these assets.

// showcase a 3D tryon with fit visualisation
let dressingRoom  = Pictofit.VirtualDressingRoomFactory.createDressingRoom3D(viewer, computeServer);
dressingRoom.avatar = await dressingRoom.createAvatar(new Pictofit.StaticAsset("https://myserver.com/avatars/12354/"));
dressingRoom.garments = [
  await dressingRoom.createGarment(new Pictofit.StaticAsset("https://myserver.com/garments/12354/")),
  await dressingRoom.createGarment(new Pictofit.StaticAsset("https://myserver.com/garments/62356/"))
]

// trigger size visualisation for the first garment and the current avatar
const sizeVisConfiguration = new VDRSizeVisualisationConfiguration();
const sizeInfo = await dressingRoom.enableSizeVisualisation(dressingRoom.garments[0], sizeVisConfiguration);

dressingRoom.refresh();
TYPESCRIPT

The returned object contains the fit information and also the recommended size for the provided avatar and garment. You can access this information via sizeInfo.fitInformation and sizeInfo.recommendedSize.

You can also show the visualisation for a specific size. Therefore, you simply need to provide the desired size to the configuration. The heat map overlay will change accordingly and show the user the fit of a particular size on their avatar.

sizeVisConfiguration.size = "5-XL"; // just an example, size values can look differently
TYPESCRIPT

Please be aware that the identifier for the size is defined in the size table and can look differently.

If the size chart was provided to our Pictofit Content Service, the respective information is already included in the garment. Otherwise you have to specify two resources to make this work. First, the size chart and second a configuration file which maps these values to measurements on the body. The following snipped shows how it’s done.

sizeVisConfiguration.sizeTable = "http://mystorage.com/.../sizeTable.json";
sizeVisConfiguration.measurementsConfig = "http://myystorage.com/.../sizeRecommendationMeasurementConfig.json";
TYPESCRIPT

Textual Fit Information

The sizeInfo.fitInformation is a key-value map where the keys are specific measurements and the values are enums of type FitCategory. You can use this information to also give your users textual feedback about the fit of a certain product.

const response = await sizeVisualisation.compute(sizeVisualisationMeshData);

for (const measurement in response.fitInformation) {
  switch (response.fitInformation[measurement]) {
    case Pictofit.FitCategory.GOOD_FIT:
      // update UI
      break;
    case Pictofit.FitCategory.LOOSE:
      // update UI
      break;
    case Pictofit.FitCategory.SLIGHTLY_LOOSE:
      // update UI
      break;
    case Pictofit.FitCategory.SLIGHTLY_TIGHT:
      // update UI
      break;
    case Pictofit.FitCategory.TIGHT:
      // update UI
      break;
  }
}
TYPESCRIPT

Customisation

There are also a couple optional parameters that you can set to configure the visualisation in terms of color but also the way the overlay is being presented (heat map, point cloud, grid overlay).

// Specify the color to use when visualizing a tight fit.
sizeVisConfiguration.colorTight = BABYLON.Color3.Red();
// Specify the color to use when visualizing a loose fit.
sizeVisConfiguration.colorLoose = BABYLON.Color3.Yellow();
// Specify the way the overlay should be presented.
sizeVisConfiguration.overlayType = Pictofit.OverlayType.SURFACE;
TYPESCRIPT

Size Recommendation Only

There are cases where you might only want the size recommendation without the visual feedback.

As we don’t generate any overlays showing the visual fit of a garment we do not need the Pictofit.IVirtualDressingRoom here. Instead, we can directly handle this through the Pictofit.IGarment interface. As we don’t use the dressing room for this usecase we can use a standalone IAssetFactory implementation to create the actual garment. You can create the corresponding asset factory for 2D and 3D assets using the Pictofit.AssetFactoryFactory and a Pictofit.WebViewer instance. The following lines show you how to do that.

const webViewer = new Pictofit.WebViewer("canvas-id");
const assetFactory2D = Pictofit.AssetFactoryFactory.createAssetFactory2D(webViewer);
const garment = await assetFactory2D.createGarment(new Pictofit.StaticAsset("https://myserver.com/garments/12354/"));
const avatar = await assetFactory2D.createAvatar(new Pictofit.StaticAsset("https://myserver.com/avatars/12354/"));
TYPESCRIPT

The sample shows how it’s done in 2D but it works the same way in 3D.

To trigger the actual size recommendation all we need additionally is a Pictofit.ComputeServer, since the computations are done remotely.

The following snipped shows how it’s done.

const sizeRecConfiguration = new VDRSizeRecommendationConfiguration();
const sizeInfo = await garment.getSizeRecommendation(avatar, computeServer, sizeRecConfiguration);
TYPESCRIPT

In a similar way you can also query which sizes are available for a given garment using the getSizes(computeServer: ComputeServer): Promise<string[]> method.

const sizes = garment.getSizes(computeServer);
TYPESCRIPT