Layers of Genius Behind Layered Clothing

After two years of hard work, this morning we formally launched our new Layered Clothing system, which enables clothing and accessories to fit any avatar body type. Users can now outfit existing Roblox avatars with up to 6 layers of clothing, on top of any existing classic clothing. We are already seeing over 2,000 user created clothing and accessories submitted to the Avatar Shop by the community in just the last few weeks. 

The Layered Clothing system gives our community the power to create never-before-seen clothing and accessory types, and takes avatar combinatorial possibilities to a whole new level. Players can now mix and match an incredible range of body styles and outfits. It mimics the way apparel fits and drapes on people in the real world. Shirts, dresses, sweaters, jackets and pants are now worn in layers that affect and interact with each other. 

The system also sets the stage for user-created bodies. The big challenge in creating any 3D clothing system for Roblox is to design a system that works, not only with the enormous amount of bodies already on the platform today, but the wild and creative avatar bodies we expect our community will create in the future.

The magic of the clothes in this system is that they can stretch to fit any platform character – from a Classic Blocky all the way to a T-Rex –  and it fits nicely on top of multiple layers a character is already wearing.

Finally, this launch represents a “stepping stone” technology for Roblox. It both leverages our recently updated systems like Physically Based Rendering materials, Skinning and Skeleton APIs, but it also sets the stage for our future technologies, like User Generated Bodies, Dynamic Heads, and Machine Learning driven creation systems that will simplify creation in our future.

Behind the Scenes: Building Layered Clothing

The path to building this technology was a complex coding challenge. 

• Our goal was to enable clothing and accessories to fit any avatar body type.

• The solution had to be viable with how Roblox is evolving – including lifelike appearance from every angle, automatic response to user inputs, looking compelling on a mid-range phone screen and being backwards-compatibility with the Roblox environment. 

• Another requirement: the technology needed the ability to become automated and simplified over time to help reduce authoring complexity. Building 3D assets is harder than painting the classic 2D assets, but the way we designed the system allows us to release future updates that help automate and simplify the 3D creation process. This will eventually reduce or possibly even remove the dependence on third party 3D tools.

The closest parallel to existing technology is CGI animation in movies, but that approach isn’t scalable –  each scene, character, and expression is individually drawn by an animator. So we needed to invent something completely new. There isn’t any other way to allow anyone to create CGI-quality clothing that automatically responds to the movement of any arbitrarily sized avatar.

Sergey Makeev, our Senior Technical Director driving and creating a lot of the systems behind Layered Clothing, explained “computationally, when you have two arbitrary 3D meshes, it’s difficult to compute exactly how to fit one over the other without distorting the content or making it simply look ugly. Part of the inspiration came to the team while reading several scientific papers on aerodynamic testing of rockets.” The team observed the way airflow envelopes a rocket in flight, and how small adjustments to the rocket body shape affects airflow and flight efficiency. Then the team looked at automated methods that create new and improved rocket shapes in 3D CAD, and applied that thinking to efficient layering of meshes on top of each other. It is sometimes said that an accomplishment “wasn’t rocket science, really.” Technology for clothing and accessories that fit any avatar body, it turns out, certainly was inspired by rocket science.

The Solution 

The ‘aha’ moment came when our team considered the “abstraction layer” between the two meshes — introducing a new cage layer acting as an outer boundary of the underlying body structure, then interacting with the inner cage of the shirt getting layered on top of the body. This interaction gets even more complicated when the character starts to animate and move around, since the interaction of surfaces, cages and skin becomes exceedingly complex. We found a way to wrap every vertex of one mesh around another, their dimensions governed by the behavior of the abstraction layer. This approach lets users stack items in real time and see the final layering instantly. Just like how adjustments to the rocket shape we observed changes the rocket’s flying behavior through the enveloping air cushion.

To breathe life into the concept, our team also brought the Roblox creator community to the table early, and for the past year we’ve been working with a growing group of developers trying out different approaches to creating layered assets. It was great to bring the community along for the ride as we were creating technologies for new content creation. In the past we would often build our own content first, put it in the catalog, and then have a bit of a gap before creators would be able to join in on the fun. 

This time, we decided that we would enable the community to start building assets along with us. The community feedback was very valuable in understanding the complexity of their creative process and drove some changes in the underlying technology. In the end this collaboration process produced some great results. 

Our CEO and founder, Dave Baszucki (better known as Builderman) coined a word for the output we were looking for from this collaborative process: “combinatorialism.” Combinatorialism is half process, half attitude, and it became a guiding light for our Layered Clothing project. 

We really wanted a community-driven effort leveraging all the awesome tech we’re building, since our goal is to empower creators that make amazing stuff every day.

The Future of Layered Clothing

In the first 5 days of our limited first roll out of Layered Clothing, 14.4 million unique users acquired 74.4 million free jackets. As of this week we now have over 2,000 UGC created assets in the catalog and a tiny fraction of basic assets available for free from Roblox. In this launch, we decided to not charge for any Roblox created initial assets, and leave all the monetized assets to the community.

The core technology powering Layered Clothing has broader utility and can already be used by our community to deform other shapes and objects (for example; car crashes), or reshaping landscapes, or even dressing a tree with clothing.

As we move toward a future of interchangeable digital matter and materials, we look forward to some clever developers using these systems in ways we had not even anticipated.

For now, however, this technology tells a remarkable story in itself — a story I’m so proud to share. It’s exciting to work with visionary people to create a new benchmark in game expression and setting the stage for the future of digital identity.