MCM
Patricia
![](https://www.datocms-assets.com/107163/1706632851-mcm_bag_3.png)
Agency:
Huge
Role:
- Creative Developer
Project Type:
Web app - Retail
Date:
Dec 2017
Built With:
- HTML
- JavaScript
- Three.js
- GLSL
- Firebase
MCM Patricia was a bag configurator application created for a traveling MCM pop-up store event at the ISETAN Shopping Center in Shinjuku, Japan. Customers used the web application to create a personalized bag in real time and an option to order it at the end of the pop-up store experience.
For this project, I collaborated in parallel with a talented team made up of a great 3D Artist, superstar Visual Designer, and rockstar Web Engineer. Our team developed and optimized the application to run in a modified browser application on an iPad Pro. I built the 3D layer of the bag configurator component using THREE.JS and GLSL shaders.
MCM Patricia Configurator
In-store Bag Configuration Experience
Customers went through a linear process to visualize, customize, and play with the bags before placing their orders at the pop-up store
Real-time Personalization
Real-time normal mapping process implemented to generate an ingrained leather effect for the tags personalization effect
![](https://www.datocms-assets.com/107163/1706566461-mcm_bag_config_1.jpg)
![](https://www.datocms-assets.com/107163/1706566466-mcm_bag_config_2.jpg)
![](https://www.datocms-assets.com/107163/1706633503-mcm_bag_config_2_b.png)
MCM Brand Details
To meet the brand's standards, we meticulously scrutinized the fidelity of the leather grain pattens and color accuracy