From high-end VFX to your web browser: expanding the world of Fallout
Welcome back, vault dwellers!
In celebration of the release of season two of Fallout, Magnopus and Amazon MGM Studios launched the World of Fallout experience. For the first time, we gave fans everywhere the chance to go behind the scenes and explore the series from the comfort of their own vault in a brand new way – exploring scenes built with the same VFX assets seen in the show.
While the initial release showcased Vault 33 and the Farm, we’ve since expanded the experience with two further iconic scenes: the mighty Caswennan airship used by the Brotherhood of Steel and Mr House’s penthouse lair. As the long wait for season three begins, we’re diving deeper into how we built these new environments – taking high-end virtual production assets and distilling them down to run in a humble web browser.
The jump from a TV screen to a browser is more than just a change in size; it’s a total shift in how the world is "drawn”. The difficulty essentially comes down to three things:
Size: Film-quality assets are massive. While a TV studio can handle terabytes of data, a web experience needs to be "light" enough to load over a standard internet connection without a long waiting screen.
Memory: Browsers have strict limits on how much memory they can use. We have to compress high-resolution textures into smaller, smarter packages so the browser doesn't crash or stutter.
The "one-size-fits-all" problem: Unlike a TV show where the image is fixed, a web experience has to look great and run smoothly on everything from a high-end gaming PC to a three-year-old smartphone.
To meet these constraints, our first step across the entire project was a massive geometry pass. We meticulously rebuilt and optimized every model to drastically reduce their triangle counts, stripping away unnecessary polygons while fighting to preserve the iconic silhouette and detail fans expect from the Fallout universe.
Caswennan: scaling the skies
The original Caswennan models used in the show were built using a complex material-layering system in Unreal Engine – too “heavy” for a browser. To ensure the scene ran smoothly across all devices, we made the following adjustments:
Material overhaul: Beyond standard geometry fixes, we reworked the textures and UVs. This allowed us to convert the surfaces from a layered setup into a streamlined web-ready format.
Texturing strategy: We maximized efficiency using a combination of repeating patterns (tileable textures) and UV mapping various assets to different sections of shared texture sheets (trimsheets).
Performance tuning: To maintain scene performance, we removed or simplified objects located far from where the player actually travels.
However, the goal was to strip away the data, not the personality. To bring the airship to life, we knew we couldn’t just have a static model suspended in the air – after all, we’re supposed to be soaring over the Wasteland. So we injected a sense of motion through a range of visual effects, from waving flags and wind socks to burning thruster engines and drifting clouds.
The secret to "lightweight" motion
Because the experience uses Waypoint navigation (fixed camera spots), we found a clever shortcut: we "baked" animations into video textures and displayed them on flat planes. To the user, it looks like a complex 3D simulation; to the browser, it’s as easy to play as a standard video.
The moving flags, engine and clouds, as well as the dynamic ambient audio, make it feel more life-like.
To help sell the effect, these aren’t just flat images – they use full PBR (Physically Based Rendering). This ensures that the scene's lighting hits the moving flags exactly as it would a 3D object. To achieve this, we baked each component of the material into a texture atlas video:
Base Color: The iconic colors of the Brotherhood of Steel.
Normals: Dictates how light bounces off the surface to create depth.
Alpha: This "cuts" the image so the edges of the flag are see-through.
ORM (Occlusion, Roughness, Metalness): A three-in-one map where the Red channel handles shadows, Green handles shine, and Blue defines the metallic surfaces.
Collaboration
Before we dive into our next scene, it’s worth noting how we managed this whole effort. World of Fallout is built using our Connected Spaces Platform, which enables unprecedented collaboration. Artists can work hand in hand with engineers, content owners, and each other in real-time across the globe – whether they’re working within the web, Unreal Engine, or Unity.
Real-time collaboration: The OKO web editor (right) shows updates simultaneously in the World of Fallout application (left).
Here, you can see that changes to the scene made in the web editor are updated in real-time in the application. Multiple users can edit the scene simultaneously, leave annotations for feedback and approve changes all without leaving their browser. This is possible not just from the OKO Web editor but in the Unreal Engine via the OKO Plugin. This allowed our teams across the globe in the US, France, and the UK to work together in real-time. A life-saver for this project!
The penthouse
For the final scene, we decided to go all out. Working with a single room presented an opportunity for us to push our technology further than we had before. The primary hurdle here was the "one-size-fits-all" problem. In traditional VFX, beautiful reflections and glass refractions use a technique called “Path Tracing” to accurately simulate light bouncing off surfaces, something that is extremely slow to render. In a web browser, they have to be calculated in milliseconds, whether the user is on a high-end desktop or a three-year-old smartphone.
Mastering reflections
The standout feature of this scene was the shiny marble floor. In real-time graphics, reflections are among the most rewarding effects to achieve. To rise to the challenge without crashing mobile browsers, we introduced a new enhancement to the engine: Reflection Probe Volumes.
The “Gommorrah” sign is reflected in the floor to the left of the image, something not previously possible in the engine.
Reflection Probes enable us to blend multiple volumes (also known as per-pixel blending), resulting in much higher fidelity reflections that integrate naturally into the scene. By layering these probes within one another, we can concentrate reflection detail where the player looks most, while ensuring the rest of the environment remains visually cohesive, regardless of the hardware's power.
How do you think the bubble effect is created? Answers below!
The illusion of refraction
The other standout feature in the penthouse is the secret room, in particular, the bubbles within the cold fusion device. If you look closely, you can see how the glass distorts the bubbles around the edge. In a standard game engine, this would require complex "refraction shaders" that often fail on lower-end mobile devices.
So, how did we make it work for everyone? It's video textures all the way down. The distortion is “baked” into the video in such a way that it perfectly lines up with the edges of the 3D glass, giving the appearance of real-time refraction. It’s a classic "movie magic" trick – delivering a high-end visual result with almost zero impact on the device's memory. It looks like a complex simulation, but it runs as smoothly as a standard YouTube video.
Some say that if you stare at this video long enough, the secrets of the universe will reveal themselves.
It's what’s underneath that counts
Creating a cutting-edge, real-time 3D experience requires a solid foundation. To reimagine the world of Fallout for the web, the engineering team at Magnopus built a custom renderer on top of PlayCanvas, optimized for this experience. For more details on this, read our article Building Beautiful Worlds Across Platforms with Playcanvas and the Magnopus Web Renderer.
Engine enhancements such as LODs (Level of Detail) and a custom optimization tool we built called gltf-tools (based on the excellent gltf-transform) ensure that we only render what's needed. By combining the precision of film-grade VFX with the custom-built efficiency of the Magnopus web renderer, we've successfully distilled a cutting-edge real-time 3D experience for the humblest of platforms.
This deep dive into the Caswennan and Penthouse is more than just a showcase of technical tricks; it’s a demonstration of our commitment to pushing the boundaries of what is possible in a web browser.
As we continue to develop the Connected Spaces Platform and look to the future, we remain dedicated to delivering high-fidelity, shared experiences that truly allow fans to step inside the worlds they love.
Go experience the World of Fallout right now at https://fallout-s2.amazonstudios.com/
Watch Fallout, Season Two on Amazon Prime Video https://www.amazon.com/gp/video/detail/B0FLSZBRZJ/
