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
.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
RRAvatar classes. Loading those objects is very easy as you can see in the following snippet.
// Load avatar from file delivered along with the app's resources: let avatarFilePath = Bundle.main.path(forResource: "name", ofType: "avatar") let avatar = RRAvatar.init(fromFile: avatarFilePath!)
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.
let garmentRenderable = RRGarmentRenderable.init(garment: 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.
let renderLayout = RRUserPhotoLayout.init()! self.renderView!.layout = 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.
.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 = [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.
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
RRGarmentSlotenables you to display a garment or even an accessory while the
RRQuadSlot simply displays an image.
let tryonSlot = RRTryOnSlot.init() tryonSlot.frame = self.renderView.bounds tryonSlot.avatarRenderable = avatarRenderable tryonSlot.scalingMode = .scaleToHeight let quadSlot = RRQuadSlot.init() let image = UIImage.init(named: "myimage.png") let imageRenderable = RRQuadRenderable.init(image: RRImage.init(image: image!)) quadSlot.quadRenderable = imageRenderable
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 self.renderView!.layout = RRSceneLayout() let scenePath = Bundle.main.path(forResource: sceneFileName, ofType: "arscene") let binaryFormatProvider = RRBinarySceneGraphFormat.init() let serializer = RRSceneGraphSerializer.init(formatProvider: binaryFormatProvider!)! try! serializer.deserialize(fromPath: scenePath!, renderView: self.renderView)
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.