Persepolis Reimagined

Persepolis Reimagined 是盖蒂别墅博物馆一场波斯帝国展览的线上部分，团队在制作说明里写到，它和展厅互相补充，单独看也成立。博物馆展览通常把文物放进展柜，这个站先把文物原来所在的城市整个复原出来，再把文物放回它们原来的位置。访客走的路线照着当年使节进城的路线排，一共六站，依次是万国之门、觐见大殿 Apadana、薛西斯宫、东南宫、王室宝库和百柱大厅。

访客走进城之前，网站先用两段开场把时间和地点交代清楚。第一段是加载时的几行字，依次讲这座城市在今天的伊朗南部、由强大的国王建成、是阿契美尼德波斯的礼仪之都，最后打出 Getty presents 和标题。第二段是访客点下 ENTER 之后的一段飞行影片，镜头从平原飞上城墙所在的台地，字幕写着大流士一世约在公元前 518 年建城，最后请访客想象自己是那个时代的一位使节，正前往都城向国王致敬。影片一结束，镜头就停在第一站万国之门前。

六站的长度并不平均，前两站最长，万国之门约 17 屏，觐见大殿约 16 屏，后面四站各只有 5 到 11 屏。最有名的雕像、浮雕和铭文都集中在前两站，访客的兴致最高时看到的内容最多，后面几站节奏加快。最后一站百柱大厅的结尾是全站的收束，画面上先打出一句没有帝国能永远存在、波斯波利斯终将陷落，接着讲亚历山大大帝在公元前 330 年攻入波斯、放火烧毁了这座城，再换成今天遗址的照片，最后落到 About this Project。前面一路看到的辉煌，到这里变成了废墟，这正是全站一直在为它铺垫的对比。

Persepolis Reimagined 让访客按自己的兴趣决定看多深。每一处停留点通常只有一段短短的说明，访客滚动过去就能读完。说明下面的按钮会打开一个专题，比如公牛雕像旁边的 Imperial Iconography，专题里是卢浮宫、洛杉矶郡立艺术博物馆这些机构收藏的真实文物，每一件都写明了出处。菜单里的艺术品目录又把这些文物按雕塑、器皿、兵器、首饰和钱币印章分成五类，每一件下面的 See it in 按钮把访客送回这件文物原来所在的那一站。两处刻在墙上的铭文还配了英文朗读和字幕，访客能听到铭文写的是什么。

访客不一定要从头走到尾，右上角的菜单打开后是一张整座城市的三维总览图，六个地点各有一个带编号的标记，按当前所在、看过和还没看三种状态上色，访客点哪一个就直接去哪一站。每一站的右边还竖着一列小圆点，每个点是一处停留点，点一下就跳过去。网站一共有英语、阿拉伯语、西班牙语、波斯语、法语、印地语和简繁中文八种语言。

Persepolis Reimagined 的三维画面几乎都沐浴在黄昏或清晨的暖光里，界面则收得非常克制。复原的建筑和雕像都上了颜色，公牛雕像身上有红、黄、蓝的彩绘，门楣上排着彩色的釉砖，觐见大殿的柱头也是彩色的。团队在制作说明里写到，这些颜色和材质由盖蒂的策展人和研究古代材料的学者一起把关，并整理成一份材质规范，让每个美术做出来的东西保持一致。界面只用三种颜色，深炭灰（#252525）用在加载画面、专题和菜单的底色上，杏色（#F6CEA0）用在标题、按钮和标记上，正文是白色。杏色和画面里的暖光是同一个色系，所以文字压在三维画面上也不显得突兀。

这个站用三款字体分出三种语气，标题用 Maghfirea，这是一款展示用的衬线字，也就是笔画末端带小装饰的字体，它的笔画还带着弯曲的花饰，看起来像刻在石头上的字。Gate of All Nations、Bull Statues 这些站名和标题都用它。说明文字用经典的书籍衬线字 Sabon Next，读起来像博物馆展签。按钮、图注和操作提示这些小字用无衬线的 Graphik，和展览的内容分开。

