Customizable Shirt

• 

  Starting scene for Customizable Shirt.

• 

  Example of the user interface of Customizable Shirt.

Inspiration

As a team, we liked the upper garment segmentation template provided by Snapchat. We thought it would make an interesting lens if it was more accessible to everyone. By making a lens capable of editing the upper garment, everyone can now enjoy a customizable shirt experience!

What it does

The lens allows the user to alter their upper garment by adding media, adjusting the added media and changing background colors.

How we built it

Built-in Lens Studio, the project revolves around the use of upper garment segmentation. Elements such as the media picker and UI configurator were also implemented to provide the user with a simple yet effective user interface.

With the upper garment segmentation at the core, scripts utilizing JavaScript were used to alter the attributes of the garment within the lens.

Challenges we ran into

Unexpectedly, one of the major challenges was getting the applied media's scale, position, and rotation to display correctly on the upper garment. This problem came down to an initialization problem where the values would report being applied correctly. However, due to the upper garment not being enabled at the start, the initial values for position, rotation and scale would be completely different. This problem was solved by re-applying the required values after enabling the upper garment segmentation.

Accomplishments that we're proud of

Creating a simple and effective user interface for the user. Although it might seem simple, providing a user with an intuitive method of interacting with the lens is challenging. We are proud of the UI presented within the lens and hope everyone that uses the lens finds it easy to navigate.

What we learned

Working on this project has reinforced our JavaScript skills, enabling us to tackle even greater projects in the future.

What's next for Customizable Shirt

More features! There is still room for Customizable Shirt to grow. Future plans include adding the ability to add words/phrases to the upper garment and possibly multiple media files.

Built With

• javascript