By default, the order of the garments passed into the dressing room defines in what layering order the garments will be shown on the avatar. The compute server can apply some corrections to avoid implausible scenarios (e.g. a dress underneath a pair of pants).

The SDK also provides a dressing room logic class which ensures on the client side that outfit combinations are plausible . This class enfroces that similar garments types are replaced by each other (e.g. a pair of pants replaces a skirt) and that combinations make sense. Furthermore, tucked-in garments can be defined by a flag instead of the order in the array which is easier to use for certain applications. Overall, the class allows you to update your UI instantly without having to wait for the compute servers response.

Example snippet:

const tryConvertGarment = async (
  garment: IGarment,
  tuckedIn: boolean
): Promise<IDressingRoomLogicGarmentOptions> => {
  const garmentGroup = await garment.getGarmentGroup();
  if (!garmentGroup) {
    throw new Error(
      "The garment group of a garment must be known to be able to use it in the dressing room logic!"
  return {
    tuckedIn: tuckedIn,
    garment: garment,
    garmentGroupId: garmentGroup,

// usual dressing room setup
virtualDressingRoom.avatar = ...;
virtualDressingRoom.scene = ...;

const logic = DressingRoomLogicFactory.createDressingRoomLogicWithoutVirtualDressingRoom();
logic.addGarment(await tryConvertGarment(garment1, false));
logic.addGarment(await tryConvertGarment(garment2, true));
virtualDressingRoom.garments = logic
    .map((it) => it.garment);

await virtualDressingRoom.refresh();