Medal of Honor: Above and Beyond

Medal of Honor: Above and Beyond is a VR game developed by Respawn Entertainment and published by Electronic Arts, released on 11 December 2020. The site went live three or four weeks before the release. Its problem was that most visitors did not own a VR headset, yet the site had to make them feel they were standing on a battlefield using a flat screen. Amélie, a WebGL developer at Jam3, wrote a making-of article on Medium. It says the team played an early build of the game and picked Dubuisson, the village where the player fights as a member of the Resistance. The game was still in development, so the team could not use its models and built the village from scratch. Instead of cutting one more trailer, the site freezes a battle at one moment and lets visitors scroll their way into it.

When visitors open the site, the screen first shows a notice that the content is intended for mature audiences, and then the home page appears. A hand-painted piece of the game's key art fills the home page, with an American soldier in a helmet holding a rifle in front of ruins, and the MEDAL OF HONOR logo sits over it with two buttons, CHARGE INTO HISTORY and WATCH TRAILERS. After a visitor clicks CHARGE INTO HISTORY, two title cards appear over the painting one after the other, the second reading DUBUISSON, OCCUPIED FRANCE 1944, with a loading bar below it. When loading finishes, the site plays a 32-second first-person intro in which the player picks up a pistol inside a house, steps onto a balcony and fires at enemy soldiers in the street. Shortly before the intro ends, the picture cuts into the 3D town, and from here the visitor scrolls on their own.

The team packed this frozen moment densely. A soldier is halfway through throwing a grenade, splinters and leaflets from an explosion hang in the air, a Resistance fighter is firing with the smoke stopped at her muzzle, and a plane hangs in the sky trailing fire and smoke. The camera's route loops through the town in a figure of eight, about four times as long as the town is wide, and crosses itself once in the middle. Nine dossiers sit along the route in order, and their numbers follow the order in which visitors reach them. The camera slows down and settles in front of each one, so the pace alternates between fast travel and stopping to look.

The nine dossiers stand for nine of the game's mechanics, starting with CRASH LANDING (parachuting in behind enemy lines), going through RAPID FIRE, QUICK DRAW, MAN DOWN and others, and ending with ROCKETS AWAY. When a visitor opens a dossier, the site dims the town and plays a gameplay video in the middle, with the dossier's title and a one-line description in the lower left. The team says in the article that collecting intelligence dossiers has been part of several games in the series, so the site borrows that mechanic to reveal the game, and by the end of the route visitors know what the game lets them do.

At the end of the route the picture stops in front of the tank, and GO BEYOND THE CALL, Do you have what it takes? and a JOIN THE FIGHT button appear in the middle. After the visitor clicks JOIN THE FIGHT, the site moves to an end screen where a gameplay montage loops behind the line COMING DECEMBER 11TH TO OCULUS AND STEAM, with three choices below it: restart the experience, sign up for updates, or share. The site finally leads visitors to the sign-up form and asks them to leave an email address until the game launches. Beyond the 3D town, the site's header links to three more pages. ABOUT is a dossier of the game's characters, TRAILERS holds the trailers, and JOURNAL holds the development diaries, which had already appeared on the teaser site in the first phase of the campaign.

This report measures the copy that the Wayback Machine web archive saved on 2 December 2020, which falls within the weeks when the site won its awards. The original address, oculus.com/medal-of-honor, now redirects to the game's page in the Meta store, and the models, the images painted onto them (textures) and the videos used to live on Facebook's content delivery network, where those links have also expired. The archive kept almost every file of the site, and when visitors open the archived copy the home page works, but after they click CHARGE INTO HISTORY the loading bar stops at 40% for good. The cause is the archive's replay code, which injects a helper file into the background program that unpacks the site's models, and that helper file no longer exists on the archive's server. The pictures and measurements in this report were taken after fixing that one problem.

The site organises every picture around two materials. The 3D town is an oil painting, and the interface is a 1940s military dossier. The team says in the article that the town's style comes from the impressionist brushwork of the game's key art, which recalls WWII propaganda posters. The interface carries on the intelligence-dossier look of the series' first game, so that every element would feel like a real object from the 1940s. Both the painting and the dossier are handmade things, so the 3D picture and the flat interface look as if they come from the same decade.

