During this COVID 19, we saw a problem that there are limitations when people want to try new clothes in the Fitting room, it’s hard to imagine all the risks you can get while doing it. Because of that, most people buy their clothes through e-commerce, but new problems occur:

  1. How to measure their body for clothing size, what size they should buy is it M or is it L? It's really hard to decide!
  2. How to know whether or not the clothes that they’ll buy are going to match with their other outfit? “Will it fit? Will it look good for my body? Will it match my style?” That’s the question people ask nowadays

To answer that question we draw some memories from our childhood, a barbie outfit sticker game ( one that always been played by children.

And so with the help of Blender, SparkAR, and a Lil bit of Javascript, we make it a brand new authentic usable Instagram Filter that can change how the future of fashion products, being perceived by its customer.

What it does

You can try different kinds of t-shirt that we have prepare for you, and also add a hat if you like it. The t-shirt is resizeable using the pinch or from UI Slider, and you can also arrange the height position by tap-hold and move it up and down to make sure it fits your body. To change the hat design, just tap on the face to rotate between several hats designed that available.

How we built it

Since our concept is to style the other person, we only enable the effect on the back camera. We use a face tracker to detect the face. We attached the t-shirt and hat 3D-Object as a child of the face tracker. so that their position and rotation will follow the face. Then, we use javascript to customize the rotation of the t-shirt by controlling each of the t-shirt's rig.

We mainly use the patch editor within Spark AR studio version 90 to build the effect. A script with Javascript programming language also used to create more amazing experiences. The 3D objects are modeled using Blender application. We use Spark AR Face References Assets as the size reference to build the 3D object. All of them were done on a personal computer running Windows 10 with Intel Core i5 7th Generation and 16Gb RAM. The effect was tested using Instagram and the Spark AR Player application for Android.

Challenges we ran into

There are 3 main challenges we ran in the process of development

  1. SparkAR not really support double UI Picker,
  2. SparkAR only track the face, it made the outfit position is not smooth, the addition of shoulder track can make the filters looks smoother in the future
  3. The guided instruction option is too limited for the full experience of AR-U-FIT, it will be great if we can have a full customized instruction to help the user explore the full feature of AR-U-FIT.

Accomplishments that we're proud of

We are proud to have a proof of concept of how the #VirtualOutfitting can be done using the help of SparkAR and Instagram Stories, we saw that this could be one of the Instagram filters that have high usability and great potential of future development in the fashion industry.

What we learned

We learned that there still many opportunities that can be explored in the AR industry, this filter can change the customer behavior and the future of the fashion industry especially during and after the COVID 19 era.

What's next for AR-U-FIT

First, we want the #VirtualOutfitting to become a new-normal in the fashion industry, then we want AR-U-FIT to drive changes in how the fashion product is being delivered to the customer in the future.

Built With

Share this project: