The first Medal of Honor game was released on Playstation in 1999, at the time there were few first person shooter titles that aimed to deliver a compelling narrative whilst taking you through some of the most exhilarating and dangerous espionage missions during World War II. Directed by Steven Spielburg and developed by Dreamworks Interactive, the game remains a classic in video game history and has inspired and influenced many first person shooters that exist today.

At Jam3 I was asked to be part of a team to work on an interactive website experience for the launch of Medal of Honor: Above and Beyond - a Virtual Reality game built for the Oculus VR headsets developed by Respawn Entertainment.

When I first heard about this brief I was beyond excited. Having played the Medal of Honor games growing up it felt like a true honor to be part of the latest installment.

Jam3 worked alongside Oculus’ creative team to develop a concept that brings the 3D feeling of Oculus VR gaming to players on 2D surfaces. The campaign was divided into two phases: a teaser website which featured dev diaries from Respawn, and the main WebGL Experience, which would launch alongside the gallery trailer.

The WebGL experience turned the game’s painterly key art into an immersive 3D battlefield. By scrolling through the action, you can experience selected features and gameplay moments. By the end, you have a crystal clear idea of what to expect from the game: a stunning first-person experience, gripping moments of heroism, and innovative combat mechanics.

My role on this project was the WebGL Developer. I worked alongside the creatives to help conceptualise, validate and shape the core experience idea. My main tasks would involve creating various prototypes, creating the export pipeline from Blender to threejs, developing the main WebGL experience on Oculus’ development environment.

This was by far the most demanding and challenging WebGL website I’ve worked on to date. There were many systems I developed from the ground up to accommodate the vision for the project.

Camera Path

The camera path navigates the user through this frozen moment in time. To create a more cinematic feel I added various effects like roll, focus and speed, which influenced how the camera moved and felt from hotspot to hotspot. Some of the post processing effects like depth of field and vignette were also changed based on the scroll value.

Positional Audio

To enhance the experience we used positional audio to create a dynamic soundscape across the battlefield. As the user scrolls, sounds trigger around their location amplifying the intensity of the visuals they see.

Hotspots

The scene features various hotspots placed around the map which provide contextual information on certain game mechanics the user will experience during the game. To ground the typography in the scene I used threejs CSS3D renderer.

Post Processing

The post processing effects played an important role for frame composition. Radial motion blur was used on desktop browsers to give a greater sense of speed whilst scrolling through the world. Depth of field activates and vignette intensifies when the user reaches hotspots. I try to be conservative with post processing, I believe that post effects should only be used when appropriate.


The website launched in November 2020 and was very well received by the creative community earning itself the high coveted Site of the Year and Peoples Choice awards from FWA.

Closing Thoughts

I feel so incredibly fortunate to be a part of a campaign for a game that inspired me as a teenager growing up. Every technical 3D skill I learnt to date helped me create this wonderful immersive experience alongside a team of very talented individuals. This project will always hold a special place in my 🖤.

---