Scenes with parallax enable a 3D experience solely based on 2D data. Check out this demo to see the feature in action. You can also find the source code for it in our sample repository.

In a nutshell, you need to follow these steps:

  1. Create a Pictofit.SceneTryOn2D instance

  2. Load a scene by calling loadScene() on your Pictofit.SceneTryOn2D instance

  3. Create a Pictofit.Avatar2D

  4. Create an array of Pictofit.Garment2D

  5. Provide the avatar and the garments to a Pictofit.SceneTryOn2D instance

  6. Call showTryOn() on your Pictofit.SceneTryOn2D instance

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.


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:


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:


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. and then accesses the assets of a specific scene/avatar/garment through an identifier. In the example garment from above, the identifier would be my-garment.

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 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(computeServer, viewer);

Creating an avatar and garments for the try-on is also very simple based on their identifiers:

let avatar = new Pictofit.Avatar2D("my-avatar", viewer);
let garment1 = new Pictofit.Garment2D("my-garment1", viewer);
let garment2 = new Pictofit.Garment2D("my-garment2", viewer);

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 Pictofit.SceneTryOn2D property avatar or 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 showTryOn() again.