Tabletops: Behind the scenes
How to build a time machine
Since childhood, I've been fascinated by places that no longer exist. Historical villages, model towns, and old roadside postcards capture my imagination — they create little portals to a time just out of reach. The Apple Store Time Machine is no different.
Here's how it was made.
All four Apple Stores represented in the time machine were 3D modeled in Blender, but the story doesn't start there. Before modeling anything, I had to produce the exact dimensions and layout of each store. It was... a colossal effort.
Making a plan
Apple doesn't publish detailed specifications for any store, so I searched for building permits, mall lease plans, and ADA construction requirements. After determining a few exact numbers, I was able to slowly extrapolate the rest of the dimensions for each store. During this process, I learned that Apple Stores generally follow modular patterns that result in clean, simple math at scale. I'm fairly confident that my models are largely accurate within a few inches in each direction.
Creating merchandising planograms was a challenge I severely underestimated. I sourced archival images of each store from Flickr, abandoned webpages, the Wayback Machine, Getty, YouTube, and dozens of other dusty corners of the web.
After paging through thousands of photos, I discovered "magnetic zones." There are areas in each store with high concentrations of photos and areas without any photos at all. These aren't always the places you'd expect, like the glass staircase at The Cube or a hallway to the bathroom. Magnetic zones are places people felt comfortable taking photos. This force was later blunted by the social acceptance of iPhone photography, but it's still present.
In practice, this meant there were shelves and tables where I had little to no reference imagery whatsoever to work with. To fill in the blanks, I referenced photos taken at similar Apple Stores within the same 30-day period.
Modeling and texturing
Watching the stores come alive in 3D was my favorite part. I learned quite a bit about Blender during this project, so each store is slightly higher fidelity than the last. By the end, I had to resist the urge to completely start over on my earliest work. After seven months, I just needed to ship it.
I used my personal library of photos from Apple Store visits combined with images from the web to build textures for products and store fixtures. Forgotten Amazon SKUs and eBay listings were critical to scavenging software box art and third-party accessories. I UV-unwrapped every object in each store and mapped its texture.
Building the graphic panel textures was, frankly, ridiculous, and by far one of the most time consuming details. The backlit graphics on store walls are totally custom artwork, not just repurposed marketing assets from Apple.com. That means the only way to reconstruct them is from actual photos.
Early digital cameras had poor dynamic range, and people didn't exactly go out of their way to take photos of the graphic panels. The images you see on the store walls are essentially collages of dozens of real photos, individually perspective warped, color corrected, and stitched together in Photoshop:
To bring the store models into the game engine, Unity, I "baked" all of the shadow data into the textures and exported FBX files of the geometry. Unity supports easy texture remapping and import of assets created in Blender.
Baking shadows meant that I could completely shut off Unity's realtime lighting system and rely solely on unlit textures. This is huge for performance, but it's only possible because my scenes are static. The lights in the store never shut off, and you can't rearrange the tables. Put more simply, if you were to pick up a MacBook from any table, it would leave behind a shadow "stain."
This entire project was completed on my M1 MacBook Air with no external hardware or render farms. Baking the shadows at Apple Fifth Avenue took about six days, after which I was left with a fully-lit model to pan and zoom in real time:
Interaction and interface
I chose Unity as my game engine because it's well-supported by macOS and Blender. Given the nebulous relationship between Epic Games and Apple, I wasn't confident investing time and effort into learning Unreal Engine. I also wasn't ready to dive into iOS development — this felt like a Mac-first experience. If I could start over today, I'd like to skip C# fundaments and instead dive into learning Apple tools like Metal and SceneKit.
The code powering the experience is sparse, since the time machine is exploratory and contains few strategy elements. The magic is in the design of the environment and interface.
I worked closely with my brother Robert, a Logic Pro pro, to develop an immersive soundscape and to tune the interface to feel just right. He landed on a palette of UI sounds that fit the glassy resonance of the aqua interface. Every detail was thought through, down to the hard drive seeking and Finder wink "ding" during the boot sequence. The crickets you hear chirping outside Apple Stanford Shopping Center? I found a nighttime ambience sample actually recorded in Palo Alto.
One of my favorite details in the experience came together right at the end. The Power Mac G4 Cube boot sequence is an homage to time travel and computing history. More importantly, it's a fun way to place the time machine in a world larger than itself. There are tons of tiny references and details packed into those few seconds that most people will never see, like the notepad on the desk:
The repurposed G4 Cube is itself a callback to the original iPhone prototype, a very custom Power Macintosh G3.
So what's next for me? I have a few ideas brewing, and they all involve iOS. That said, this is my one-time shameless plug to say that I am currently seeking new long-term design and writing projects. Let's chat.
Featured image
Apple Xinyi A13
Photo via @daniel76308 on Instagram.