The town's art direction is an oil painting at dusk. The walls are ochre and yellow earth, the shop fronts are brick red and dark green, the fire is a strong orange, the smoke is grey-brown, and a pale haze washes out the trees and villages in the distance. Every texture was painted by hand with brushes over many passes, and the strokes are plain to see up close. The team set up lighting in Blender to imitate the game's dusk light and stored the shadows it produced as images laid over the models. All the light and shade visitors see comes from those images, and the scene has no real-time lights at all. Wherever a visitor stops in the town, the view looks like a painting.

The site's interface specification also comes from the dossier. All interface text uses DIN Next Slab, a heavy slab serif (serifs being the small strokes at the ends of letters), which the team says they chose because typewriters were an essential military tool in WWII. The sizes are far apart. Dossier titles are 36-pixel bold capitals, character names use the regular weight, and small labels such as PHOTOGRAPH and PRINT L are only 8 pixels, in light capitals with letter spacing set to more than a third of the type size. Body text uses a separate sans serif, Basis Grotesque, in a slightly warm dark grey, #55524D. The main buttons are white with dark text inside two pencil-drawn frames whose rough lines do not quite meet, and on hover the outer frame spreads outward a little. The site draws each dossier marker as a quickly sketched pencil reticle with a randomly generated file code beside it, such as 7J- 1421, which changes every time the site is opened.

