Tabletops 是 Michael Steeber 的新闻周刊,本文原文发表于 2022 年 8 月,原作者授权果铺知道翻译。

Apple Store 时光机

https://michaelsteeber.com/timemachine

生活中有些地方,我们流连忘返:那些已经不再存在的地方、那些感到奇妙的地方、那些在即将消逝在时间的迷雾中时,在我们记忆的边缘徘徊、闪耀的地方。

有时这些地方是深刻的,就像童年的家;有时它们又很简单,就像公园里一张喜欢的长椅,或着一家商场里的商店。我们总是希望也许什么时候能再一次去到那些地方。

时间穿梭与现实

这便是 Apple Store Time Machine 的意义所在。我重现了四家标志性的 Apple Store 零售店:Tysons Corner、Standford Shopping Center、Fifth Avenue 和 Infinite Loop,让你可以在内部自由探索。在时光机里,每家店都与它在盛大开幕日的模样完全一致。每一个细节都被考虑到,包括最后的 iPod 和盒装软件。这是目前为止,我最接近时光旅行的一次。

The Apple Store Time Machine 是一款完全免费的 Mac app,适用于 Apple silicon 和 Intel 处理器的 Mac 电脑。希望你能玩得和我创造他时一样快乐。

https://michaelsteeber.com/timemachine

如何搭一台时光机

打小开始,我就对那些已经不复存在的地方着迷。历史上的村落、模型里的乡镇、路边的旧明信片让我浮想联翩 — 它们开启了一道通往遥不可及的时代的传送门。Apple Store Time Machine 也不例外。

做到这儿的时候,我知道我已经沉迷了

时光机里的四家 Apple Store 都是在 Blender 中 3D 建模的,但这项计划可不是从那里开始的。开始建模以前,我必须确定出每个门店的准确尺寸和布局。这是.……一项庞大的工程。

开始计划

Apple Tysons Corner 的矢量图纸

Apple 从来不公布任何零售店的准确参数,所以我搜索了建筑施工许可、商场租约信息、ADA1 施工强制标准信息。在确定几个关键参数之后,我渐渐能推测出门店内部的其他尺寸信息。过程中,我也了解到 Apple Store 遵循的模块化设计原则使得其使用的数学比例模型简单又统一。我对我估计的数值的误差控制也有足够的信心。

Apple Fifth Avenue 开业当天的产品展示状态,这只包含了摆在桌面上的产品

重建陈列商品的平面图是一项我严重低估了难度的工作。我从 Flickr、废弃网页、Wayback Machine 网页快照、Getty Images 图库、YouTube 视频和网络上各种尘封的角落中寻找着每家门店的图片存档。

翻阅了数以千计的照片后,我发现有些地方仿佛像有「某种磁性」一般。店里的一些区域有大量的照片,对应的,也有一些区域完全没有任何照片。这些区域并不一定都是你想象的那些什么玻璃楼梯,什么通往厕所的道路之类的。「有磁性的区域」往往是人们觉得拍照起来比较不会不方便的地方。这种磁力被随后 iPhone 问世后社会对拍照的接受程度所钝化了一些,但还是多少得到了保持。

顺便一问:你能叫出这些盒装软件的名字吗?你只有这一张照片参考

实际地说,这也意味着有些货架和展示桌我几乎没有任何照片可以参考。为了填补这些空白,我也参考了与该店开幕时间 30 天附近的其他相似 Apple Store 的照片。

建模、润色

我现在知道为什么 Apple 要给他们的建筑申请专利了

看着这些门店在 3D 模型中从无到有让我感到十分兴奋。一边完成这一项目的过程中,我也一边学习了不少 Blender 的知识,因此每家店的精细程度都在提升。到了最后,我忍不住冲动,要把最早做出的一些建模重新完成一遍。就这样 7 个月之后,我有了准备发布的把握。

我使用我个人到访 Apple Store 的照片结合网络上的图片,为产品和商店内的设施进行建模润色。亚马逊和 eBay 里的盒装软件购物列表对我寻找盒装软件和第三方配件的包装提供了很大的帮助。我仔细地对每间门店的每一件物品进行了打磨和重构。

