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.

/my-scene/scene.json
/my-scene/building.obj
/my-scene/building-texture.jpg
...
CODE

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
CODE

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
CODE

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 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 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);
JS

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");
JS

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();
JS

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.