i-D×
Chanel

Intangible Matter

An immersive and visually arresting WebGL experience for the new fragrance, Chanel Nº5 L'Eau.

The Fifth Sense is an online platform from Chanel and i-D celebrating the emotion of scent and the way it inspires female creativity. For its latest commission, Intangible Matter, we worked with digital artist Lucy Hardcastle to bring to life her interpretation and creative vision of Chanel’s N°5 L'Eau, through code.

Our challenge was to create four distinct conceptual rooms that allow users to explore different textures, sound designs, and interactions that represent each element of the fragrance in Lucy’s vision.

We started developing each room by prototyping in WebGL, testing textures, lighting effects and animation.

Users begin their journey in Limbo and are faced with four portals, each representative of the rooms found inside 'intangible matter'. A simple drag takes users to a portal of their choice and, upon entering, a unique path will be set for the rest of their experience.

To create the organic movement of the particles found in Mist we used curl noise; a math function used for animating particles inside a vortex.

A combination of complex techniques were required to achieve Molten’s result. For the cloth movement, a blender animation was exported as a three.js morph target animation. Whereas distorted uv coordinates in a fragment shader were used to create the rich swirled texture the material.

In Beam, we created a shattering effect by breaking each of the 20 icosahedron triangles in Maya, so when a pearl is thrown, each face would shatter in a unique formation. For the delicate glass texture, we used a combination of an environment map with a normal map and several point lights to create the shimmer.

To achieve the transparent plastic material for the Soft pillows we used a matcap texture combined with an inner rim transparency. Dynamic animation and three.js curve define the pillow movement resulting in a smooth bounce between the walls.

When the user completes their journey through all four rooms they arrive at The Fifth Space. A soundtrack to the space called “Xiaoya · Blossoming Flowers / 小雅·裳裳者华” has been created by producer Fatima Al Qadiri, who collaborated on the original song with Chris Lee (aka Li Yuchun), through remote recording.