三款字体的字号都随屏幕宽度连续变化，从 640 像素宽到 1920 像素宽，大标题从 60 像素平滑地长到 100 像素，正文从 13 像素长到 15 像素。最大的那一级标题还以屏幕高度的五分之一为上限，所以在矮一些的笔记本屏幕上也不会撑出画面。

这三种字体的角色写成了三个变量，换语言时整套一起替换。简体和繁体中文换成 Noto Serif 和 Noto Sans 的中文版本。阿拉伯语和波斯语换成 Noto Naskh 和 Vazirmatn，整个版面也改成从右往左排。印地语换成 Martel，标题还缩小一级、行距放松，给天城文字母上下的笔画留出空间。八种语言因此各自读起来自然，版面的层次却不变。

每一处停留点的版面都遵守同一套规矩。三维画面铺满整个屏幕，说明放在画面一侧，上面是杏色的大标题，下面是一段居中的白色正文和一个细线描边的胶囊形按钮。屏幕上的按钮和标记都是圆形或胶囊形，和方正的建筑形成对比。网站还反复用一种波斯浮雕上常见的圆形花瓣纹样，加载时的进度圈、雕像旁边那个点了能看今天照片的圆框，以及菜单里地图入口的边框，都是这一圈花纹。光标移到右边那列小圆点上时，旁边会浮出一个白色胶囊，写着这一处的名字。

专题和艺术品目录换成了另一种气氛，像是走进展厅里的一间暗室。专题铺在深炭灰的底上，是一条横向的长卷，大幅的文物照片、杏色的标题、白色的正文和一段放大的灰色引文依次排开，每张照片旁边用很小的字写着文物的年代、材质和收藏机构。艺术品目录把五个类别写成一排很大的衬线字，前面带着 01 到 05 的小编号，当前的类别是亮的，其余的变暗。目录下面是一排黑底的文物卡片，光标移到一张卡片上，卡片就换成这件文物的说明和 See it in 按钮。

到了手机上，网站把说明从画面一侧挪进了屏幕底部的一张卡片。卡片的上边是圆角，上面有一个向上的箭头，访客点开才展开全文，所以三维画面能占满大半个屏幕。声音和设置两个按钮挪到了左上角，Getty 的标志移到正中。手机上的菜单也重新排过，上半屏是三维总览图和当前地点的名字，下面一排小圆点代表六个地点，访客左右滑动切换，再点 Discover 前往。下半屏是艺术品目录和 About this Project 两行入口。

Persepolis Reimagined 的开场把加载和滚动接成了同一段天色变化。加载画面是深炭灰底上的花纹进度圈，中间的数字从 0 数到 100。资源加载的同时，背后的画面从深灰里慢慢浮出一片夜里起雾的平原，加载完成时，夜景已经浮现出来。

加载完成之后，天色的变化交给访客的滚动。开场的几行字一句接一句出现，访客每往下滚动一段，雾就散开一些，天色也从蓝灰转成金黄。到标题出现时，远处的城市已经清清楚楚地立在黄昏里。每一句字出现之后，网站会把滚动锁住半秒，访客滚得太快也不会一下跳过好几句。

网站的标题和说明都用同一种方式出场。每一行字起始时放大到 1.2 倍、往右偏出一个字的宽度，同时落在原位置下方，然后在 1 秒内缩回原大、移回原位并升上来，同时淡入。缩放和横移用的是一条起步极快、收尾很长的曲线，上升用的是一条起步慢、中段加速、末尾拖长的曲线，两条都是团队自己定的。相邻两行只错开 0.075 秒，所以几行字像是一行压一行地落定，带着一点刻进石头的分量。

访客点下 ENTER 之后，开场换成那段飞行影片，影片的前八成跟着滚动走。访客往下滚动，影片就往前播放，往回滚动，影片就倒回去。访客停下来，影片也停在那一帧，几行字幕按滚动的位置一句句地换。访客滚动到底时，网站会锁住滚动，让影片自己播放完最后两成。镜头穿过城门之后，画面在没有任何切换痕迹的情况下变成了可以实时转动的三维场景，工程章会讲这是怎么做到的。网站把最后一段交给影片自己播放，访客就不会在两种画面交接的那一刻停住或倒回去。

