Peeling Back the Varnish: The Graphics of Diablo IV
Diablo IV officially launches on June 5 at 4 p.m. PDT, opening a new plane of Hell for brave wanderers to traverse. Those slaying demons across Sanctuary will quickly notice a defining feature of Diablo IV—it is invitingly dark. This aesthetic harkens back to the universe’s roots, to the beloved gothic tones of the original Diablo and Diablo II. The first of these games came out nearly 27 years ago, and since then, the technology used to establish the visual language for video games has drastically changed.
Lead software engineer Keven Cantin, principal software engineers John Buckley and Kevin Todisco, lead technical artist Aaron Aikman, and senior software engineer Samuel Delmont will illustrate the team’s approach to bringing the graphics of Diablo IV to life, showcase some of the technology used during development, and detail our approach to scalability.
Codex
Philosophy and Guiding Principles
Returning to Darkness Through Technology
Console Performance for Launch
Philosophy and Guiding Principles
– with Keven Cantin, lead graphics engineer
The Diablo IV Graphics team’s goals and philosophy are rooted in the same values that drive Blizzard’s success. We are a gameplay-first company, meaning that every decision we make needs to be in service of creating a game that’s fun to play. With each unique iteration of the mortal realm of Sanctuary, we pushed the limits of our rendering technology. Because Diablo IV has a darker tone, we asked ourselves ‘what can we do as a graphics team to specifically support that idea?’ To answer, we selected a small number of solid features, prioritizing a highly polished result over a wider range of options.
At the heart of our philosophy lies collaboration. Our team of graphics engineers and technical artists worked with different Diablo IV art teams, collaborating with them during the design and development process. Having multi-disciplinary strike teams working on a specific feature is a common occurrence for us. We deeply value the perspectives of not only the art team, but everyone working on the game.
Another aspect that is important to all of us is making the game accessible to a wide audience, ensuring that as many players as possible can fully enjoy the game. We understand that players may have different devices with varying capabilities, and we want to ensure that we deliver a high-performing and visually appealing experience across the board. Our graphics pipeline is optimized to run efficiently on lower-end hardware; for those with higher-end hardware, we leverage the additional capabilities of your device to enhance the visual fidelity and bring the game to new heights.
Returning to Darkness Through Technology
– with John Buckley, principal graphics engineer
Physically Based Rendering
The dark look of Diablo is supported by physically based rendering (PBR), which gives a more realistic look to our game materials. As the name suggests, we use real world and physical values to model the interaction between light and matter in our virtual game world. In a video game, you can code your own reality, which can certainly be a lot of fun. But if you completely untether graphics from reality, it can become very confusing. We chose to ground our technology in real-world physics and only deviated from reality where it felt fitting for the game. For example, there is no such thing as a “negative light source” in the real world, but in the game there are instances when we wanted dark magic to pull light away from the world.
To achieve physically based materials, our art team authored a lot of new data to tell our graphics engine how light should interact with their surface. For example, our art team decided which wavelengths of light radiate from a given in-game material, how smooth or rough the microscopic details are, how metallic the surface is, and many other aspects.
Pictured above are the physical properties of Lilith’s materials, broken down individually.
Light, shadows, and the space in-between
As the art direction came into focus early on, we clearly saw the need for the art of Diablo IV to express a darker tone. This meant shadows—as many as we could coax out of the hardware—while still maintaining a remarkably high frame rate. With an open world that constantly changed, randomly generated dungeons, dynamic weather, and cinematics that would incorporate your unique character, it meant few optimization tricks or shortcuts could be implemented. Fortunately, today’s graphics cards and consoles are amazingly fast, capable of trillions of mathematical operations per second, a staggering feat inconceivable just a few decades ago. These trillions of operations allow us to perform complex lighting and shadow calculations, which closely model the intricate details of reality itself.
The complex web of shapes pictured represents the lighting in a Diablo IV dungeon.
The complexity here comes from the need to compute shadows for all of these separate light sources. To help speed up these calculations, we chose to implement what is known as a deferred renderer— a “tried and true” graphics technique that shares complex material calculations between different light sources.
On top of the deferred renderer sits an elaborate system for calculating, storing, and overlaying shadows that we built from scratch. Dungeons are randomly generated; we don’t know exactly which dungeon configuration will spawn ahead of time. Fortunately, not every part of a dungeon changes after it’s generated. As you move throughout a dungeon, the lighting system attempts to manage and schedule these shadow calculations, so they’re not all done at once. The shadow system is built to take advantage of static objects such as the floor and walls, often storing these calculations for later, and then overlays dynamic objects - such as your character - on top of these stored calculations.
While good materials represent the foundation of our game art, lighting and shadows are necessary to bring that art to life. Like the materials, the lighting of Diablo IV is based upon real-world physics. Technical details like these can easily overburden an art team trying to express an artistic vision, so we layered these details underneath an amazing set of art tools, making it easier for this team to focus on their specialty. To do this, we built an entirely new set of powerful art tools for Diablo IV. Inside these tools is a lot of physics, with applicable terms like lumens, irradiance, and candelas.
One of the unplanned surprises during development came to be the importance of the space in-between. Achieving a dark tone in a gritty and life-like world meant we needed to model the dust and particles between lights and objects. This is called volumetric rendering and is a key player in bringing the art of Diablo IV to life.
In the past, we mimicked these effects with particle systems, pictures placed on top of rectangular shapes, and then layered these in front of the camera. The result gave the illusion of dust and smoke, but it was primitive. In the real world, light bounces around, it interacts with hard, dense structures like walls. But it also travels through a minefield of dust and particles in the air itself, changing physical characteristics along the way. In Diablo IV we modeled the air, so that particles in the air are lit; light moves through the non-empty space between- sometimes scattering, sometimes getting absorbed- while on a journey towards a virtual camera in the game world. All using real-world physics. Even the stained-glass windows emit light into the air itself.
Close-ups
One of the highlights for Diablo IV is that the story is told through in-game cinematics. When the camera gets close to a character, accurately representing skin becomes critical. Light transmits through skin from the back side to the front, as seen with Lilith’s wings. In the real world, light also enters your skin, bounces around inside, and then exits your skin from a different location. The light is changed by the flesh, blood, and bone it travels through; a physical phenomenon known as subsurface scattering. Modeling this complex light interaction brings a character’s face to life—without it a face would look like plastic.
The left image showcases in-game skin without realistic light distribution, while the right image showcases light being realistically distributed across the skin.
HDR in Diablo IV
- with Kevin Todisco, principal graphics engineer
Another newer piece of technology supporting the return to darkness is high-dynamic range displays.
HDR has become quite a hot topic as more and more displays are on the market that support this technology. Before we dive into HDR in Diablo IV, it's probably a good idea to talk more about what it is and its benefits over the display technology we've grown accustomed to in the past few decades.
Displays of yesteryear were only capable of a specific range of brightness. Strictly speaking, the low end was about 0.1 nits—a nit is a unit of brightness on a flat surface, and one nit is the brightness of a candle in an area of a square meter. The high end of these older displays was 80 nits, which isn't all that bright. If you’re familiar with CRT TVs, those likely peaked around 80 nits. It tends to look underwhelming. As HDTVs hit the market, display manufacturers wanted their products to look the best. So they began raising the brightness of their displays up to values like 300 nits. And because of something called the Hunt Effect, colors that are brighter also appear to be more saturated. This makes colors pop more and the image appears to be more vibrant on HD displays—all things that we like to see while playing games.
The HDR display standard has further expanded that range to a current maximum of 10,000 nits, and OLED technology has made it possible to achieve true black on any given portion of a screen. These advancements mean that the HDR internal rendering of a game engine can now be sent directly out to the display without the range compression necessary for the SDR standard. Not only can we achieve brighter brights, but more importantly for Diablo IV, the darkest of darks as well.
Let’s see how this comes to life in the game. In this scene we’ve turned on a false-color visualizer to show the brightness range that would output to a display. Below is a legend to interpret the succeeding two images.
First, we have Diablo IV on an SDR display.
Now compare that to the same scene on an HDR display.
Note how the scene on HDR is achieving true black in some portions of the screen and overall is much darker. So why does the scene in SDR look so much brighter? For SDR displays, we must tonemap the image to raise the darkest values up to that low end of 0.1 nits—you can see this in the shadows of the first screenshot. This range compression also means that we lift the brightness of the rest of the scene, otherwise it would all appear in shadow. Such an issue is often referred to as “crushed blacks” and it’s what our tonemapping for SDR displays avoids.
By contrast in HDR, we can reproduce more faithfully the dim lighting of this dungeon and even have areas of pure black within the shadows, which really helps to augment the dark, gothic feel of Diablo IV.
HDR Changes Since the Open Beta
During the Open Beta, there was an issue where black levels in the game appeared to be "lifted" above the dark values that HDR displays (OLEDs in particular) are capable of. Our team concluded this was due to a log() function meant to help with sample distribution in our color lookup tables. The log() function does a great job for distributing the samples well across the whole color cube, but math buffs out there will note that it can never reach 0 because 20 is still 1 and even 2-10 is still 0.000976. In fact, 0.000976 is significant because it was the minimum color value that the game was able to put into the framebuffer due to the bug. Thanks to the extra image processing that display manufacturers put into their SDR TVs, those displays will show something close to black when they get these values. However, on an HDR TV, these values are interpreted more literally. That value, 0.000976, translates to about 0.07 nits of brightness on the display, which is well above the near-zero nit minimum of an OLED, and would be seen as an unusual brightening of all things dark in the game. We were happy to have fixed this issue in time for Server Slam.
Another key change that we made between Open Beta and Server Slam was the introduction of a new tonemapping curve specifically for HDR. You can think of taking internal HDR values and sending them directly to the display as similar to taking a picture with your camera and posting it without adding any kind of filter. It may look a little "washed out" or uniformly lacking contrast or vibrancy. By introducing a new tonemapping curve curated by the art team, we got the contrast and color saturation we were looking for in HDR. This is perhaps best demonstrated in this desert scene. First, the untonemapped image.
And the same scene with our HDR tonemap.
It’s quite subtle, but if you flip back and forth between these images, you’ll see that the tonemapped image has gained contrast and the sand looks less gray and more, well, sandy.
It can also have a subtle but important effect on color saturation too. Pay close attention to the two light sources in this scene.
The light source on the right side of the image looks natural, but it’s lacking some contrast in its brightest areas. Now, compare it to the same scene with our HDR tonemapping.
Again, the effect is subtle, but extremely important. The orange glow of the light source on the left has red-shifted and the lit area on the right has gained some saturation. These changes were really important to maintain the same look and feel of the game across all displays SDR and HDR alike.
Calibrating Hell
We've worked hard to make the SDR and HDR versions of Diablo IV look stunning by default. We also have calibration options available to account for differences in display and ambient room lighting. Shown below is the HDR calibration screen, where you can adjust the black point, brightness, and white point to tailor the game’s visuals to your liking.
Bridging the Gap with Technical Art
- with Aaron Aikman, lead graphics tech artist
Graphics tech art helps to bridge the gap between engineers and artists by blending the artistry of shaders and procedural art generation with the low-level rendering details that bring vertices and ultimately pixels to your screen.
Most of our shader work happens in pixel shaders, which output values for physically based materials like albedo, roughness, normal, alpha, and emissive. Creating a shader is akin to creating a series of steps for data to be accessed and modified before output. Accessing the data often means sampling textures authored outside of the engine, but the interesting part comes when that data gets mixed together.
For visual effects, this could mean combining tiling noise textures in a way that creates drifting mists, fiery infernos, or poisonous pools without the need to create frame-by-frame textures. We can also use textures with 2D directional information to distort noise textures for even more variance.
The Shades of Sanctuary
Characters represent an interesting mix of straightforward shader elements and shader features to convey status effects such as being on fire, poisoned, or in stealth. To add more dynamic interaction with the environment, characters get wet in the rain and dry off indoors. In the heat of battle, players can become bloodied depending upon the skills they use. And to support high fidelity when near the player, character shaders integrate high-detail textures during closeups.
Environment shaders apply a variety of techniques as well, such as directional blending, adaptive texture scaling, and dissolving. Directional shaders allow for blending different textures based upon the direction the surface is facing, like with snow-covered rocks. Curvature data can be used to modify color and roughness values for edges and cavities on environment assets. Prop shaders use emissive elements to light up and draw attention to interactable objects. Terrain shaders do complex blending of many tile-able textures to create a natural-feeling ground. To limit shader complexity, we created virtual textures that combine multiple textures once, rather than having to blend them for every frame we render.
Water shaders utilize several pixel shader techniques to emulate reality. Artists can paint masks for layers of noise textures and distort them over time. Simulated light below the surface refracts to create a distortion effect and color varies based upon depth of the water. What’s more, characters can interact with the water. Players and monsters passing through water will create wakes and stir up foam. Vertex shader elements let us displace the position of the surface vertices. This is especially apparent when ocean waves roll in on the coast or skills trigger explosions.
Speaking of vertex shaders, many environment assets use math to move what would otherwise be static meshes. Foliage moves when characters and skills interact with them, waves of wind roll through the grass, growths of flesh might undulate, globules of blood and limbs wriggle—all through using data and math in the shader.
Scalability in Sanctuary
- with Samuel Delmont, senior graphics engineer
Diablo IV has been built to run on Windows PC and two generations of consoles. To support this, multiple systems have been implemented to make the engine scalable and able to maintain quality, while respecting the required framerate of each device to deliver the best gameplay experience possible.
Considering the capabilities of PCs and consoles, such as memory constraints and CPU and GPU processor power, Diablo IV will perform at a level that best suits the device running it. For example, assets such as meshes and textures can be loaded at a lower level of detail, and the same treatment can be applied to shaders, visual effects, post effects, and other systems—tweaking each of these settings allows you to prioritize image quality over performance or vice versa.
Understanding the PC Options
The engine of Diablo IV will automatically select the most compatible graphics setting for your PC’s hardware. There are four presets to choose from: Low, Medium, High and Ultra, along with an option to select a different preset to fine-tune the quality and framerate to your exact liking. But it is important to understand the impact each different setting has on constraints such as memory usage and processing cost.
Resolution
One of the main factors of performance is the resolution at which the game is rendered. When playing on PC, the world can be rendered at a lower or higher resolution based on the Resolution Percentage slider, and then rescaled to match the final resolution of the monitor or window the player is using.
Decreasing the Resolution Percentage reduces the internal resolution of the game, yielding better framerate at the expense of a blurrier image. On the other hand, increasing Resolution Percentage increases the internal resolution, which decreases performance as more pixels are rendered, requiring more memory. Doing this offers greater quality and a more detailed image, while also reducing aliasing.
As an alternative to the default upscale method, several upscaling options are available for PC, including NVIDIA DLSS 3, to achieve a higher resolution for the final image while rendering the world at a lower resolution with only minimal quality loss. Whereas consoles leverage a combination of upscaling and dynamic resolution management to maintain high frame rate and visual quality at all times.
Optimizing Settings to Your Experience
The texture quality option is one of the settings with the biggest impact on memory usage and seamless gameplay. There are four quality options to choose from in total, but we’ll focus on two: Ultra and High. Ultra, the highest quality, requires the High-Resolution Assets to be selected via the install options menu within Battle.net and requires at least 32GB of memory installed in the system. The Ultra quality is best used when playing on a 4k monitor, but the game will use more memory to do so. The High option is suitable for 1440p and 1080p resolution displays. Decreasing texture quality makes the game load lower resolution textures and increases performance, while reducing the memory used by the game at the cost of softer looking textures.
The shadow quality also has a big impact on memory usage. Reducing this setting will decrease memory usage while increasing performance, but the shadows will look less sharp for both sun and local lights shadows.
If memory is a concern, we recommend decreasing both texture quality and shadow quality. Some of the other settings have relevant memory impact (like Geometry Complexity), but most have little to no impact. For more information on each individual option, visit the settings menu.
Console Performance for Launch
Diablo IV will be released on several consoles. We have personally selected the best values for each console to obtain the highest quality. The below listed resolution and frame rates are representative of the performance on Xbox consoles and similar hardware.
Xbox:
- Xbox Series X: 60fps at 4K
- Xbox Series S: 60fps at 1440p
- Xbox One X: 30fps at 1440p
- Xbox One S: 30fps at 1080p
- Xbox One: 30fps at 1080p
What’s Next
Our graphical ambitions don’t end here. After launch, the team will continue to introduce new features, and enhance and optimize existing ones. We welcome your feedback and urge you to share any thoughts on the Diablo IV Forums. But, for now, thank you for joining us in this deep dive into the graphics that make Diablo IV so artistically ominous.
We’ll see you in Sanctuary!
-The Diablo IV Team
Enhance Your Stroll through Sanctuary with the NVIDIA DLSS 3
As mentioned previously, the NVIDIA DLSS 3 is one of the upscaling options available for Diablo IV on PC. Using NVIDIA DLSS 3, you can multiply the frame rates on the GeForce RTX 40 Series graphics card to make the fires of the Burning Hells burn that much brighter. If you want to enable DLSS 3, visit here and scroll to the bottom of the page.
NVIDIA’s Diablo IV GeForce Game Ready Driver is now available to download via the Drivers tab of GeForce Experience or through the GeForce website.