Medal of Honor: Above and Beyond

《Medal of Honor: Above and Beyond》是 Respawn Entertainment 开发、Electronic Arts 发行的 VR 游戏，2020 年 12 月 11 日上线。这个网站在游戏上线前三四周发布，它要解决的难题是，大部分访客没有 VR 头显，网站却要让他们在电脑和手机的平面屏幕上感受到身处战场的感觉。Jam3 的 WebGL 开发者 Amélie 在 Medium 上写过一篇制作文章，文中说团队先玩了游戏的早期版本，选中了玩家扮演抵抗军战士的 Dubuisson 村。游戏当时还在开发，团队拿不到游戏里的模型，于是自己从头搭了这座小镇。网站没有给访客再剪一段预告片，而是把一场战斗停在一个瞬间，让访客自己滚动着走进去。

访客打开网站后，屏幕上先出现一句内容提示，说接下来的内容面向成年观众，然后才是首页。首页铺满一幅手绘的游戏宣传画，一个戴钢盔的美国士兵端着枪站在废墟前，中间压着 MEDAL OF HONOR 的标志和 CHARGE INTO HISTORY、WATCH TRAILERS 两个按钮。访客点击 CHARGE INTO HISTORY 以后，宣传画上依次出现两张字卡，第二张写着 DUBUISSON, OCCUPIED FRANCE 1944，字卡下面是加载进度条。加载完成后，网站播放一段 32 秒的第一人称开场片，玩家在一间屋子里拿起手枪，走到阳台上朝街上的敌军开枪。开场片结束前，画面切进三维小镇，访客从这里开始自己滚动。

团队把小镇里的这个瞬间安排得很满。一个士兵把手榴弹扔到一半，炸飞的木片和传单停在半空，抵抗军的女战士正在开枪，枪口的烟停在枪口前，一架飞机拖着火焰和黑烟悬在天上。镜头走的路线在小镇里绕了一个八字形，总长大约是小镇宽度的四倍，路线在小镇中间还和自己交叉了一次。路上按顺序排着九个档案，档案编号就是访客遇到它们的顺序，镜头在每一个档案前都会放慢、停稳，所以整段路的节奏是快速穿行和停下细看交替出现。

九个档案对应游戏的九种玩法，从 CRASH LANDING（跳伞潜入敌后）开始，经过 RAPID FIRE、QUICK DRAW、MAN DOWN 等，到 ROCKETS AWAY 结束。访客点开一个档案后，网站压暗三维小镇，在中间播放一段游戏实机视频，左下角写着档案的标题和一句说明。团队在文章里说，收集情报档案是这个系列好几代游戏里都有的玩法，所以网站借它来揭开游戏内容，访客走完整条路，也就知道了这款游戏里能做什么。

走到路线的尽头，画面停在坦克前，中间出现 GO BEYOND THE CALL、Do you have what it takes? 和 JOIN THE FIGHT 按钮。访客点击 JOIN THE FIGHT 后，网站进入结尾页，背后循环播放一段游戏混剪，前面写着 COMING DECEMBER 11TH TO OCULUS AND STEAM，下面是重新开始体验、订阅更新和分享三种选择。网站最后把访客带到订阅表单，请他们留下邮箱等游戏上线。三维小镇之外，网站的页眉还有三个页面。ABOUT 是一份游戏角色的档案，TRAILERS 放游戏预告片，JOURNAL 是开发团队的制作日志，这些日志是宣传第一阶段的预热网站上就有的内容。

这份报告测的是网页存档 Wayback Machine 在 2020 年 12 月 2 日保存的版本，这一天在网站获奖的那几周里。原来的地址 oculus.com/medal-of-honor 现在会跳转到 Meta 商店里这款游戏的页面，网站用到的模型、贴在模型表面的图片（贴图）和视频原来放在 Facebook 的内容分发网络上，那些链接也已经失效。网页存档几乎保存下了网站的全部文件，访客打开存档后，首页能正常显示，但点击 CHARGE INTO HISTORY 以后，加载进度条会一直停在 40%。原因出在存档的回放程序，它给网站解压模型用的后台程序注入了一个自己的辅助文件，而这个文件在存档服务器上已经不存在了。报告里的画面和测量都是在修好这一处之后得到的。

网站用两种材质组织所有画面。三维小镇是一幅油画，界面是一份 1940 年代的军方档案。团队在文章里说，小镇的画风来自游戏宣传画的印象派笔触，这种笔触让人想起二战时期的宣传海报，界面则沿用了这个系列第一代游戏的情报档案风格，希望每个元素都像 1940 年代的实物。油画和档案都是手工做成的，所以三维画面和平面界面放在一起时，看起来出自同一个年代。