Time Machine 里的几乎所有产品都经过了我的材质翻新

但是重构 Graphic Panel2,坦率地讲,就比较夸张了,那也是我整个项目最花时间的细节之一。这些背光宣传画是完全为 Apple Store 进行的独立创作,并不是从 Apple.com 能找到的图片资源复用而来的。这也代表着,要想办法重构他们,只能依赖现实中的照片。

早期的数码相机动态范围比较糟糕,而且人们拍照也很少真的是为了要去拍 Graphic Panel。因此,你在 Time Machine 中看到的每个 Graphic Panel 几乎都是由数十张真实的照片、各个进行透视调节、颜色校正后在 Photoshop 拼接后的结果。

为了将 Apple Store 模型引入游戏引擎 Unity,我将所有的阴影数据都烧录进了材质当中,并导出了门店建筑模型的 FBX 文件。Unity 支持一些简单的纹理重映和 Blender 资产的导入。

毕竟是已经把阴影烧录进材质里,我可以完全关掉 Unity 的实时光照引擎,而仅仅依靠那些材质里自带的光照效果了。这对性能来说是比较大的提升,但能这样做完全是因为我的场景是静态的。这些时光机里的 Apple Store 的灯从来不关,你也不能调整桌子摆放的位置。换句话说,如果你能从桌子上拿起一台 MacBook 的话,你会发现桌子上还留着那台 Mac 的阴影。

整个项目都是在我的 M1 MacBook Air 在不使用任何附加硬件或者使用渲染辅助的条件下完成的。完整地烧录 Apple Fifth Avenue 的阴影花了差不多 6 天,完成后我便获得了一个已经拥有照明的可以实时预览的模型。

交互与界面

我选择 Unity 主要是因为它对 macOS 和 Blender 的较好支持。鉴于 Epic Games 和 Apple 之间的暧昧关系,我没信心投入时间和精力去学习虚幻引擎。我也暂时没有准备好深入到 iOS 开发中去 — 毕竟这个时光机感觉主要还是要在 Mac 上才比较好体验。如果我今天可以重新开始这一项目,我想我会跳过 C# 课程,转而潜心学习 Apple 提供的工具,比如说 Metal 和 SceneKit。

由于这款 Time Machine 主要是个探索性的 app,包含的游戏策略性内容比较少,其背后的代码量自然也就不大。真正神奇的主要还是这款游戏的场景和界面设计。

我和我的兄弟 Robert 紧密合作,他是一位 Logic Pro 的专家,我与他一起开发了一套能让用户仿佛身临其境的音效,并把界面和音效的搭配调整得相得益彰。他最终设计了一套与 Mac OS Aqua 风格相匹配的音效系统。每个细节都经过深思熟虑,小到启动过程中的硬盘检索声和 Finder 的眨眼「叮」声。你问在 Apple Stanford Shopping Center 听到的蟋蟀叫声?那是我找到的一条在 Palo Alto 的夜里实际录制的声音样本。

我最喜欢的地方是整个时光机开场的末尾部分。Power Mac G4 Cube 的开机程序是对时间旅行和计算机历史的一种致敬。更重要的是,它竟然能承载起「时间旅行」这个远远比自己还要庞大的概念,这点让人感觉十分有趣。在这几秒钟开场里,多数人也许都不会看到的是大量的细节,就比如摆在桌上的便签纸。

这台充当时光机本体的 G4 是对初代 iPhone 原型的一种致敬,那是一台极度定制化的 Macintosh G3。

图片来自 WSJ

我的下一个项目?我有一些不错的想法正在酝酿,而且都跟 iOS 相关。话是这么说,我也要无耻地做一下个人宣传:我目前正在寻求新的长期设计和写作工作。如果你有想法,欢迎与我联系3

 

原文链接:Tabletops: The Apple Store Time Machine, Tabletops: Behind the scenes

Tabletops 是 Michael Steeber 的新闻周刊,果铺知道每周也在同名微信公众号同步更新最新一期 Tabletops 中文翻译,敬请关注。