Chanel Intangible Matter
WebGL on Canvas 11.2017
WebGL on Canvas 11.2017
An artistic celebration of female creativity.
The Fifth Sence is a collaborative project that celebrates female creativity by Chanel and i-D. Lucy Hardcastle, an artist who was finishing her masters at the Royal College of Art in London in 2017 was commissioned by i-D to create a response to Chanel’s upcoming No.5 L’Eau.
Lucy’s has a unique visual quality to her work, renderings look like physical objects and vice versa. Her love for experimenting with various material properties often makes me question if the image is a photo or digital rendering.
Lucy partnered with Stink Studios to produce an interactive immersive digital space that explored the virtual elements of the fragrance. It was to my delight in the first meeting our team had with Lucy that she referenced VOID, a project that I worked on at Hi-ReS!.
My role on the project was Lead WebGL Developer. Aside from managing a team of creative and frontend developers, I worked closely with Lucy to plan out the interactions for each space and to ensure her art direction is realised within the constraints of WebGL and device performance.
Before we began developing the main experience I spent 3 weeks creating prototypes that explored technical and creative ideas which covered: camera transitions, material effects, particle and liquid simulations. Lucy planned on having 5 rooms within the experience and the majority of these rooms would feature unique content and interactivity.
The first room the user enters is Limbo, what would typically act as a menu on a website would be a spherical gallery of portals. Upon clicking on the portal’s title the user would be taken into the room.
Soft, a room with foamy walls invites the user to pick up and throw squishy pillows around. As pillows start to bounce from wall to wall feathers lightly fall from the ceiling.
This room presented several challenges during development. When the user picks up and releases a pillow I dynamically calculate a looping animation path based on the ray intersection where the pillow lands. Upon impact a mask texture is drawn to concave the wall surface. This is done by calculating the UV intersection of where each animation path starts and ends. This visually creates a more believable connection between the two objects.
Mist presents the chemical reactions found within the fragrance. A vortex of particles swirls around the user in a dark empty space. Shimmering bubbles float upwards with small iridescent pearls inside. Upon interacting with the bubbles a ripple is sent through the surface. After several clicks the bubble dissipates into particles which trigger a chemical reaction above.
The surrounding particles use curl noise for it’s spatial distribution, the turbulence of the algorithm creates an interesting visual vortex alluring the user to look around the space The chemical reaction triggered above uses a vertex based voronoi implementation to create a bubbly animated surface.
Beam transports the user into a geometric space filled with pearls. Faces of the icosahedron shimmer as the user turns around inside this geometric dome. Upon releasing a pearl a surface of the icosahedron is shattered into smithereens. After performing this interaction for the third time they’re transported outside to continue shattering the icosahedron.
The surface shatter animation was made entirely in the vertex shader for optimal performance. Each new face of the icosahedron the user faces will trigger additional pearls to shatter the surface.
Molten was inspired by the process of oil extraction. Upon entering this dark space a large piece of fabric is held up by a marble hoop. Breaking the hoop unveils a mysterious form that invites the user to press down on. Large gloops of gold are released after each press.
Realtime fabric simulations can be quite demanding on web based experiences. Instead we used a pre-animated cloth simulation from Blender. To create more visual folds in the fabric I rotated and swirled the UV’s around creating a more complex and compelling feel.
After visiting the 4 rooms the user unlocks the final “fifth” space. A realtime music video featuring music by Fatima Al Qadiri and vocalist Chris Lee.
This space was technically challenging since it featured assets from all the other rooms. Geometries and shaders are all generated before the music video starts to ensure the performance is smooth from start to end.
Closing Thoughts
Chanel Intangible Matter felt like the spiritual successor to VOID. A space filled with abstract shapes and unique interactions that invites the user to experience it their own way. It was an absolute delight to work with Lucy Hardcastle on this project, aside from our shared passion for digital art we formed a unique friendship all centered around the creativity of women 🖤 .