小镇的美术方向是暮色里的油画。墙面是土黄和赭石色，店铺的门面是砖红和墨绿，火焰是浓烈的橙色，烟是灰褐色，远处的树林和村庄被一层发白的雾气冲淡。每一张贴图都是画师用笔刷一遍遍画出来的，笔触在近处看得清清楚楚。团队在 Blender 里搭了一套模仿游戏里黄昏光线的灯光，把算出来的投影存成图片叠在模型上，所以访客看到的明暗全部来自这些图片，场景里没有一盏实时计算的灯。访客停在小镇的任何一处，眼前的画面看起来都像一张画。

网站界面的规格同样来自档案。所有界面文字都用一款粗衬线体 DIN Next Slab（衬线是笔画末端的小装饰），团队说选它是因为打字机是二战时军队的必备工具。字号分得很开，档案标题用 36 像素的粗体全大写，角色名用常规字重，PHOTOGRAPH、PRINT L 这类小标签只有 8 像素，用细体全大写，字间距拉到字号的三分之一以上。正文另用一款无衬线体 Basis Grotesque，颜色是带一点暖的深灰 #55524D。主要按钮是白底深字，外面围着两道铅笔画出来的线框，线条有毛边、不完全重合，悬停时外圈的线框会往外扩开一点。网站把档案标记做成快速勾画的铅笔准星，旁边配一行随机生成的档案编号，比如 7J- 1421，每次打开网站都不一样。

ABOUT 页面把这套档案语言用得最完整。页面是一张浅灰的纸（#D8D6D1），顶部是一条横线、一行 CHARGE INTO HISTORY 和右上角的档案号，下面是一个手写签名和一枚圆形的官方印章。十个游戏角色各占一份卡片，每张卡片上有一张证件照、一枚左手指纹、名字和简介，四角画着裁切线，有的卡片上还盖着红色的印章。团队说他们刻意控制了纸张纹理的用量，因为纸纹用多了会显得做作，所以纸面很淡，主要靠线条和印章来交代"这是一份档案"。

订阅更新的面板是同一套档案的深色版本。面板出现在屏幕右侧，底色是近黑的 #242424，标题写着 JOIN THE FIGHT，邮箱输入框和 SIGN UP 按钮都用和首页按钮一样的铅笔线框，按钮旁边还盖着一枚邮戳样的圆章。三维小镇里的界面则压到最少：左上角是 MEDAL OF HONOR 的标志，右上角是 ABOUT、TRAILERS、JOURNAL 三个链接，左下角是 LEGAL 和 EXPLORE HEADSETS，右下角是声音开关，右边缘是一条竖着的刻度线，每一格对应一个档案。这样，屏幕的绝大部分面积都留给了画面。

在手机上，网站只支持竖着拿，访客把手机横过来，屏幕上会出现 PLEASE ROTATE YOUR SCREEN 的提示。网站把首页的宣传画裁成竖幅，士兵占据上半屏，标志和按钮叠在画面中间，右上角换成了一个圆形的菜单按钮。进入小镇以后，左上角的标志缩成 MOH 三个字母，档案的标题不再斜放在三维场景里，而是平放在屏幕左下角，用比电脑上更大的字号写出 DOSSIER 01 和 CRASH LANDING，右边仍然保留那条刻度线。

网站首页的宣传画会跟着光标轻微地移动。画里离观众越近的部分移动得越多，士兵比背后的砖墙动得明显，所以这幅平面的画看起来有了前后的层次，光标不动时，画面也会自己慢慢地漂。宣传画刚出现时，会在两秒半里从原来的大小放大到 1.05 倍，开始快、结束慢。访客点击 CHARGE INTO HISTORY 以后，镜头用三秒钟朝画面的左侧推进去，动作两头慢、中间快，像摄影机冲进了画里。

进入小镇以后，滚动推动着镜头沿路线前进，镜头的位置一直跟着滚动的进度走。在 Windows 的电脑上，滚轮每转一格，镜头就沿路线前进全程的 1.5%，访客往回滚动，镜头就倒着退回去。镜头不会一下跳到新位置，每一帧只追上剩下距离的一小部分，所以访客停下滚轮以后，镜头还会顺着惯性滑一小段才停稳。高画质下，每次转动滚轮，画面边缘还会出现半秒多的放射状动态模糊，模糊在三分之一秒里出现，再用不到半秒散去，滚动的动作因此显得有冲劲。光标在屏幕上移动时，镜头会跟着朝光标的方向偏转几度，访客可以在走路的同时左右看。

镜头靠近每一个档案时，几样东西会一起变化。首先是滚动变得沉重，同样转一格滚轮，镜头只前进原来的几分之一，最慢时不到十分之一，访客在这里不知不觉地停下来。同时，镜头的视角从平时的 40 度收窄到 20 多度，相当于把画面拉近，镜头还会歪向一边，最多倾斜约 25 度，像战地摄影里的倾斜构图。背景在这时变得模糊，只有档案对应的那个人物或物体保持清晰，画面四周也同时压暗，暗角的中心移到档案所在的位置。离开档案以后，这几样东西再一起恢复，访客的注意力就这样被一站一站地引过去。

