Tangle
Tangle was a remote coworking and gathering tool that was built around a culture-first model as a kinder asynchronous communication and collaboration solution. One of the core features of Tangle was a robust avatar system intended to create a feeling of true presence and identity for users who did not wish to be on camera. The avatars could move, emote, talk in sync with the microphone, and were deeply customizable for self expression and identity.
I was brought on to the Tangle team to build the avatar system, from designing the rig that would support the animations and visuals, to creating the core set of visuals, through to animating the avatar. I was also in charge of creating shaders and post processing effects for dynamic colour, defining and optimizing the asset creation, export, and implementation pipeline, and documenting the guidelines and process to allow contractors to create additional avatar assets.
Marketing asset showing the Tangle space with rooms in an infinite canvas populated by users using avatars and camera views.
Mockup showing avatars in their customization UI.
Users could choose outfits, body and head shape, facial features, hairstyles, accessories, the background, as well as a colour palette for all of the above.
In Unity example of various avatar designs
Mockup showing a variety of avatar designs
In Unity example of avatar reactions
Example of avatar statuses, which were animations and stickers overlaid on top to indicate a user's attention status.
Avatars were split into several types of assets and supporting data. For example, head shape determined the placement of facial features, while hair, outfits, and bodies were dynamically tinted using gradient map shaders.
A lot of thought was put into flexibility with the 2D avatar system, and how to maximize opportunities to mix and match.
This was especially challenging with hair that is strongly tied to identity, but needed to be flexible around headwear and accessories
Backgrounds were treated with post processing effects to allow them to be tinted while minimizing how much each tint affected value and readability.
Examples of several background assets I painted, and an example of the post processing effects applied to tint and crunch down the contrast while preserving value and relative temperature differences.
Internal demo demonstrating templates and scripts allowing artists to process files from Photoshop into Unity in under two minutes.