In a nutshell, you need to follow these steps:
Load a scene by calling
Create an array of
Provide the avatar and the garments to a
Scenes, Avatars and Garments
Similar to virtual try-on in 2D, we first need assets for a scene, an avatar and a garment as starting point. It is the first thing you have to do to create a try-on experience.
A scene asset bundle consists of a
scene.json file describing the scene as well as a set of related assets like
OBJ files and texture images like e.g.
/my-scene/scene.json /my-scene/building.obj /my-scene/building-texture.jpg ...
Avatars can either be created based on an asset bundle or you can create it from a
Pictofit.PersonalisedMannequinConversionResponse which comes in handy if you want to have on-the-fly mannequin creation in your web application and use these mannequins for the scene parallax try-on experience. When creating an avatar from an asset bundle, the bundle needs to include the following assets:
/my-avatar/mesh.obj | mesh.drc /my-avatar/diffuse.jpg /my-avatar/opacity.jpg /my-avatar/backside.jpg /my-avatar/avatar.min.avatar
This asset bundle consists of a mesh that represents the avatar’s geometry as well as three different texture images needed for rendering the mesh properly. Additionally we have a
avatar.min.avatar file which includes the necessary information for our compute server to calculate a virtual fit for garments to be tried-on on this avatar.
Garments can be created from similarly structured asset bundles. The main difference is that there is no mesh in the bundle since the mesh is calculated on-the-fly by the compute server to fit the avatar. The assets needed for garments are the following:
/my-garment/diffuse.jpg /my-garment/opacity.jpg /my-garment/backside.jpg /my-garment/garment.min.avatar
The SDK and the compute server need different files from this bundle and will use the
Pictofit.WebViewer.resourceProvider to generate URLs to access them. The default case is to use a
Pictofit.BaseURLResourceProvider. It allows you to specify a base url (e.g. mystorage.com/data/) and then accesses the assets of a specific scene/avatar/garment through an identifier. In the example garment from above, the identifier would be
When resolving the URL, the resource provider will get the information that e.g. the file
mesh.obj for the garment with identifier
my-garment is needed. This will return a URL that look somewhat like
https://mystorage.com/data/my-garment/mesh.obj for example.
If you need more complex logic that e.g. retrieves the location from a database or generates a pre-signed URL, please have a look at custom resource providers.
Using the SceneTryOn2D class
To create the
Pictofit.SceneTryOn2D instance which provides all the functionality needed to specify a scene, an avatar and a set of garments. To show a try-on with parallax effect you then just need to call
showTryOn(). Given a
Pictofit.ComputeServer and a
Pictofit.WebViewer instance you just need to instantiate it like this:
// create scene try on 2D object let sceneTryOn = new Pictofit.SceneTryOn2D(viewer, computeServer);
Creating an avatar and garments for the try-on is also very simple based on their identifiers:
let avatar = new Pictofit.Avatar2D(viewer, "my-avatar"); let garment1 = new Pictofit.Garment2D(viewer, "my-garment1"); let garment2 = new Pictofit.Garment2D(viewer, "my-garment2");
Based on this it is straight forward to finally show the try-on with parallax using the following code:
await sceneTryOn.loadScene("my-scene"); sceneTryOn.avatar = avatar; sceneTryOn.garments = [garment1, garment2]; await sceneTryOn.showTryOn();
Keep in mind that the order of the garment specifies the layering of the garments. Consider the first garment in the provided array to be tried-on first by the avatar chronologically followed by the others (e.g. having an array provided
[shirt, pants], the shirt would be tucked in into the pants). Whenever setting the
garments, the try-on will get invisible but a loaded scene will stay visible. To show the try-on, you just need to call the
showTryOn() method which triggers the fitting and shows it inside the loaded scene.
To change the scene, just call the
loadScene() method. The try-on will stay visible without the need of calling