AlexanderPorter

Timberland X Stüssy Interactive

Six performers, captured from four sides

A WebGL experience for the 2013 Stüssy for Timberland boot, with rotation moving the captured figures from glass-like surfaces into disintegration.

A red-jacketed captured figure stands at the center of a dark gridded scene, surrounded by other volumetric figures in the Timberland × Stüssy interactive.
Interactive spatial scene
Period
2013
Status
Complete / Archived
Form
WebGL campaign experience

The project

Made for the 2013 Stüssy for Timberland six-inch boot, this WebGL experience allowed visitors to rotate six volumetrically captured performers. The turn itself controlled the image: as a visitor moved around a figure, its surface shifted from something like glass or ice into disintegration.

Production notes

I created the shoot, designed the web interactions, and developed the four-camera capture and calibration workflow. Four RGB-D rigs recorded each performer from the cardinal directions, then I brought the views into a common space so the figure could be turned after capture. Rotation was also the visual control: moving around a person shifted the rendering from a glassy or ice-like state into disintegration.

Process study

Calibrating Four Cameras

For the Stüssy shoot, we put four RGB-D cameras around one performer. Each camera saw one side. I built a calibration workflow to bring those four recordings into the same space, so you could turn around the person after the shoot.

production timelapse
Four-camera RGB-D setup timelapse
01 / 06

I developed the capture and calibration workflow for this production.

  1. 01 / Starting point

    How do you record one person from several sides and make the cameras agree about where that person is?

  2. 02 / How it worked

    A timelapse from the shoot makes the arrangement easy to see: we marked a central performance area and built one RGB-D rig on each side. Every rig first needed its own color-and-depth calibration. Then I used checkerboards and camera-position files to line up the four recordings. In a browser-based tool, I adjusted translation, rotation, scale, and depth until the color-coded walls and bodies stopped splitting apart. The project folder still holds the separate north, south, east, and west calibrations and the resulting transformation files.

  3. 03 / What it opened

    Once the four recordings occupied the same space, a viewer could rotate around a captured person after the shoot. The workflow developed here continued into Blackout and later became part of Depthkit Studio’s multi-camera capture system.

Rotate the capture

Open in a full window ↗

This is the recovered 2013 WebGL experience, running from the surviving deployment. Drag to move around the figure, scroll to change distance, and click the Stüssy or Timberland marks to change the image treatment. It is best experienced on a desktop computer.

Campaign film

Stüssy for Timberland

The release film shows the captured figures rotating through the project’s glass-like surfaces, point fragments, and disintegration.

Checkerboard calibration boards arranged for the Timberland × Stüssy volumetric capture shoot.calibration boards
The early multi-camera calibrations required very large checkerboards.
01 / 06

Selected credits

Alexander Porter
Director of Photography, Visual Effects Supervisor, Interaction Designer
Jack Heller
Director
James George
Technical Direction
Marcin Ignac
Code and 3D Effects; Interaction Implementation / Technical Design
Matthew Williams
Director

Links & presentations