The Turn of the Screw

歌剧的预告片通常是一段剪好的视频，观众只能从头看到尾。Opera North 是总部设在英国利兹的歌剧团，它 2020 年要演出布里顿的歌剧 The Turn of the Screw（《螺丝在拧紧》），故事改编自美国作家 Henry James 的同名小说。这个预告片没有剪视频，而是把剧中五段音乐放进一个三维场景，让访客自己走进去听。站上的介绍写得很直接，它把用空间音频技术录下的音乐和交互画面合在一起，造出一片阴森的闹鬼风景。这段介绍还邀请访客把光标移到人物身上，近距离听他们唱，或者听到声音从身后传来。

访客打开页面，迎面是这部戏的宣传海报。一个男人站在一扇高窗外面往屋里看，屋里的白纱窗帘被风吹开，地毯上丢着两个玩偶，墙边靠着一辆小自行车。海报下方请访客按自己的设备选一档画质。Low 是压缩过的 MP3 音频，约 30 MB，Medium 是标准的 MP3，约 45 MB。High 是无损的 FLAC 音频，约 100 MB，下载量也最大。加载的时候，屏幕上会换上四句提示。第一句建议戴上耳机，第二句说移动和拖动鼠标可以转头去看，听到的声音也会跟着变。第三句说把光标移到人物身上能听得更近，第四句说访客可以靠着看它自己放，也可以去找自己喜欢的段落。

选好画质之后，预告片会自己开始放，一共五章，加起来约六分四十秒。五章分别叫 Opening、Dawn、Day、Dusk 和 Night，从开场一路走到深夜，每章开头都会浮出章名、一句歌词和一句剧情。Dawn 那一章的歌词是 I have not forgotten your charge of silence，剧情是家庭女教师一夜没睡，天亮时给孩子们的叔叔写信，说这里有些不对劲。到 Night 那一章，两个鬼魂在深夜呼唤两个孩子，引着他们越走越近。五章放完，屏幕上只剩一个 END 和一个重新开始的按钮。

剧中六个角色都在场景里，访客能用光标挑出此刻要听清的那一位。这六个角色是家庭女教师、管家格罗斯太太、两个孩子 Miles 和 Flora，以及前任男仆和前任家庭教师两个鬼魂。某个角色正在唱的时候，访客把光标放到这个角色身上，不到半秒，这个角色的声音就从带着回响的远处换成清楚的近处。光标移开以后，那段近处的声音要将近五秒才完全退回去，听起来像人慢慢走远了。Day 那一章里两个人并排站着，光标落在中间时，两个人的声音会一起被拉近。

The Turn of the Screw 的每一章都有自己的一种天色，但全部压在同一层雾里。Opening 是深青色的夜，Dawn 换成淡紫色的雾湖，岸边开着一排粉色的树。Day 是一片金黄带绿的草坡，Dusk 变成粉紫色的湖面，Night 又回到深青，只剩湖中央一座小岛。五种颜色差得很远，但远处都化进雾里，近处都撒着发光的小点，所以换章时像是同一个地方换了一个时辰。三维画面只占屏幕中间的一条，上下各留一道黑边，像在电影院里看宽银幕。

Lusion 把场景里的人物刻意做得不像真人，他们是由许多小平面拼出来的人形，没有五官，身体半透明。这些人影在雾里泛着琥珀色的光，看起来就像一个个鬼魂。Opening 那一章唱歌的甚至不是人形，只是一团悬在半空的光。场景的其余部分也一样简单，小教堂、木码头、小屋和小船都是棱角分明的几何体，草坡上撒满会发光的彩色小圆点。这样的做法让画面看起来不像照片，更像一片梦里的风景，访客的注意力也就落回到声音上。

界面上的字沿用了 Opera North 这一季的视觉。开始画面上的片名是一张画好的字，THE TURN 和 SCREW 用很窄很高的无衬线大写字母，OF THE 两个小词上下叠在中间，整排字是淡淡的紫色。导航、按钮和章名用同一类窄体无衬线字 Zurich Condensed，全部大写。章节开头那句歌词和剧情说明换成 Georgia 的斜体小字，读起来像歌剧院节目单上的一段注释。

屏幕底部的时间轴把五章的长短也画了出来。五个章名不是平均分开的，而是按每章的时长排在一条细线上，相邻两个章名之间的距离就是前一章的长度。Night 最长，约两分钟，所以它后面留出的那一段线也最长。时间轴右边是暂停、跳到下一章、静音和全屏四个小图标。

左上角的三道横线是打开菜单的按钮，菜单打开后，屏幕左边出现一条黑色的栏，栏里是 ABOUT、CREDITS、TICKETS 三个大写的词和 Opera North 的标志，三维画面上同时盖下一层半透明的深色布帘。访客点开 About 以后，一张白纱窗帘的剧照占满中间一栏，片名和剧情介绍压在剧照上，用的是和海报同一套字和颜色。

预告片里的镜头不是访客开着走的，它沿着一条事先设计好的路线慢慢推进，像架在轨道上的摄影机。访客移动光标时，镜头会跟着轻轻偏一点。访客按住鼠标拖动，可以把头转向别处，松手以后镜头就停在新的方向，不会弹回去。打开了系统里减少动态效果设置的访客，看到的镜头运动和别人完全一样，这个设置是给容易被屏幕上的运动弄得不舒服的人用的，站点没有对它做任何处理。

