Mix & match in 3D works analog to 2D and provides the same functionality. Additionally, it allows the customer to see the product from all angles (vs. front and back view). Check out this demo to see the feature in action. You can also find the source code for it in our sample respository.

In a nutshell, you need to follow these steps:

  1. Load your avatar

  2. Create a Pictofit.VirtualTryOn3DRequest

    1. Provide your avatar’s body model state

    2. Provide an array of Pictofit.Garment3D

  3. Trigger the request

Avatars and Garments

Similar to virtual try-on in 2D, we first need assets for an avatar and garment as starting point. In this case, the avatar is the personalised mannequin that the user has created. Alternatively, you can also provide a set of predefined avatars to choose from. How to load the personalised mannequin is described in this section. It is the first thing you have to do to create a try-on experience. You can of course also load a scenery/environment as well too.

Second, we need garment 3D assets for the virtual try-on. Let’s first have a look at the structure of an asset bundle for a garment:

/my-garment/mesh.obj
/my-garment/material.json
/my-garment/diffuse.jpg
/my-garment/garment.min.gm3d
CODE

This asset bundle consists of different files like a material file in our JSON configuration format or the mesh encoded as .obj file. All these files belong to a single garment 3D asset. The SDK and the compute server need different files from this bundle and will use the Pictofit.WebViewer.resourceProvider to generate URLs to access them. The default case is to use a Pictofit.BaseURLResourceProvider. It allows you to specify a base url (e.g. mystorage.com/data/) and then accesses the assets of a specific garment through an identify. In the example from above, the identifier would be my-garment.

When resolving the URL, the resource provider will get the information that e.g. the file mesh.obj for the garment with identifier my-garment is needed. This will return a URL that look somewhat like https://mystorage.com/data/my-garment/mesh.obj for example.

If you need more complex logic that e.g. retrieves the location from a database or generates a pre-signed URL, please have a look at custom resource providers.

Creating a Virtual Try-On Request

To perform Mix & Match, we need to make a request to the Pictofit Compute Server. The VirtualTryOn3DRequestencapsulates all the required parameters and options.

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

To let the compute server know about the avatar, we need to pass the body model state. It holds relevant information about a mannequins shape & pose. This is required for the fitting of the garments. The bodyModelState property of the request object can either be set to a Blob or to a stringthat represents an URL to a body model state file. Therefore, it is possible directly reuse the blob that was generated from a PersonalisedMannequin request or to load a state that is stored somewhere on your servers.

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

Next we need to add the garments we want to use for virtual try-on. Therefore, we need to instantiate Pictofit.Garment3D objects which hold the identifier of the garment and optionally a custom material (this overrides the material which is part of the garment asset bundle). The Garment3D objects are added to the request as an array as can be seen below. The order of the garments defines also the order of the garments on the body. For example, if you add first a shirt and then a pair of pants, the shirt is tucked-in.

info.garments = [
    new Pictofit.Garment3D("garment3"),
    new Pictofit.Garment3D("garment2", "Custom material"), // <-- Optional (preloaded) material that should be used for rendering
];
JSON

Now we are ready to execute the request and render the result with a Pictofit.WebViewer instance.

const tryOn = new Pictofit.VirtualTryOn3D(computeServer, viewer);
tryOn.requestInfo = info;
await tryOn.compute();
JS

This creates a new cascade layer for every garment and adds it to the scene. Thereby, you can also unload them easily. Keep in mind that if you want to trigger another request, you need to manually unload the garment layers from the previous request first.