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.

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

This feature builds on top of the virtual try-on feature in 3D and also reuses data from the try-on request to optimise performance. The following listing summarises the process:

  1. Compute a virtual try-on with and avatar and garment of your choice

  2. Create a Pictofit.SizeVisualisationRequest

    1. Provide the body model state of the used avatar

    2. Provide the garment asset

  3. Access the garments mesh from the try-on request

  4. Trigger the size visualisation request and pass the garment mesh

Creating a Size Visualisation Request

To use the size recommendation & visualisation, we need to make a request to the compute server. The Pictofit.SizeVisualisationRequest encapsulates all the required parameters and options.

// create a request object
let info = new Pictofit.SizeVisualisationRequest();
JS

There are two pieces of information that we need for this request. Analog to the virtual try-on request, we need to provide the avatar’s body model state and a Garment3D instance for which we want to get the recommendation and visualisation. Have a look at the section about virtual try-on in 3D to learn more about these assets.

The body model state can be provided as blob or url. The same is true for the garment. If you provide the garment by URL, make sure to point to the garment.min.gm3d file which is part of the Garment 3D web result.

info.bodyModelState = bmStateBlob;
// OR
info.bodyModelState = "https://myServer/mySavedBodyModelState.bin";

info.garment = new Pictofit.Garment3D("myGarment");
// OR
info.garment = "https://mystorage.com/data/mygarment/garment.min.gm3d";
JS

If the size chart was provided to our Pictofit Content Service, the respective information is already included in the .gm3d file. 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.

info.sizeTable = "http://mystorage.com/.../sizeTable.json";
info.measurementsConfig = "http://myystorage.com/.../sizeRecommendationMeasurementConfig.json";
JS

Accessing the Garment Mesh from the Try-On Request

As mentioned in the beginning, we are reusing the garment’s mesh from the try-on request to optimise performance. Therefore, you will need to get the fitted garment mesh data from the request object.

tryOnRequest.garments = [new Pictofit.Garment3D("my-garment")]; // pass one garment (index 0)
const tryOn = new Pictofit.VirtualTryOn3D(computeServer, viewer);
tryOn.requestInfo = tryOnRequest;
const { _, garmentMeshesData } = await tryOn.compute();
const garmentMeshData = garmentMeshesData[0]; // get the mesh data of the garment want to use for the size visualisation
JS

This garmentMeshesData can be used for different sizes of the visualisation. There is no need to do a virtual try on for multiple sizes!

In the next step, we will pass the garmentMeshData into the size visualisation request. Make sure the garment sent to the size visualisation is the same as the one used for the try-on.

Triggering the Request

Once you have assembled your request, you can trigger it and visualise the result.

info.garment = new Pictofit.Garment3D("my-garment"); // same garment as the one used in the try on
const sizeVisualisation = new Pictofit.SizeVisualisation(computeServer, viewer);
sizeVisualisation.requestInfo = info;
const response = await sizeVisualisation.compute("SizeVisualisationOverlayMesh", garmentMeshData);
JS

The result of the request contains a recommended size for the provided body shape and garment. You can easily access this information via response.recommendedSize. The computed visualisation is added as a cascade layer on top of the garment.

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

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

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

Textual Fit Information

The request will return fitInformation which 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("SizeVisualisationOverlayMesh", garmentMesh);

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;
  }
}
CODE

Customisation

There are also a couple optional parameters that you can set to configure the visual appearance of the fit overlay 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.
info.colorTight = BABYLON.Color3.Red();
// Specify the color to use when visualizing a loose fit.
info.colorLoose = BABYLON.Color3.Yellow();
// Specify the way the overlay should be presented.
info.overlayType = Pictofit.OverlayType.SURFACE;
JS