进城之后，访客滚动的是镜头在一条固定路线上的位置。访客的滚轮停下之后，镜头每一帧再走完剩下距离的十分之一，所以轻轻滚一下，镜头会顺滑地滑行约半秒才停稳。镜头走到一处停留点附近时，网站会接管一下，先锁住滚动，用 1 秒把镜头送到这一处的正中，再把滚动还给访客，说明文字随即按上面的方式出场。这样访客不会错过任何一处停留点，就像讲解员走到一件展品前会先停下来。

两站之间用一层白雾衔接，每一站的最后一小段是这一站的结尾，访客滚过这一段的六成之后，网站会自动用 2 秒把剩下的路走完，同时播一声表示这一站结束的音效，画面被一层翻涌的白雾盖住。白雾盖满时，下一站在雾后面换好，雾再散开，新的一站从雾里露出来。每一站开头和结尾的 2 秒里，场景本身也蒙着一层渐浓或渐淡的雾，所以白雾的进出不会显得突兀。

雕像前那个花纹圆框是全站最重要的互动。圆框外圈的花纹一直在慢慢转动，光标移上去时，几圈花纹在 0.3 秒内放大一成，一圈比一圈稍晚一点。访客点一下，复原的彩绘雕像就换成同一个位置今天的照片，照片铺满屏幕，访客再点关闭按钮，画面又回到复原的样子。前面看到的颜色和完整的轮廓，在照片里只剩下风化的石头，访客一下子就明白这座城被复原了多少。

镜头也可以离开固定的路线看一看。访客按住鼠标拖动，镜头就朝拖的方向转过去，松手后带着一点惯性慢下来，几秒内又转回原来的方向。访客继续滚动时，镜头会按滚动的快慢转回路线的方向，滚得越快转回得越快。在支持的手机上，网站还会读取手机的陀螺仪，访客把手机转向哪边，镜头就看向哪边。

专题和铭文这两种更深的内容各有自己的动法。访客打开专题之后，往下滚动滚轮，长卷就横着往左移。铭文的配音则让镜头和声音一起讲故事，访客在万国之门的三语铭文前点下 Listen to the translation，说明文字就收起来，镜头转过去对准墙上的铭文。屏幕底部用标题的字体逐句打出字幕，比如 I am Xerxes, the great king，墙上的楔形文字也跟着朗读的进度一段段亮起来。

访客用滚轮连续走完六站时，Persepolis Reimagined 的火把、尘埃和白雾一直在动，画面在每一站里都稳定在每秒 60 帧，只在换站、加载下一站的那一下卡一次，实测最长约 0.3 秒。网站会读取系统里减少动态效果的设置，自动打开自己面板里的同名开关。打开之后，镜头不再跟着拖动转动，花纹圆框的悬停过渡和旋转也停了，但镜头沿着路线的滑行和白雾的过渡照常播放。

Persepolis Reimagined 的界面用 Vue 搭成，动画用 GSAP，三维画面没有用 three.js 这类现成的库，而是 Monks 自己写的一套 WebGL2 渲染器，不支持 WebGL2 的浏览器退回 WebGL1。加载画面、开场影片、菜单里的总览图和城里的六站都画在同一块画布上。团队在制作说明里写到，这样就能给所有画面套上同一道后期处理，暗角、泛光和胶片颗粒让预渲染的影片和实时的三维场景看起来像同一种画面。暗角按到屏幕中心距离的平方压暗边缘，颗粒每一帧用一个新的随机数，强度只有 0.075，所以画面带着一点胶片的质感，又看不出噪点。

这座城是按影视制作的流程做出来的。团队在制作说明里写到，地形从卫星数据开始，用 World Creator 生成，再在 Isotropix Clarisse 里拼成一个总场景，这一个总场景同时产出网页里的场景、展厅里的 360 度球幕、菜单里的地图和影片镜头。建筑和雕像以 Persepolis3D 项目的模型为底，重新拓扑、补雕，有些照着老照片描出来，再用 Maya 和 Substance Painter 做材质。网页里的场景在 Unity 里组装，光照贴图和镜头动画都在 Unity 里做，再用团队自己写的导出器导成 JSON。每一站的泛光强度、泛光阈值和地面倒影的开关也写在 Unity 的时间线上，网站在每一帧按镜头走到的时间点读出这几个值，所以每一处的光感都是美术在 Unity 里逐段调好的。

