3D

Mix & match in 3D works analog to 2D and provides the same functionality. Additionally, it allows the customer to see the product from all angles (vs. front and back view). The main technical difference is that the layouts used with 3D content don’t take care of handling the logic of e.g. switching the avatar for you. This gives you more flexibility but also means you have to handle certain events yourself.

Avatars and Garments

Similar to virtual try-on in 2D, we first need assets for an avatar and garment as starting point. In this case, the required files have the endings .av3d (Avatar 3D) and .gm3d (Garment 3D).

To load and avatar, you need to instantiate a RRAvatar3D object and then create a corresponding RRAvatar3DRenderable object to display it. The following snippet shows how this is done.

let avatarFilePath = Bundle.main.path(forResource: "name", ofType: ".av3d")
let avatar = RRAvatar3D.init(fromFile: avatarFilePath!)

let avatarRenderable = RRAvatar3DRenderable.init(withAvatar3D: avatar!)

Creating the garment renderable(s) works analog to this. Keep in mind that loading the assets can take some time. It might be advisable to load them in a different thread to prevent the UI from blocking or jittering.

Computing the Virtual Try-On

To actually compute the virtual try-on, we need to add the RRGarment3DRenderable instances as child objects of the RRAvatar3DRenderable as can be seen in the next snippet. This is a little bit different to how it’s done with 2D content where the layout takes care of this (amongst other things).

avatarRenderable.addChild(renderable: garmentRenderable!)

You can add multiple garments this way to create a full outfit. The order in which you add them defines the layering of the outfit. For example, if you add a pair of pants first and then a shirt, the shirt will be tucked-out. If you add the shirt first, it will be tucked-in.

Please keep in mind that each garment adds some time to compute the virtual try-on. Even though there is no technical limit on how many garments you can add, it might not make sense from a logical point of view to add more than 3 or 4.

Using Layouts to Display the Content

To now actually display the avatar, we need to setup a camera and place the avatar somewhere in the scene. The easiest way to to this is by using the orbit layout or the ARView. Both take care of the scene setup and the placement of the content for you.

You can also setup the camera by hand and place your content within the scene. Therefore, have a look at the RRCamera class as well as the .transformation property and the respective RRTransformation class of the various RRRenderable classes. Please be aware that this also means you need to implement any user interaction (e.g. movement of the camera) on your own.