01 - The Challenge
Moncler's City of Genius was a physical event in Shanghai — fashion designers and cultural collaborators, their names literally on the buildings of a metaphorical futuristic city. The ask was to bring that city online: a 3D immersive web experience that captured the scale and visual language of the event for an audience who wasn't there.
The sold vision was a Blender render. Photorealistic glass buildings, reflective water, dynamic lighting. The question was how much of that vision a browser could honour — and what it would take to find out.
02 - The System
PlayCanvas was the runtime environment — chosen for its game engine-like asset and scripting architecture, which made managing a scene of 8–10 distinct glass buildings tractable in a web context. The 3D assets came from two external freelance artists and had to be integrated, optimised, and made interactive within the engine.
The frontend handled swipe and button navigation between buildings, with each building lighting up in sequence. A React-like component approach managed building states — which lights were on, which reflections were active, which names were visible. A tech lead, Eddie Vlagea, handled integration with Moncler's own tech infrastructure for deployment to their site.
The interaction layer — swipe behaviour, momentum, the choreography of how buildings responded to movement — was prototyped iteratively in collaboration with R/GA Global Creative Director Kyle Wheeler, who held the brand relationship with Moncler and reviewed the experience against the sold vision.
The scene wasn't static across the campaign. Each collaborator had a scheduled release, and each release required its own spatial configuration — nine scenes in total, with buildings repositioned and camera angles manually set to ensure the featured collaborator's building was neither blocked nor poorly oriented. Each configuration required its own aesthetic judgment: where the camera landed had to read as intentional, not incidental.
03 - The Decisions
The central problem was reflections. The Blender render showed glass buildings reflecting each other — neighbouring structures, lighting states, the names on the facades. In a game engine like Unity this would be handled by reflection probes. PlayCanvas didn't expose this as a native feature.
The solution was a custom implementation: cameras positioned to capture each building's reflected view, saved as cubemaps and mapped onto the adjacent glass surfaces. With 8–10 buildings, lights turning on and off as the user navigated, the reflected content on each surface had to update in response to its neighbours' states — which meant managing which cameras were active at any given moment, and correcting for mapping mismatches across adjacent faces to keep the reflections reading as physically plausible.
The decision wasn't whether to do this — the visual expectation was set. It was how to do it within the thermal and performance constraints of a browser running on consumer hardware, without the experience degrading or crashing on device.
04 - The Complexity
The interaction design was largely undefined in the Figma. The visual design was complete; how the scene would respond to user input was not. The render video showed building transitions but didn't account for swipe behaviour — should navigation be one building at a time, or momentum-based? And if momentum-based, how would the lighting choreography respond to variable swipe velocity?
The answer wasn't in the brief. I prototyped several approaches and recommended momentum-based swiping with each building briefly lighting up in proportion to the movement curve — a response that felt physically grounded rather than purely mechanical. Kyle Wheeler reviewed the prototypes, gave feedback, and I iterated. The final behaviour was a collaboration: he knew what the brand required, I knew what was buildable, and neither answer existed without the other.
The project began as a prototype and became the production website. The integration into Moncler's own infrastructure was handled primarily through Eddie, but the fidelity expectations didn't change when the scope did — what was prototyped had to hold as a live brand asset for a luxury house.
The nine-scene requirement came in late, closer to deployment. The content and interaction architecture was already built; the configurability had to be layered on top. The spatial composition and camera placement for each configuration was nine separate decisions about what the experience should look like when a new collaborator was featured.
05 - The Evidence
Blender render vs final website
06 - My Contribution
Technical lead on the web experience. Chose PlayCanvas as the runtime environment and built the interactive scene — asset integration, lighting state management, the custom reflection implementation, and the swipe interaction system. Collaborated directly with Kyle Wheeler on the interaction design, prototyping swipe momentum and building choreography where the Figma left gaps. Worked with Eddie Vlagea to manage deployment integration with Moncler's tech team.
Composed and manually set camera angles for nine distinct scene configurations, each tied to a scheduled collaborator release. The positioning required aesthetic judgment per scene — building orientation, sight lines, what was foregrounded — rather than a systematic rule that could be applied uniformly.