城里的光影是提前烘焙进光照贴图的，着色器里没有实时阴影的计算。每一站有一张自己的光照贴图，总览图那张约 4.4 MB，万国之门那张约 2.5 MB。实例化绘制的物体每一份都带着自己在光照贴图上的缩放和偏移，所以成排同样的柱子虽然一次画完，每一根读到的仍然是自己那一块的光影。高光没有用真实的灯，着色器里写死了一个从侧上方照来的暖色太阳方向，再加一层菲涅尔，让石头的边缘微微发亮。柱子和雕像另外贴了法线贴图，用很少的三角形做出细致的凹凸。

为了让这么大一座城在浏览器里跑得动，团队在几个地方省下了绘制。团队在制作说明里写到，团队把几何体拆成可以重复使用的零件，在运行时再拼回去，以减小文件体积。同一个模型、同一种材质的物体由动态实例化合并成一次绘制，看不见的物体用视锥剔除跳过，远处的物体换成更简单的模型。每一站每一帧只有约 35 到 88 次绘制，其中四到八成是实例化绘制。

地面的倒影是靠固定的镜头路线省出来的。万国之门和百柱大厅里那种深红色的室内地面会映出柱子，倒影先画进一张单独的贴图，地面再按自己在屏幕上的位置去取这张贴图，并按地面的粗糙程度去取更模糊的那一级，所以倒影是柔和的。团队在制作说明里写到，因为镜头只沿着固定的路线走，团队可以事先指定哪些物体会出现在倒影里，不必把整个场景再画一遍。倒影在哪一站打开，也写在 Unity 的时间线上。

开场的天色变化是一段专门的着色器做的，它只用了三张图。一张是夜景，一张是黄昏，还有一张深度图，记录画面上每个点离镜头多远。着色器按进度在夜景和黄昏之间混合，再按深度图算出每个点被雾遮住多少，离得越远、越靠近地平线，雾就越浓，并用一段由几层正弦叠成的噪声让雾慢慢流动。进度的前一半由加载进度驱动，后一半由访客滚动开场文字驱动，所以等待加载的时间本身就成了开场的一部分。

开场影片和实时场景之间的衔接用的是抠绿幕。飞行影片在需要露出实时画面的地方留成了纯绿色，着色器把每个像素和纯绿色比较，越接近绿色就越透明，下面的实时场景就从这些区域露出来。团队在制作说明里写到，影片和三维场景的调色、镜头运动和时间都对齐过，所以访客看不出画面在哪一刻换成了实时的。两站之间的白雾也来自两段影片，一段是 2.1 秒的进场，一段是 3.8 秒的退场。网站只取影片的明暗当作透明度，在画面上叠一层白色，所以雾的形状是拍出来的，颜色却由代码控制。在竖屏的手机上，网站会把影片转 90 度再铺满屏幕，以免横向的影片被裁掉太多。

网站把滚动交给 smooth-scrollbar 这个库，每一站在配置里写着自己有多长，以及每个部件在这一站进度的哪一段出现。比如万国之门的公牛雕像出现在进度的 30% 到 34% 之间，铭文出现在 80% 到 84% 之间。镜头、说明文字、花纹圆框、室内和室外的环境音都读同一个进度，所以访客往回滚动时，这些东西会按原来的顺序倒着走。停留点的自动吸附也写在这份配置里，带吸附的部件一进入自己的那一段，网站就清空滚动的惯性，用 1 秒滚到这一段的中点。镜头的视角按屏幕的宽高比算出来，屏幕越窄视角越宽，所以竖着的手机上也能看到雕像的左右两边。

城里另有几样小东西是着色器现算出来的。墙上火把的火焰没有用贴图，而是用多层噪声算出火苗的形状和颜色，所以一直在跳动。空气里飘着细小的尘埃，这些尘埃只围着镜头分布，镜头往前走时，落到后面的尘埃会绕到前面去，看起来整座城里都有。菜单总览图上的云雾同样由噪声生成，会慢慢飘过城市。