The ABOUT page uses this dossier language most completely. The page is a sheet of pale grey paper (#D8D6D1) with a rule across the top, the line CHARGE INTO HISTORY and a file number in the top right, and below them a handwritten signature and a round official seal. Ten of the game's characters each get a card with an ID photo, a left thumbprint, a name and a short profile, crop marks drawn at the corners, and red ink stamps on some cards. The team says they deliberately held back on paper texture because too much of it turns cheesy, so the paper is faint and the lines and stamps do most of the work of saying this is a dossier.

The sign-up panel is a dark version of the same dossier. It appears on the right side of the screen on a near-black #242424 under the title JOIN THE FIGHT. The email field and the SIGN UP button use the same pencil frames as the home page button, with a round postmark-style stamp beside the button. The interface inside the 3D town is kept to a minimum. The MEDAL OF HONOR logo sits top left and the ABOUT, TRAILERS and JOURNAL links sit top right, LEGAL and EXPLORE HEADSETS sit bottom left with a sound switch bottom right, and a vertical line of ticks runs down the right edge with one tick per dossier. That leaves most of the screen to the picture.

On phones the site only works held upright, and when visitors turn the phone sideways the screen shows the message PLEASE ROTATE YOUR SCREEN. The site crops the home page painting to a portrait frame with the soldier filling the top half and the logo and buttons over the middle, and the top right becomes a round menu button. Inside the town, the logo in the top left shrinks to the letters MOH. The dossier title no longer sits at an angle in the 3D scene but lies flat in the lower left corner, with DOSSIER 01 and CRASH LANDING set larger than on a computer, while the line of ticks stays on the right.

The painting on the home page moves slightly with the cursor. The nearer a part of the painting is to the viewer, the further it moves, so the soldier shifts more than the brick wall behind and the flat picture gains depth, and when the cursor stays still the picture drifts slowly by itself. When the painting first appears, it grows from its normal size to 1.05 times over two and a half seconds, fast at first and slow at the end. After a visitor clicks CHARGE INTO HISTORY, the camera pushes into the left side of the painting over three seconds, slow at both ends and fast in the middle, as if the camera were charging into the picture.

Inside the town, scrolling drives the camera along the route, and the camera's position always follows the scroll progress. On a Windows computer each notch of the wheel moves the camera 1.5% of the whole route, and scrolling back moves it backwards. The camera never jumps to its new position. Each frame it closes only a small part of the remaining distance, so after the visitor stops the wheel the camera keeps gliding for a moment before it settles. At the high graphics setting, every turn of the wheel also brings a radial motion blur to the edges of the picture for a little over half a second. The blur rises in a third of a second and fades in under half a second, which gives each scroll a sense of momentum. When the cursor moves across the screen, the camera turns a few degrees towards it, so visitors can look around while they move along.

As the camera approaches each dossier, several things change together. First, scrolling gets heavier: the same notch of the wheel moves the camera only a fraction of the usual distance, less than a tenth at the slowest, and visitors come to a stop here without noticing. At the same time the camera's field of view narrows from the usual 40 degrees to the low 20s, which brings the picture closer, and the camera tips to one side by up to about 25 degrees, like the tilted framing of war photography. The background goes soft while the person or object that the dossier is about stays sharp, the corners of the picture darken, and the centre of that darkening moves to the dossier's position. After the camera leaves a dossier, all of these return to normal together, and in this way the visitor's attention is led from one stop to the next.

The dossier markers have their own motion. The first time visitors enter the town, the prompt Click on hotspots to explore (hotspots being the site's name for the dossier markers) appears, changes to Scroll to navigate four seconds later, and disappears after another three. When a dossier comes into view, its reticle locks on with a hand-drawn animation, and when the cursor moves over the reticle it plays a second hover animation. The team says these small animations were made in After Effects and played back frame by frame from images, which is why they look drawn by the same hand as the pencil frames.

When the site changes scenes, it uses a transition that looks like battlefield smoke. The new picture first shows through a few scattered holes in the old one, and the holes have edges like billowing smoke. The smoke grows at an even rate over one and a half to two seconds until it joins up and swallows the old picture completely. The cuts from the home page to the intro, from the intro to the town, and from the town to the end screen all use this kind of transition, and the one leaving the home page uses a differently shaped set of smoke. When a visitor clicks a tick on the line at the right edge, the site also uses it to switch between two places in the same town. The camera moves to the new dossier halfway through, so visitors see a cloud of smoke swallow the current view and find themselves at another dossier when it clears.

The sound in the town also follows the camera. Sixteen sounds are attached to specific places in the town, including burning fire, explosions and soldiers grappling, as well as two clips of bullets slowing down. The closer the camera gets to a source, the louder it plays, and the sound comes from the left or the right, while some sounds play only once as the camera passes. A low, sustained drone plays under the whole route and gives way to the home page music at the end.

On phones, visitors swipe up or down and the camera moves straight from one dossier to the next, taking a little over three seconds per move, slow to start and slow to stop, and the camera also turns as the phone tilts. The team says the very first prototype of the site was a mobile version that used the phone's gyroscope to look around. On a computer, the picture holds 60 frames per second all the way along the route.

The site renders with three.js, and the whole site is in fact a React page on oculus.com, bundled inside Facebook's own framework. It has five three.js scenes, for the preloader, home, intro, town and end, and they share one WebGLRenderer. A CSS3DRenderer sits on top of it, and the dossier labels are real DOM elements that the CSS3DRenderer places in 3D space, so they change perspective with the camera.

The town hands all of its light and shade to hand-painted textures. It is a single glTF file converted from FBX with Facebook's FBX2glTF, using Draco compression and KHR_materials_unlit, and the model carries two UV sets and no normals. At runtime the site looks each mesh up by name in a table and gives it an unlit ShaderMaterial. The shader does three things: it reads the painted colour texture, multiplies it by a baked shadow texture on the second UV set, and adds a fog that grows with the square of the distance. Fire, explosions, smoke, muzzle flashes and the distant forests and villages are flat cards painted on transparent textures, and because three.js's transparency sorting made these cards clip each other, the team wrote a draw order of more than a hundred entries by hand. The town's models never move, so every object has automatic matrix updates switched off. What keeps moving in the picture is two particle systems, 1,000 smoke particles and 5,000 ash and ember particles, spread along the camera route and sorted by distance every frame.

The camera route is data, not a finished animation. It is made of two Catmull-Rom curves, one for the camera's position and one for the point it looks at. The site resamples the control points to a fixed count and then smooths them with a Catmull-Rom curve using chordal parameterisation. The visitor's scrolling only changes a progress value between 0 and 1, and each frame the actual progress moves 2.5% of the way towards the target. The site uses that progress to read the camera position from the curve and reads the look-at point slightly further along, so the camera always faces ahead.

Along the same progress value the site lays out five keyframe tracks, for scroll speed, field of view, roll, how far ahead the camera looks, and post effects (depth-of-field strength and the vignette's position). The speed track falls linearly with the camera's distance to each dossier point, down to the minimum set for that dossier, and this is why scrolling gets heavy near a dossier. The team built a route editor in the browser that let them drag every control point, adjust every track and export the result as JSON, and the editor's code shipped in the production bundle too.

The site's post-processing switches on only when needed. The team says in the article that the scene has about 500,000 triangles, so they did not want to draw it several extra times for post effects. They also dropped a painterly effect that used world-space depth and triplanar mapping to distort the textures, because it cost too much performance and blurred texture detail. Depth of field switches on only when its strength is above zero, and then the site first draws the scene's depth with a depth-only material before drawing colour, so a frame takes four passes instead of the usual two. Motion blur runs only at the high setting and only while scrolling. A final pass combines FXAA anti-aliasing, film grain and the vignette, and the renderer's own anti-aliasing is switched off.

The transition is also one pass in post-processing and runs only during a switch. It draws the old scene and the new one into two render targets and blends them through a 54-frame black-and-white sprite sheet used as a mask, whose red channel is the blend factor, and the sprite sheet steps forward frame by frame with the transition's progress. When a visitor jumps with the tick line, the old and new scenes are the same town, so the team changed the transition so it could draw one scene twice from two camera positions.

The site gives the home page painting its depth with a depth map. It places the painting on a plane and loads a separate 26 KB greyscale depth map in which brighter means nearer to the viewer. The shader reads each pixel's depth and shifts the colour texture's sampling coordinates by an amount set by the cursor position and the idle drift, moving brighter pixels further. One painting and one depth map produce the parallax this way, with no need to cut the painting into layers.

The site downloads everything in two batches. The first batch loads while the visitor is on the home page and holds the intro video, the transition masks, the small interface animations, the home page music and the two decoders, about 11.7 MB on a computer. The second batch, mostly the town's model and textures, loads after the visitor clicks CHARGE INTO HISTORY behind the title cards and the loading bar. The site plays the intro only after it finishes. The 159 textures are all high-resolution paintings by the team, converted to Basis Universal and packed into one zip file, 45.4 MB in the high-quality version, the largest file on the site, and 15.4 MB in the normal version. Model and textures ship separately, Draco and Basis decoding run in Web Workers, and the team used a Node.js script to generate the mesh-to-material table and a config of which resolution each kind of device should get. A computer at the high setting downloads about 74.6 MB in total and a phone about 42 MB, and the nine dossier videos load only when visitors open them, adding another 20 to 25 MB if they watch them all.

The site picks one of two graphics settings according to the graphics card. It scores the card with detect-gpu against a table of GPU benchmarks bundled into the page, and computers with a high score and no touch screen get the high setting, while everything else gets the normal setting. The high setting allows a pixel ratio of up to 1.5, adds motion blur, uses 1,000 smoke and 5,000 ash particles, and loads the high-resolution textures. The normal setting caps the pixel ratio at 1.3, drops motion blur, cuts the particles to 500 and 3,000, and uses the same textures as phones. Touch devices on top of that double the field of view and skip the CSS3DRenderer, drawing the dossier labels in WebGL on an interface layer instead. The benchmark table dates from 2020 and does not include cards released later, so the site now puts a newer and faster card on the normal setting.

Both settings share one rule that saves work: they cap the picture at the area of 1280 by 720 before multiplying by the pixel ratio. On a screen 1,920 pixels wide at a pixel ratio of 1, the site therefore draws only about 1,369 by 673 pixels and stretches them to fill the screen. The picture gets softer as a result, though the painted brushwork and the film grain make the softness hard to notice.

The site does little for accessibility. Only the mouse wheel, a trackpad or a finger can move the camera, and no keyboard key does. Dossiers open only when someone clicks the marker in the 3D scene with a mouse, so keyboard-only visitors cannot reach any of the gameplay videos. Each tick on the line at the right edge is a button that the keyboard can focus, but none of them has a name, so a screen reader only announces "button". The site also ignores the system's reduced-motion setting, and the tilting camera, motion blur and smoke transitions are the same for everyone.

The site is the FWA's Site of the Year for 2020, and in the same year it also won the People's Choice Award from the visitors' vote. The FWA gave its FWA of the Day 88 points and named it FWA of the Month for November 2020. On Awwwards, Creativity is the highest of the four categories, probably because freezing a battle into a painting you can move through is a rare idea, and Usability is the lowest, which may have to do with the wait before entering and with scrolling being the only way forward. In the Developer Award, Animations scored highest and Accessibility lowest. Beyond the two platforms, the site was named Website of the Year 2020 by CSS Design Awards and won a Bronze Pencil at The One Show 2021.

Jam3 is a regular on both platforms and has won more than a hundred FWA awards in total. The team's article shows how many kinds of people a site like this needs. Painters made the style frames and painted the textures pass after pass, 3D artists built, lit and baked the town in Blender, WebGL developers wrote the rendering, the camera and the tools, and interface developers built the dossier interface with React, GSAP and StyleX, Facebook's styling library.