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:


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.

Virtual dressing room 3D

The VirtualDressingRoom3D component is the easiest way to implement a virtual try-on in your web shop. The only things you need to provide is the location of an avatar and garments and the components takes care of the rest for you.. You can find a sample in our demo repository.

To create a new VirtualDressingRoom3D we also need to create a Pictofit.ComputeServer and a Pictofit.WebViewer instance. The dressing room uses the resource provider concept. Therefore, you only provide the identifier of the avatar and garments and the resource provider takes care of providing the actual URL to the assets.

const computeServer = new Pictofit.ComputeServer("https://myComputeServer", "myToken");
const webViewer = new Pictofit.WebViewer("canvas-id");
const dressingRoom = new Pictofit.VirtualDressingRoom3D(computeServer, webViewer);

The avatar for the VirtualDressingRoom3D can either be a Pictofit.PersonalisedMannequinRequest or Pictofit.Avatar3D. The former allows you to create a personalised mannequin on the fly whereas the later loads a stored avatar from your storage service.

// for the Pictofit.PersonalisedMannequinRequest
  bodyModelID: "DAZ_Genesis8Female_default",
  baseShapeType: "Endomorph"

// ...
// and for loading a sotred avatar
const avatar = new Pictofit.Avatar3D("Max", webViewer);

Next we need to set a list of garments to show on the avatar. Please note that garments is an array and that the order within the array defines the layering of the garments. This means that an item at index 1 of the array goes over an item at index 0 in the try-on.

  dressingRoom.garments = [
    new Pictofit.Garment3D("garment-2", webViewer),
    new Pictofit.Garment3D("garment-1", webViewer)

To to compute and render the virtual try-on we need to call the refresh(): Promise<void> method.


Creating a Virtual Try-On Request

The VirtualDressingRoom3D component takes care of handling the logic of the dressing room. If your application requires a different logic, you can also trigger the request by hand as can be seen in this section.

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();

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";

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

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();

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.