2D

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.

Avatars and Garments

The main ingredients to this are .garment and .avatar files. Both can be generated from images using the Pictofit Content Service. These files are smart objects which contain a visual representation as well as semantic information about the respective entity. The counterparts in code are the RRGarment and RRAvatar classes. Loading those objects is very easy as you can see in the following snippet.

// load the avatar data from a file in the app module asset folder
val avatarFilePath = "myAvatar.avatar"
val avatar = RRAvatar.createFromAsset(avatarFilePath)

The RRGarment and RRAvatar are container classes for storing the information about the respective object in memory. To display such objects, we need to create the corresponding renderable as well.

val garmentRenderable = RRGarmentRenderable.createWithGarment(garment)

Using Renderables and Layouts

Now to actually render a virtual try-on of garments on an avatar, we need to first create a try-on layout and then assign it to the render view. The layout takes care of setting up the camera and placing the content in the scene as well as managing input events if necessary.

Every layout that supports this functionality is derived from RRAbstractTryOnLayout. For this example, we’ll create a RRUserPhotoLayout which simply displays the avatar screen-filling within the view.

val renderLayout = RRUserPhotoLayout.create()!!
renderView.setLayout(renderLayout)

Try-on layouts provide a .avatarRenderable and a .garmentRenderables property to define the respective renderable to be display. Additionally to the scene setup, the layout manage certain events like switching the avatar and making sure that the garments are applied to the new avatar for example. This gives you a lot of convenience since you don’t have to take care of these events.

Note that .garmentRenderables is an array. This means that you can specify multiple garments to combine them into an outfit. The order within the array defines the layering of the garments. You can think of the index as of the order in which you put on the cloths. Our virtual fitting engine correctly computes the effects of the physical interaction between garments (e.g. tucking in a shirt). Now let’s put all of this together to actually render an outfit.

renderLayout.avatarRenderable = avatarRenderable
renderLayout.garmentRenderables = arrayListOf<RRGarmentRenderable>(pantsRenderable, shirtRenderable)

Play around with this by, for example changing the order of the garment renderables to see the effect. Computing the virtual fit is very fast. This means that you can allow your users to interactively create their outfit within your application. But you can also use this feature to generate on-model images of single garments or outfits for recommendations, campaigns or tailored ads.

Slot Layout

The RRSlotLayout allows you to arrange avatars, garments and also accessories any way you want. This gives you freedom to create collage-style renderings or to annotate the try-on with visual elements. The RRSlot base class defines properties which tell the rendering engine how to position the slot and how to scale its content. Different types of slots provide different functionality. The RRTryOnSlot allows you to place an avatar with virtually fitted garments. The RRGarmentSlot enables you to display a garment or even an accessory while the RRQuadSlot simply displays an image.

val tryonSlot = RRTryOnSlot.create()!!
tryonSlot.frame = Rect(0, 0, renderView.width, renderView.height)
tryonSlot.avatarRenderable = avatarRenderable
tryonSlot.scalingMode = RRScalingMode.SCALE_TO_HEIGHT

val quadSlot = RRQuadSlot.create()!!
val image = RRImage.createFromAsset("myimage.png")!!
val imageRenderable = RRQuadRenderable.createWithImage(image)!!
quadSlot.quadRenderable = imageRenderable

Scene Layout

Scenes allow you to create virtual environments in which users can see themselves and mix & match outfits. These scenes can be stylized or resemble actual events and locations. Furthermore, this layout enables the parallax effect which allows the user to tilt the camera slightly and thereby creates a 3D-like effect.

Scenes can be generated by the PICTOFiT Content Team. The samples contain a few assets for you to play around. The following snippet shows how to load a scene.

// load the scene from the .arscene file
renderView.setLayout(RRSceneLayout.create()!!)
val scenePath = "sceneFileName.arscene"

val binaryFormatProvider = RRBinarySceneGraphFormat.create()!!
val serializer = RRSceneGraphSerializer.createWithSceneGraphFormat(binaryFormatProvider)!!

serializer.deserializeFromAsset(scenePath, this.renderView)

Manual Setup

You can also manually setup your environment. The PICTOFiT SDK comes with a full rendering engine that can be configured in various ways to give you the freedom to display your content in any way you like. In a nutshell, this requires that you set up a RRCamera and assign it to your render view and place the content accordingly.

Please keep in mind that in this case, the assets are in 2D and therefore actually flat. Place your camera orthogonally to them to make sure they look good. Depending on the use case, it might also make sense to use an orthogonal camera. Have a look at the RRCamera.setOrthogonalFrame method for this.