档案标记本身也有动作。访客第一次进入小镇时，屏幕上先出现 Click on hotspots to explore 的提示（网站把档案标记叫作 hotspot），四秒后换成 Scroll to navigate，三秒后消失。准星在档案出现时用一段手绘动画锁定目标，光标移到准星上时，准星还会再播放一段悬停的动画。团队说这些小动画是在 After Effects 里做的，网站把它们一帧一帧排成图片播放，所以它们看起来和铅笔线框是同一只手画的。

网站换场景时，用的是一种像炮火烟雾的转场。新画面先从旧画面上几个零散的小洞里露出来，小洞的边缘像翻滚的烟团，烟团在一秒半到两秒里匀速长大、连成一片，最后把旧画面完全吞掉。首页进入开场片、开场片进入小镇、小镇进入结尾页，用的都是这种转场，首页那一次换了一套形状不同的烟团。访客点击右边刻度线上的某一格时，网站也用它在同一座小镇的两个位置之间切换，镜头在转场进行到一半时换到新的档案前，所以访客看到的是一团烟吞掉当前的画面，烟散开时人已经站在另一个档案前了。

小镇里的声音也跟着镜头的位置变化。小镇里有十六个声音挂在具体的地点上，包括火焰的燃烧声、爆炸声和士兵扭打的声音，其中还有两段子弹慢下来的音效。镜头离一个声源越近，它就越响，声音也会从左边或右边传来，有些声音只在镜头经过时响一次。整段路上一直垫着一段低沉的持续音乐，走到尽头时换回首页的配乐。

在手机上，访客用手指上下滑动，镜头直接从一个档案移到下一个档案，每次移动用时三秒多，起步和停下都很慢，镜头还会跟着手机的倾斜转动。团队说网站最早的原型就是一个用手机陀螺仪看四周的版本。在电脑上，整条路滚动下来，画面一直保持每秒 60 帧。

这个网站的画面由 three.js 渲染，整个网站其实是 oculus.com 上的一个 React 页面，脚本打包在 Facebook 自己的框架里。网站有预加载、首页、开场、小镇和结尾五个 three.js 场景，它们共用一个 WebGLRenderer。渲染器上面再叠一个 CSS3DRenderer，档案的标签是真正的 DOM 元素，由 CSS3DRenderer 放进三维空间，跟着镜头一起变换透视。

小镇的做法是把所有光影都交给手绘贴图。小镇是一个 glTF 文件，由 Facebook 的 FBX2glTF 从 FBX 转出，用了 Draco 压缩和 KHR_materials_unlit，模型里只有两套 UV，没有法线。运行时，网站按网格的名字查表，给每个网格换上一个不受光照的 ShaderMaterial。着色器只做三件事：读出手绘的颜色贴图，乘上第二套 UV 上的烘焙阴影贴图，再叠一层按距离平方增长的雾。火焰、爆炸、烟、枪口火光和远处的森林村庄都是画在透明贴图上的平面卡片，团队发现 three.js 的透明排序会让这些卡片互相裁切，于是手工排了一张一百多项的绘制顺序表。小镇的模型完全静止，所以每个物体都关掉了矩阵的自动更新，画面里一直在动的是两套粒子，1000 个烟雾粒子和 5000 个灰烬与火星粒子，它们沿着镜头路线分布，每帧按远近排序。

镜头的路线是数据，不是一段做好的动画。路线由两条 Catmull-Rom 曲线组成，一条管镜头的位置，一条管镜头看向的点。网站先把控制点按固定数量重新采样，再用 chordal 参数化的 Catmull-Rom 曲线把它变平滑。访客的滚动只改变一个 0 到 1 之间的进度值，每一帧把实际进度向目标进度靠近 2.5%，再用这个进度去曲线上取镜头的位置，看向的点取在进度稍微靠前的地方，所以镜头总是看着前方。

沿着同一个进度，网站还排了五条关键帧轨道，分别管滚动速度、视角、滚转、看向点的提前量和后期效果（景深的强度、暗角的位置）。速度轨道按镜头离每个档案点的距离线性降低，降到这个档案设定的最低值，这就是靠近档案时滚动变沉的原因。团队在浏览器里做了一个路线编辑器，可以拖动每个控制点、调整每条轨道，再把结果导出成 JSON，这个编辑器的代码也一起打包进了正式上线的脚本。