声音用 Web Audio 处理，一共 26 段 ogg 音频，约 13.4 MB。团队在制作说明里写到，音乐用了卡曼恰琴、杜杜克笛、内伊笛、达夫鼓等古代波斯一带的乐器，由历史学家帮忙挑选，再和合成器的声音混在一起，并请了研究古代波斯音乐的教授做顾问。每一站有自己的背景音乐，室内和室外的环境音按镜头走到的位置切换。网站给有位置的声音做了 HRTF 声像处理，访客转动镜头时，声音的方位也跟着变。两段铭文的朗读是单独的 mp3，字幕来自 srt 字幕文件。

访客第一次打开 Persepolis Reimagined 时要下载约 80 MB，最大的是约 26 MB 的开场飞行影片，其次是约 10 MB 的总览场景数据和一张约 8 MB 的 4096 像素地面贴图。网站先加载总览和第一站，之后每到一站就预先加载下一站，几站共用的贴图放进一个缓存池，换站时只释放不再需要的那些。网站按屏幕宽度判断设备，宽度不到 920 像素的屏幕拿到一段只有约 4.6 MB 的手机版影片。手机的浏览器和桌面上的 Safari 还会拿到减半尺寸的贴图和 2048 像素的光照贴图。手机因此一共下载约 40 MB，平板拿到手机版影片和全尺寸贴图，约 59 MB。网站却没有限制像素比，像素比为 3 的手机仍然按屏幕的全部像素绘制。

80 MB 的下载量并没有让访客对着一块空白屏幕干等。服务器在 0.06 到 0.11 秒内开始返回页面，加载画面的花纹在 0.26 到 0.33 秒出现，开场的第一句字在 6.5 到 7.5 秒之间出现。加载期间页面最长卡住约 0.74 秒，画面不跳动。

Persepolis Reimagined 为不同需要的访客做了不少安排，但有一个关键按钮没有名字。右下角的辅助功能面板里有减少动态效果、高对比度、放大文字和不需要拖拽四个开关，前两个会自动跟随系统设置，面板里还能切换语言。铭文的朗读带着字幕，听不到声音的访客也能读到内容。雕像前那个花纹圆框却在读屏软件里没有名字，读屏软件的用户不知道那里能看到今天的照片。

Persepolis Reimagined 是 FWA 2022 年的年度最佳，同一年访客投票的人气奖也是它，FWA 给它的当日最佳打了 88 分，归入建筑与设计、艺术插画与展览和教育三个类别。它在 Awwwards 拿到的是年度开发奖 Developer Site of the Year，那是 Awwwards 每年另评的一个技术方面的年度奖。

这个站在 Awwwards 拿分最高的是创意 Creativity，为 8.36 分，内容 Content 紧随其后，为 8.23 分，复原的城市、真实的文物和铭文朗读放在一起，很可能是这两项高的原因。可用性 Usability 最低，为 7.41 分，开场要先下载约 80 MB，城里又要一站一站地滚动过去，这些都可能拉低了这一项。开发奖的五位评委给出 8.03 分，动画 Animations 最高，为 9.60 分，网页性能 WPO 最低，为 7.20 分，和工程章里 80 MB 的下载量正好对应。响应式 Responsive 是 8.0 分，和手机上那段精简的影片、底部的说明卡片和重新排过的菜单对得上。

这个项目是一支跨行业的团队做出来的。Monks 负责设计、三维和开发，盖蒂的考古学家、历史学家和策展人负责把关内容，研究古代材料的学者 Ali Mousavi 参与了材质的复原，建筑的底模来自 Persepolis3D 项目，音乐另请了研究古代波斯音乐的教授做顾问。Monks 的战绩同样算到写报告时为止，它在 FWA 上获奖 333 次，在 Awwwards 上拿过 59 次当日最佳和 4 次年度奖。盖蒂在 FWA 上一共有 7 个奖，其中包括这个站拿到的年度最佳。