VirtualDressingRoom2D
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.
![](../../__attachments/2616426513/sample-mixmatch2d.png?inst-v=3247bf35-2b53-488b-85d1-7f97c1d5130b)
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>
The VirtualDressingRoom2D
component is the easiest way to implement a virtual try-on in your web shop. It’s a very lightweight component as the final result is an image and all the heavy lifting is done by the compute server. Please check out the parent section for a general description
To create a new VirtualDressingRoom2D
use the appropriate method provided by the VirtualDressingRoomFactory
:
const dressingRoom = Pictofit.VirtualDressingRoomFactory.createDressingRoom2D(webViewer, computeServer);
Scenes
The concept of scenes does not apply for the VirtualDressingRoom2D
as it is using the Slot Layout under the hood. Therefore you cannot set an IScene
in that case.