Pictofit / Web SDK / 7.3.1 / Size Recommendation & Visualisation

Size Recommendation & Visualisation

We’ve explored how to generate custom mannequins and how to mix & match garments on the in the previous chapters. In this chapter, we will have a look at how to get a size recommendation for a garment and how to request an additional “layer” to visualize the fit. The following code requires the compute server to be v1.3.0 or later.

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

Size Visualisation Demo

Creating a Size Recommendation Request

To use the size recommendation & visualisation, we need to make a request to the Pictofit Compute Server. The Pictofit.SizeRecommendationRequestInfo encapsulates all the required parameters and options.

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

There are two pieces of information that we need for this request: An array of Garment3D instances which we want to try on and a BodyModelState which encodes the body pose and shape of the mannequin.

The Body Model State

The first thing required would be the bodyModelState which describes the body shape and the pose. Have a look at the custom mannequin chapter on how to generate a bodyModelState.

The bodyModelState property of the request object can either be set to a Blob holding the data or a string that represents an URL to a body model state file. Therefore, it is possible directly reuse the blob that was generated from a CustomMannequin request or to load a state that is stored somewhere on your servers.

Once the users has finalized his or her mannequin, it is advisable to store the respective assets and link them to the users profile. This allows you to provide it by URL which speeds up the request (the client doesn’t have to download it first and upload it to the Compute Server again since the server can directly fetch it from the provided location).

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

The Garment

To recommend a size, we obviously will also need a garment. This can either be provided as a Garment3D object which then uses the IResourceProvider mechanism or in this case also per URL. For more information on the former, have a look here.

info.garment = new Pictofit.Garment3D("myGarment");
// OR
info.garment = "https://myServer/myGarment.gm3d";

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

info.sizeTableUrl = "http://myServer/.../sizeTable.json";
info.measurementsConfigUrl = "http://myServer/.../sizeRecommendationMeasurementConfig.json";

Triggering the Request

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

const sizeVisualisation = new Pictofit.SizeVisualisation(computeServer, viewer);
sizeVisualisation.requestInfo = info;
const { blob, fitInformation, recommendedSize } = await sizeVisualisation.compute("SizeVisualisationOverlayMesh");

The result of the request contains a recommended size for the provided body shape and garment. You can easily access this information via recommendedSize. The computed visualisation is added as a cascade layer on top and matches this size. This means you’ll need to first compute the tryon for this garment as explained in the previous section. Otherwise you will only see the overlay.

You can also generate the visualisation for a specific size. Therefore, you simply need to provide the desired size tothe request:

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

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


There are also a couple optional parameters that you can set to configure the visual apperance of the fit 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.meshPresentationType = Pictofit.MeshPresentationType.SURFACE;

Textual Fit Information

The request will return a blob which is the overlay model and a dictionary of detailed textual fit information. 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 { blob, fitInformation } = await sizeVisualisation.compute("SizeVisualisationOverlayMesh");

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

How-To: Computing the Recommendation Only

If you are only interessted in the size recommendation but not in the visualisation, you can directly trigger the request on the compute server instance:

let info = new Pictofit.SizeRecommendationRequestInfo();
// add your body model state and garments
const { blob, fitInformation, sizeRecommendation } = await computeServer.requestSizeRecommendation(info, resourceProvider);

The blob result will be undefined in this case but the fitInformation and sizeRecommendation results are valid and can be used. Performing the request in this way speeds it up since the overlay is not computed.

© 2014-2020 Reactive Reality AG