Pictofit / Web SDK / 7.3.1 / Mix & Match in 2D

Mix & Match in 2D

The following code requires the compute server to be v1.0.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.

Mix and Match in 2D


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>

Creating a Slot Layout

First we have to create a slot layout instance. This layout holds the different slots which are esentially regions where we can instruct the compute server to render something.

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


Now that we’ve created the layout, we need to specify a set of slots. Each slots defines space in the layout as well as its content.

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 reeference.

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 = [
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 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"

Putting the Layout Together

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,

Triggering the Request

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

Calling compute will replace the current scene with a the 2D rendering defined by the slot layout.

© 2014-2020 Reactive Reality AG