CHILE20: Active Theory's Three-World WebGL Campaign for Adidas Originals

Active Theory's 2020 CHILE20 experience for adidas Originals and Foot Locker did something that still holds up: it turned a tracksuit launch into a scroll-driven trip through time. You land on a triptych of colored stripes, each one a doorway. World one is black-and-white grit, soccer graffiti on a street wall, a 1962 World Cup ball on the ground, film grain laid over everything like dust on a projector lens. World two drops you into a pandemic-era present with skateboards on empty streets. World three pushes forward into something stranger and more neon. You can jump between them at any point. The garments rotate in the center of each scene, rendered with the kind of fidelity that makes you forget you're looking at a browser tab.

The technical story underneath is the interesting part. Each garment started as a 500,000+ polygon model with stacks of 4K texture maps. The team crushed those down to mobile-friendly meshes with just a couple of 2K textures, testing workflows through Marvelous Designer, ZBrush, Cinema 4D, and even VDB volume meshing to find the right tradeoff between detail and weight. Normal maps baked from the high-poly originals carry the visual load. The whole thing runs on Active Theory's in-house Hydra engine, a WebGL framework they've been evolving since 2012, and the templated world structure is what makes the fluid cross-world transitions work without blowing up the experience. Built entirely during lockdown, it was one of the first fully digital clothing campaigns at this scale.

The project won Awwwards Site of the Month and a Webby. Poke around the case study on Medium for the full breakdown of the art direction and optimization pipeline. It's a good read on what happens when a studio decides the browser is the runway.