2D

The mix & match feature allows you to virtually create outfits by combining different garments on an avatar. The garments are fitted to the avatars body in a realistic way creating a rendering of the outfit which is often not distinguishable from a photo.

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 uses the GUI extension of the BabylonJS engine. Therefore, make sure to add it to your html header. You may use any other CND of your choice as well.

<script src="https://cdn.jsdelivr.net/npm/babylonjs-gui@4.2.0/babylon.gui.min.js"></script>

Avatars and Garments

The main ingredients to this are .garment and .avatar files. Both can be generated from images using the Pictofit Content Service. These files are smart objects which contain a visual representation as well as semantic information about the respective entity.

You need to host them so that they are accessible via URL by the compute server.

Virtual Dressing Room 2D

The VirtualDressingRoom2D 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.

To create a new VirtualDressingRoom2D 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.VirtualDressingRoom2D(computeServer, webViewer);

To show the try-on we need to create a new Avatar2D instance and Garment2D instances.

dressingRoom.avatar = new Pictofit.Avatar2D('avatar1', webViewer);
dressingRoom.garments = [new Pictofit.Garment2D('garment1', webViewer)];

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.

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

dressingRoom.refresh()

Using the Slot Layout

The VirtualDressingRoom2D 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.

The Pictofit.SlotLayout allows you to arrange avatars, garments and also accessories any way you want. This gives you freedom to create collage-style renderings or to annotate the try-on with visual elements. The Pictofit.Slot base class defines properties which tell the rendering engine how to position the slot and how to scale its content. Different types of slots provide different functionality. The Pictofit.TryOnSlot allows you to place an avatar with virtually fitted garments. The Pictofit.GarmentSlotenables you to display a garment or even an accessory while the Pictofit.QuadSlot simply displays an image.

First we have to create a slot layout instance:

// create the slot layout instance and set a custom background & size
let slotLayout = new Pictofit.SlotLayout();
slotLayout.backgroundColor = BABYLON.Color3.White(); // use Babylons color class here
slotLayout.size = new Pictofit.Size(viewerWidth, viewerHeight);

For each slot we need to define its location and size by setting the frame property with an instance of type Pictofit.Rectangle. The scalingMode property defines how the content is scaled to its container. Use a value of the Pictofit.ScalingMode enum for this. All available enum values can be found in the API reference.

Try-On Slot

This type of slot computes a virtual try-on for an avatar and a set of garments and renders it to the specified region.

let slot1 = new Pictofit.TryOnSlot();
slot1.frame = new Pictofit.Rectangle(viewerWidth / 2, 0, viewerWidth / 2, viewerHeight);
slot1.scalingMode = Pictofit.ScalingMode.ASPECT_FIT;

slot1.garmentUrls = [
  "http://myServer/garment-1.garment",
  "http://myServer/garment-2.garment"
]
slot1.avatarUrl = "http://myServer/myAvatar.avatar"

Garment Slot

The garment slot can display a .garment file at a defined location. This is handy if you for example want to create a collage without actually computing the try-on for a specific avatar.

let slot3 = new Pictofit.GarmentSlot();
slot3.scalingMode = Pictofit.ScalingMode.ASPECT_FIT;
slot3.frame = new Pictofit.Rectangle(0, viewerHeight / 2, viewerWidth / 2, viewerHeight / 2);
slot3.garmentUrl = "http://myServer/garment-1.garment"

Quad Slot

Quad slots can hold a single image which allows you to customise the rendering by adding e.g. a background to it.

let slot2 = new Pictofit.QuadSlot();
slot2.scalingMode = Pictofit.ScalingMode.ASPECT_FIT;
slot2.frame = new Pictofit.Rectangle(0, 0, viewerWidth / 2, viewerHeight / 2);
slot2.quadUrl = "http://myServer/myImage.png"

Computing the Try-On

Finally, we have to assign the slots to the layout. The order within the array actually defines the z-order as well. Left to right means bottom to top in other words.

slotLayout.slots = [
  slot3, slot1, slot2,
];

Finally, we need to actually trigger the request. The compute server now fetches the referenced data and renders the try-on according to the placement of the slots. The resulting image is then display by the Pictofit.WebViewer instance on your page.

let computeServer = new Pictofit.ComputeServer("https://myComputeServer", "myToken");
let tryOn = new Pictofit.VirtualTryOn2D(computeServer, viewer);
tryOn.layout = slotLayout;
tryOn.compute();