网站的后期处理只在需要时打开。团队在文章里说，场景有约 50 万个三角形，所以他们不愿意为后期效果把场景多画几遍。团队还放弃了一种用世界坐标的深度和三平面映射去扭曲贴图的画意效果，因为它太耗性能，也会糊掉贴图的细节。景深只在强度大于零时打开，先用一个只写深度的材质把场景画一遍深度，再画颜色，这时一帧要画四趟，平时只要两趟。动态模糊只在高画质下、而且只在滚动时打开。最后一趟把 FXAA 抗锯齿、颗粒噪点和暗角合在一起，渲染器本身关掉了抗锯齿。

转场也是后期处理里的一趟，只在切换时运行。它把旧场景和新场景分别画进两个渲染目标，再用一张 54 帧的黑白序列帧当遮罩把两张图混合起来，遮罩的红色通道就是混合系数，序列帧随着转场的进度一帧一帧往前走。在刻度线上跳转时，旧场景和新场景是同一座小镇，团队为此改了转场，让它能把同一个场景在两个镜头位置各画一次。

网站用一张深度图给首页的宣传画做出了前后层次。网站把宣传画贴在一个平面上，另外加载一张 26 KB 的灰度深度图，越亮的地方离观众越近。着色器读出每个像素的深度，按光标的位置和自动漂移的偏移量，把颜色贴图的取样坐标挪动一点，越亮的像素挪得越多。这样一张画和一张深度图就做出了视差，不需要把宣传画拆成好几层。

网站把所有资源分两批下载。第一批在访客看首页时下载，包括开场片、转场遮罩、界面上的小动画、首页的配乐和两套解码器，在电脑上一共约 11.7 MB。第二批在访客点击 CHARGE INTO HISTORY 之后下载，藏在字卡和进度条后面，主要是小镇的模型和贴图，下载完成后网站才播放开场片。159 张贴图都是团队手绘的高分辨率图，转成 Basis Universal 格式以后打成一个压缩包，高画质版本 45.4 MB，是整个网站最大的文件，普通版本 15.4 MB。模型和贴图分开交付，Draco 和 Basis 的解码都在 Web Worker 里进行，团队用一段 Node.js 脚本生成了网格和材质的对应表，以及每种设备该拿多大分辨率的配置。高画质的电脑一共要下载约 74.6 MB，手机约 42 MB，九段档案视频只在访客点开时才下载，全部看完还要再下载 20 到 25 MB。

网站按显卡分两档画质。它用 detect-gpu 和一份打包在页面里的显卡性能表给显卡打分，分数高、又不是触屏设备的电脑走高画质，其余的走普通画质。高画质的像素比最高 1.5，有动态模糊，有 1000 个烟雾粒子和 5000 个灰烬粒子，用高分辨率贴图。普通画质的像素比最高 1.3，没有动态模糊，粒子减到 500 和 3000，用和手机一样的贴图。触屏设备在这之外还会把视角放大一倍，并且不用 CSS3DRenderer，档案标签改由 WebGL 自己画在一个界面层上。这份性能表是 2020 年的，表里没有之后发布的显卡，所以网站反而会把今天一块更新、更快的显卡当成普通画质。

两档还共用一条省力的规矩，它们都把画面的尺寸限制在 1280×720 的面积以内，再乘以像素比。所以在像素比为 1、宽 1920 的屏幕上，网站实际只画大约 1369×673 个像素，再拉伸到全屏。画面因此偏软，不过油画的笔触和颗粒噪点让这种软不太显眼。

网站在无障碍上做得比较少。镜头只能用滚轮、触控板或手指推动，键盘按键不会移动镜头。档案只能用鼠标点击三维场景里的标记打开，所以只用键盘的访客看不到任何一段游戏视频。右边刻度线上的每一格是一个按钮，键盘可以聚焦到它们，但它们都没有名字，读屏软件只会读出"按钮"。网站也不读取系统的减少动态效果设置，倾斜的镜头、动态模糊和烟雾转场对所有访客都一样。

这个站是 FWA 2020 年的年度最佳，同一年它还拿到了访客投票的观众票选奖。FWA 给它的当日最佳打了 88 分，并把它评为 2020 年 11 月的月度最佳。在 Awwwards 上，它的四个分项里 Creativity 最高，大概是因为把一场战斗冻结成可以穿行的油画这个主意很少见，Usability 最低，可能和进门前要等一段加载、进门后只能靠滚动推进有关。开发奖里动画一项的分数最高，无障碍一项最低。两个平台之外，它还拿到了 CSS Design Awards 2020 年的年度网站，以及 2021 年 The One Show 的铜铅笔奖。

Jam3 是两个平台的常客，在 FWA 一共拿过一百多次奖。从团队的文章看，做这个站需要好几种人一起合作。画师先画出风格样张、再一遍遍手绘贴图，三维美术在 Blender 里搭小镇、打灯、烘焙阴影，WebGL 开发者写渲染、镜头和工具，界面开发者用 React、GSAP 和 Facebook 的样式库 StyleX 做出档案界面。