Virtual Dressing Room
The PICTOFiT SDK allows your users to virtually try-on individual pieces, create looks and see how they fit & look on their avatar. Depending on the type of assets, this functionality is available in 2D and 3D. See the respective section about the PICTOFiT Content Service to learn how to create assets of your fashion products.
![](../../__attachments/2670067755/Animated%20GIF-downsized_large-7.gif?inst-v=3247bf35-2b53-488b-85d1-7f97c1d5130b)
Introduction
In order to perform a virtual try-on you first need an avatar and one or more garments. You can also (optionally) customise the background/environment of your virtual dressing room through scenes.
Using these three components, you can conveniently integrate virtual try-on into your web application. The Pictofit.IVirtualDressingRoom
interface defines all required properties and methods to populate the dressing room with content and trigger the try-on, size recommendation and other related features. The example below shows how this is done in just a few lines of code. In the following sections, we explain the different steps involved.
let dressingRoom = Pictofit.VirtualDressingRoomFactory.createDressingRoom3D(viewer, computeServer);
dressingRoom.avatar = await dressingRoom.createAvatar(new Pictofit.StaticAsset("https://myserver.com/avatars/12354/"));
dressingRoom.garments = [
await dressingRoom.createGarment(new Pictofit.StaticAsset("https://myserver.com/garments/12354/")),
await dressingRoom.createGarment(new Pictofit.StaticAsset("https://myserver.com/garments/62356/"))
]
dressingRoom.scene = await dressingRoom.createScene(new Pictofit.StaticAsset("https://myserver.com/scenes/street/"));
dressingRoom.refresh();
Virtual Dressing Room
The VirtualDressingRoom (VDR) is the central compnent which provides the functionality to create an immersive virtual try-on experience with just a few lines of code. All available VDRs implement the same interface IVirtualDressingRoom
as well as the IAssetFactory
. The asset factory makes sure that you instantiate the correct types of garments, avatars and scenes to match your chosen implementation. You still have to be careful about the underlying assets you are using to create them.
To create garments, avatars or scenes, use the IAssetFactory
factory functions:
createAvatar(asset: IAsset): Promise<IAvatar>;
createGarment(asset: IAsset): Promise<IGarment>;
createScene(asset: IAsset): Promise<IScene>;
To set garments, avatar or scenes set the previously created instances to their respective properties:
get garments(): Array<IGarment> | null;
set garments(newGarments: Array<IGarment> | null);
get avatar(): IAvatar | null;
set avatar(newAvatar: IAvatar | null);
get scene(): IScene | null;
set scene(newScene: IScene | null);
There can always only be one avatar & one scene. Setting more than one garment does increase try on computation times. We recommend to not use more then 3-4 garments simultaneously.
Setting any of these properties to null
is also possible if you want to only show the avatar for example after you already set some garments.
Some VDR implementation do place dependencies on some of these properties. For example a Parallax VDR does not allow to show an avatar without a scene.
Once you are done populating your VDR, call IVirtualDressingRoom.refresh()
. This will return a promise when the try-on is done updating / loading. Make sure to block your UI in the meantime. Otherwise the user might trigger another refresh while the dressing room is still loading.
The different implementations take care of all the logic and server communication for you. In order to instantiate the actual dressing room object we provide a Pictofit.VirtualDressingRoomFactory
. Depending on the available assets, we deliver concrete implementations for the following three scenarios:
2D
2D + Parallax
3D
Getting Started
To use the dressing room implementations, we also need to create a Pictofit.ComputeServer
and a Pictofit.WebViewer
instance.
const computeServer = new Pictofit.ComputeServer("https://myComputeServer", "myToken");
const webViewer = new Pictofit.WebViewer("canvas-id");
const dressingRoom = Pictofit.VirtualDressingRoomFactory.createDressingRoom2D(webViewer, computeServer);
The ComputeServer
objects handles the authentication & communication with the server. The WebViewer
is responsible for displaying and rendering the content in the user's browser.
To compute & show the try-on, we need to create a new Pictofit.IAvatar
instance and Pictofit.IGarment
instances. The dressing room interface provides factory methods for creating avatar, garment and scene objects. These methods ensure that the provided assets are of correct type (the 3D dressing room for example requires 3D avatar and 3D garment assets). At runtime, we check the assets and throw an exception if they don’t fit the required type.
dressingRoom.avatar = await dressingRoom.createAvatar(new Pictofit.StaticAsset("https://myserver.com/avatars/12354/"));
dressingRoom.garments = [await dressingRoom.createGarment(new Pictofit.StaticAsset("https://myserver.com/garments/12354/"))];
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 customize the background of a virtual try-on you create an object that implements the Pictofit.IScene
interface and simply set it on the dressing room.
dressingRoom.scene = await dressingRoom.createScene(new Pictofit.StaticAsset("https://myserver.com/scenes/street/"));
To to compute and render the virtual try-on we need to call the refresh(): Promise<void>
method.
dressingRoom.refresh();
Note:
If you use the same webviewer instance on the same page for different usecases make sure to release any existing resources within the dressing room by calling the cleanup(): Promise<void>
method.
dressingRoom.cleanup();
Avatars, Garments and Scenes
The creation of avatars, garments and scenes follow the same principle and can be done conveniently using the Pictofit.IVirtualDressingRoom
implementations. To locate the resources of e.g. an avatar, you need to provide an object that implements the IAsset interface. The following section describes the different options in detail. In most cases, the Pictofit.StaticAsset
class will be the appropriate choice as it allows access to assets through a base URL.
For an avatar this could look like:
const avatar = await dressingRoom.createAvatar(new Pictofit.StaticAsset("https://myserver.com/avatars/12354/"));
For a garment this could be:
let garment = await dressingRoom.createGarment(new Pictofit.StaticAsset("https://myserver.com/garments/12354/"));
And for a scene this could be:
let scene = await dressingRoom.createScene(new Pictofit.StaticAsset("https://myserver.com/scenes/street/"));
Size Recommendation and Visualisation
The PICTOFiT SDK allows you to compute the recommended size of a product for a certain avatar. It is very convenient and easy to use this feature. The Pictofit.IVirtualDressingRoom
provides appropriate methods for this. Have a look at the Size Recommendation & Fit Visualisation section for a detailed description.
Assets
Avatars, garments and scenes are usually created from assets. An asset is basically a collection of the individual components (files). In order to perform all kinds of computations optimally, the information of an avatar or garment is split up into multiple parts, its components, which are used individually instead of having everything saved in one single packet of data. When now instantiating for example a garment, we need to provide access to the respective data. The Pictofit.IAsset
interface defines the required methods. Please check out the page on Assets to learn more.