画面会跟着音乐动，每一段歌声里的重音都在一张时间表里标好了时刻。到了那一刻，歌手身边的光球就跳一下，一章里同时有几个人在唱时，每个人的重音各记一份。正在唱的人身上会慢慢亮起来，停下来又慢慢暗回去，所以访客就算没戴耳机，也能从画面上看出此刻是谁在唱。

章与章之间有一段七八秒的过渡，画面先暗下去，章名和那句歌词浮到中间，下一章的天色、雾的浓淡和光晕的强弱再一点点换上来。这七八秒也配了自己的一小段音乐，每一章结束时各放一段，和这一章的歌声分开录制。

菜单那道布帘的摆动不是实时算出来的。布料的飘动事先已经模拟好，每一帧布料的形状都存进了一张图片，网页里只要按顺序把这些帧放出来。打开菜单时，布帘用大约一秒半展开，之后一直轻轻地来回摆。

整段六分多钟放下来，画面平均每秒 60 帧，超过 32 毫秒的慢帧只占千分之一点四。从 Opening 换到 Dawn 的那半分钟里，站点要一边放过渡一边下载约 20 MB 的新声音，这是全程帧率最低的一段，也还有每秒 58.7 帧。

这个预告片的三维画面用三维库 three.js 来画，动画交给动画库 GSAP，声音部分用的是浏览器自带的 Web Audio 接口。每一段人声都被放在场景里对应人物的位置上，访客的耳朵就是镜头，镜头转向哪里，声音就从哪一边传来。Lusion 把全部代码打包成一个约 950 KB 的脚本，模型、贴图和声音都放在亚马逊的云存储上。

访客点下画质按钮之前，页面要下载约 3.3 MB，其中一半以上并不属于这部预告片。Opera North 的网站在这一页上挂了一长串广告和统计脚本，包括谷歌、Facebook、TikTok 和 Twitter 的追踪代码，合起来约 1.9 MB，是预告片自己那个脚本的两倍。选了 High 之后，预告片先下载约 20 MB，大约 16 秒后开始放，把五章全部放完一共要下载约 116 MB，其中 105 MB 是声音。三维模型加起来只有 3.6 MB，六个角色的模型合在一起才 110 KB。每一章的声音都是在上一章结束、进入过渡的那几秒才开始下载，所以访客不用一开始就等完全部内容。选 Low 放完五章约 25 MB，选 Medium 约 55 MB，开始播放前都要等 20 秒左右。

这一页本身打开得不慢，服务器在 0.13 到 0.22 秒之间就返回第一个字节，Google 建议的上限是 0.8 秒。浏览器在 0.76 到 1.09 秒之间画出第一块内容，快于 Google 建议的 1.8 秒，这时出现的是那张海报。加载时有十来个长任务，也就是一次占住浏览器超过 50 毫秒、让页面暂时没法响应操作的脚本，合计约 0.9 到 1.2 秒，最长的一个约 0.1 到 0.2 秒。布局位移（CLS）是 0，页面上没有东西跳位置。

这片夜景的质感大多来自场景画完之后的一道整体处理，三档画质在画面上也有差别。画面上那层柔和的光晕、四角压暗的暗角、贴着地面的低雾和平滑边缘的抗锯齿，都是在整张画面上再处理一遍得到的，每一章各有一套自己的光晕和雾的强度。三档画质里，High 播放无损的 FLAC，另外两档播放 MP3，而且湖面的倒影只按一半的分辨率来画。

键盘用户能把这部预告片从头放到尾，但过程很难。开始画面上要按 19 次 Tab，焦点才落到 Medium 按钮上，前面 18 次走过的是还没打开的菜单链接、还没出现的底部按钮和藏在屏幕外面的面板链接。画质按钮和底部按钮获得焦点时，样子和平时完全一样，键盘用户看不出焦点停在哪里。读屏软件这边做对了一件事，底部的暂停、下一章、静音和全屏四个图标按钮都写好了名字。页面上另有六张图片没有替代文字，读屏软件会把它们当成没有内容的图片读过去。

FWA 给这个预告片的 85 分由 38 张票算出，归在动画、艺术插画展览和推广三类下面，2 月 1 日又把它评为 1 月的月度最佳。团队在 FWA 上的说明写的是，这是 Lusion 为 Opera North 做的一个沉浸式 WebGL 体验，和声音艺术家 James Bulley、约克大学的 AudioLab 一起，把一段有故事的视听体验带给观众。

创意 Creativity 是这个站在 Awwwards 得分最高的一项，有 8.17，用光标去选听哪一位歌手，在当时的网页上还很少见。Awwwards 一共评四个分项，另外三项是设计、可用性和内容，每项满分 10 分。得分最低的是可用性 Usability，7.12，开场要先选画质、等十几秒，人物又要访客自己在雾里找，可能都拉低了这一项。前端开发评委那一边，这个站拿到 7.03 分，刚好过了开发奖要求的 7 分。五个分项里动画 Animations 最高，有 8.67，无障碍 Accessibility 最低，只有 6.33，对应的正是工程章里那些看不见的焦点。

这份署名里一半是做声音的人，这和预告片把玩法放在听上面是对得上的。Lusion 负责画面和网站，录音和空间化交给约克大学的 AudioLab，声音设计由 James Bulley 和 AudioLab 一起完成。站上的演职员表还列出了参加录音的五位歌手和一支乐团。Nicholas Watts 唱前任男仆 Peter Quint，Lorna James 唱家庭女教师，Eleanor Dennis 一人分饰格罗斯太太和前任家庭教师 Miss Jessel。Ben Hayes 和 Jennifer Clark 唱两个孩子，伴奏是 Opera North 的乐团。上表里的获奖数是各家至今的累计。