Thomas Gertenbach Portfolio

Thomas Gertenbach 在 FWA 的介绍里写，这个作品集是一张晒着太阳、从上方看下去的灰泥桌子。按这段介绍的说法，作品是可以捡起、扔开、吹散的拍立得，掉进井里就会被投影机放出来，按住任何地方还能给这一幕拍张照。站点要证明的是做这个站的人本身的手艺，Thomas Gertenbach 在 About 页上说自己做的是能玩的网站，三维世界、产品配置器和让它们手感对的小细节，这张桌子就是一件这样的作品。

这个站的开场本身就是一次完整的拍照。灰褐色的屏幕上，四角的取景框一点点往中间收，下方跳着 ISO、光圈和快门的读数，右下角是加载的百分比，中间一条黑色的横线随之变长。加载完成时屏幕闪一下白光，镜头从桌面上拉远，那条黑线原来是一张侧着落下的照片，它落到桌上，正是 Thomas 本人的那一张拍立得。访客看到的第一个画面，就是这张照片刚刚落下的桌子。

桌上一共七张照片，六张是作品，Auremin、Cinnamon、Gielissen、Muuble、Spyker 和 Momiji，第七张是 Thomas 自己。作品大多是 Thomas Gertenbach 在 The Brink Agency 参与的三维网站和产品配置器，有能在三维里布置展台的，有能把整间店铺装好再租下来的，也有一台能玩的抓娃娃机。照片掉进凹槽之后，桌上投出这件作品的三块录屏，左下角是作品名，右边写着一句说明、在哪里做的、类别和年份，地址也随之换成这件作品自己的页面。访客按 Esc 或者点右上角的叉，照片就会回到桌上。

除了首页，这个站还有三页，用的是同一张桌子或者同一套布置。Work 页把六张照片在桌上排成一排，压在作品名的大字下面。About 页把 Thomas 的那张照片放进凹槽，正中写一段自我介绍。Lab 页换了一张桌子，是一张深色的切割垫，上面放着游标卡尺、镊子、接满导线的面包板和一卷胶带。十一张实验作品的照片散在中间，访客点开任何一张，会看到这个实验的短片和一段讲做法的文字。

整个站的设计都来自一件真实的物件，一张被阳光照着的旧桌子。灰泥的颜色是带灰的暖褐色，表面有细细的裂纹，边缘一圈凸起的框上掉了几块皮，露出下面浅色的底。光从右上方来，树叶的影子斜着落在桌面上，照片在桌上投出短短的影子，连导航和标题都像是印在灰泥上的字。

桌上的文字分成三种，各有各的样子。CREATIVE DEVELOPER 和作品名用一款很宽、很粗的无衬线体，白色的笔画上带着磨损的斑点，像是用模板刷上去的漆。导航、说明和右下角的 AMSTERDAM 时钟用一款普通的小号无衬线体。第三种是拍立得底边上手写的作品名，Gielissen、Muuble、Thomas，像是用笔在相纸上写的。访客自己拍的那张照片，底边也会自动写上 Amsterdam 和拍下的时间。

拍立得是这个站最主要的内容单位。作品是拍立得，Thomas 本人是拍立得，Lab 的实验也是一张张相片，访客拍下的画面同样变成一张拍立得。每张照片的白边略微发黄，带着一两块污渍，摆在桌上时各自歪着一点角度，看起来不像一个排好的网格，更像有人刚把一叠照片撒在桌上。

投影出来的录屏没有当成一块网页窗口来做。三块画面边缘是一圈柔和的光晕，左右两块微微向外弯，叠在灰泥和树叶的影子上，看起来真的像是投在桌面上的光，而不是贴在屏幕前面的一层。Lab 那张深色的切割垫换了一套道具，但规矩一样，每一样都是放在桌上的实物。

