Manolo Blahnik - The Archives

2022 - 50 years of shoe making on virtual display.

A web based immersive, virtual experience created to celebrate the 50th anniversary of the luxury shoemaker Manolo Blahnik. Rather than a traditional static site or online catalogue, it functions as an interactive virtual museum and archival platform that brings the brand's history, craftsmanship and design philosophy to life through a series of virtual interactive rooms and curated spaces. Including a narrated tour through each room, and a full WCAG 2.1 AA compliant version of the website content.

Project Information

Project duration: 40 weeks.

My roles:

• Technical director / client consultant

• technical artist

• WebGL development

• custom shader coding

• custom tooling

• 3D modeling

• frontend development

• motion graphics

• UI/UX

Tools used:

• VueJS

• ThreeJS

• Node

• PHP

• ImageMagick

• FFmpeg

• VSCode

• Figma

• Photoshop

• Blender

• After Effects

• custom build tools

Development Highlights

The biggest challenge for this project was to make the real time interactive space run smooth on older / midrange mobile devices. Having a smooth decked out realtime WebGL experience running in Safari on an iPhone 7 had our work cut out for us.

Each rooms is built with dynamic data in mind, and adapt their size, layout and design based on the amount and type of content featured. A lot of time went into optimizing the realistic feel of the objects in the spaces. Coding the casted light and shadows of these objects on the surroundings straight into the material shaders, using uniform data of the layout, in combination with SDF functions. Then generate shadows and light spots in the fragment shader to blend into the general lighting baked into the diffuse textures.

In the end we were really happy we invested time into a dynamically generated setup for rooms, instead of a fixed and baked scene, since a lot of content changes happened close to the deadline.

/media/manolo_blahnik_ta/wall_pieces_flat.jpg

All the rooms and their content are procedurally built and laid out on the fly. The object layout, size, lights, floor and wall design depend on the content data for that room. Since every room had a very different design and theme, each room had different approaches towards solving the dynamic creation situations.

Here is an example of how the Friendships room is constructed. Wall parts with different designs are created, but have a straight facade. Since the size of the room can change, the amount of wall parts can change as well. This means that the curve of each part changes with the diameter of the room. The parts are assembled, and the curve of the room applied to the mesh based on the diameter.

/media/manolo_blahnik_ta/channel_packing.jpg

To optimize graphics memory use as much as possible, especially since a lot of visitors use Safari on older iPhones, I had to pack multiple textures into one image using separate color channels. Luck would have it that most rooms have objects with a small color hue range, that can be added on top of the textured data to create the correct color through custom material shaders.

The table in the center of each room was a particular interesting challenge to optimize for older generation iPhones. Since the Manolo Blahnik team was very steadfast on the exact representation of real world objects that were on Mr Blahnik's desk, we had to really go in deep to get it to the right level of expectation.

/media/manolo_blahnik_ta/table_closeup.jpg

For example, the circumference of the table could not have any mesh polygons showing and needed to be perfectly circular at any zoom level. So a custom shader was created to use SDF to calculate the table surface and still use the surface material textures and baked shadows.

Another part was that the different pens and bottles were taking up a lot of memory, so I had to instance the object meshes and materials. Then create custom shaders to give each bottle, the paint within and pens the correct color and slight material property changes, since each paint color would react to light in different ways, and these had to correctly represent Mr. Blahnik's favourite paint colors in real life.

/media/manolo_blahnik_ta/360_shoe_reflections_demo.jpg

Using a screen space projection method the shoes were projected onto a cylinder with inverted faces (showing the inside surface of the cylinder, instead of the outside). This was done to be able to render and project the shadows and surface reflections of the real shoe in the photo, onto the surface of the virtual stand itself. Creating a seamless presentation between the realtime 3D environment and the 2D photo projection of the real shoe.

All the shoes inside the experience are represended by photos of the real shoes. The shoes are rotated 360° degrees, and a photo was taken at 3° steps. Since we were limited on texture memory, we selected the angle of the shoe when standing in front of it. Then adding a certain amount of rotated images, left and right of this angle, to be able to show the shoe from different angles while moving through the virtual spaces.

/media/manolo_blahnik_ta/shoe_atlas_trans_anim.gif

Here you can see an example of a shoe atlas sprite sheet. In this animation you can see that the parts that are transparent aren't fully transparent. This is done to keep the color data inside of the transparent image areas in tact. That way we can project shadows and reflections from the actual photo onto the 3D surface inside of the interactive virtual space that the shoe is standing on.

Manolo Blahnik Proprietary Tools

Automating sophisticated shoe photo masking

/media/manolo_blahnik_ta/mb_tooling_examples.jpg

While working on this project for Manolo Blahnik, there was a request to display 360° views of shoes crafted throughout the 50 years of design.

First we considered to model the shoes in 3D software. But the designs of the shoes are very intricate. There would be +50 shoes featured across all the rooms, and 3D modeling all these shoes would take a lot of time. Plus represent the materials the shoes are made with, using real time rendering, would be challenging.

The second option was to have the media team photoshoot the shoes rotating over multiple photos (360° video), and have a 3rd party cut and mask out the shoes from the photos. Having +50 shoes x 120 photos per shoe, amounts to over 6000 photos to cut and mask out. This would be a lot of work. And all the companies we approached did not give a guarantee it could all be done within the set deadline.

As a backup plan, I started working on a prototype masking and tonemapping tool that's specifically built with the photo composition and intricacies of the shoes in mind. After a few different approaches, it started to create results with good enough quality, that I was confident it would be sufficient for the task, though with some more development time.

The main features inside the tool:

An "smart" algorithm that looks at surrounding pixels and decides if it is part of the shoe or not, with certain biases to tweak per shoe.
Creating a mask atlas for all the photos per shoe, to save all the mask edits in a non destructive way.
Stabilisation feature to line up photos when there is inconsistency in the animation.
Multiple view modes to easily see visual artifacts and the mask edges.
Ability to export the rotation frames as a sprite sheet / atlas or 360° video, to directly use it inside the archive website itself.

In the end this tool gave us the ability to get all the shoes processed on time. Masked, compressed, and exported. To directly work inside the website experience. It saved us a tremendous amount of time and money.