这张桌子上的照片和道具都按实物的方式动。访客按住一张照片，它会离开桌面浮起来，影子随之变大。访客把它扔出去，相纸会在半空中微微弯曲，滑过桌面，压到另一张照片上才停下。访客拿着照片靠近右下角时，凹槽里浮出 Drop here to inspect 几个字。桌上的树叶影子也在慢慢晃，像有风吹过叶子。

照片掉进凹槽之后，桌上会演一整段过场。凹槽先亮起来，桌上其余的照片被一股风吹向一边，相纸边飞边弯。接着三块录屏从暗处浮现，投在灰泥上，作品名在左下角出现。访客按 Esc 之后，录屏消失，照片又落回桌上。

拍照是这张桌子上的第二个主要动作。访客在桌上任何地方按住鼠标，屏幕上会出现取景框的四个角，旁边跳出 ISO 的读数。松手时闪一下光，一张黑色的相片从上方落到桌上，它和真的拍立得一样要等一会儿，大约八秒之后才显出刚才按住的那一块桌面。

开场那一段同样是一次拍照，取景框收拢、闪光、镜头拉远、Thomas 的照片落下，前面概念一章已经讲过。顶部正中的小图标是声音开关，开着的时候是一道波浪，关掉之后变成一条直线。这些动作在首页和 Lab 页上都稳定在每秒 60 帧，几乎没有卡顿。

这个站用 Next.js 搭成，整张桌子由三维库 three.js 画出来，用的是浏览器较新的图形接口 WebGPU，不支持它的浏览器会自动换回 WebGL2。树叶的影子来自一张树叶图案的遮光片，套在一盏聚光灯前面投到桌上，而不是一张画好的阴影图。声音交给 Howler 这个音频库，声音默认是开着的，访客第一次点击之后会响起一段环境声，界面上的点击也有自己的音效。

画面的清晰度是这个站花心思最多的地方之一。即使在普通的显示器上，桌子也至少按屏幕分辨率的一点五倍来画，最多到两倍，这样灰泥的纹理和照片的边缘才显得锐利。站点一直在看每一帧要画多久，连续几秒画得太慢，就把分辨率降一档，稳定了一段时间再升回来。

整张桌子第一次加载约需下载 5.4 MB，最大的单个文件是一段约 0.5 MB 的环境声，其余主要是灰泥、树叶遮光片和环境光的贴图，以及每件作品的几段短片。首页打开几秒之后，Lab 那张切割垫和金属道具的贴图也会提前下载，访客换到 Lab 时就不用再等。

页面本身打开得很快，服务器在 30 毫秒以内就开始返回页面，屏幕上第一次出现东西在 0.1 到 0.4 秒之间，远好于 0.8 秒和 1.8 秒的常用标准，这时访客看到的是开场的取景框。桌子要到大约 4 到 6 秒才完全露出来，加载期间，页面的主线程总共被占用了约 2 秒。整个过程画面没有任何跳动，布局位移为 0。

这张桌子对键盘和读屏软件的照顾做得很周到。画面里每一个能点的物件，页面上都另有一个看不见的链接，读屏软件能按顺序读到每一件作品、Lab、About 和联系方式。访客按 Tab 键时，屏幕下方正中会出现一个小小的标签，写着焦点停在哪里，比如 Website sound On、Work、Auremin，按回车就能打开那件作品。美中不足的是，按 Esc 关掉作品之后，焦点回到了页面开头，而不是回到刚才那张照片上。站点为减少动态效果写了样式规则，只用在开场的取景框和这个焦点标签上。

这个作品集拿到了 FWA 的 82 分，它几乎只靠一张桌子撑起来，桌子、拍立得、凹槽和相机四样道具，把浏览作品、打开作品和了解作者三件事都装了进去，而每一样都按实物的方式回应鼠标。

FWA 上的署名只有 Thomas Gertenbach 一个人，表里的战绩算到写报告时为止。这是 Thomas Gertenbach 在 FWA 上的第一个奖，获奖的是自己的作品集，作品集里的六件作品大多是在 The Brink Agency 做的项目。