We’ve all been taking up hobbies this year. And while I’m sure my life has been enriched by marathoning The Crown and astral projecting out of my body on weekends, Matthew Wilde had a lockdown project that’s a little more substantial: he made boozy bottle shaders for Half-Life: Alyx.
The shaders were added to the game in a May patch, and they immediately started getting love on the internet. It’s easy to see why: they look really, really good. The shader makes bottles appear transparent, with liquid that reacts when you shake the bottle. Before the patch, the bottles made a sloshing sound when shaken, but otherwise they appeared opaque.
I wanted to find out how the shader worked, and there was no better person to ask than Wilde himself.
Spent a good chunk of lock-down doing this important work. Boozy liquid shader, now available in the latest update for Half-Life: Alyx pic.twitter.com/Iw9h98pmEg
— Matthew Wilde (@skilful) May 28, 2020
Wilde is a VFX developer, and he was working at Valve when Alyx was in development — but on Dota Underlords. He made a wine glass shader for the Dota character Jull, which caught the attention of Scott Dalton on the Half-Life: Alyx team. There are lots of bottles scattered around in Alyx, but one particular level takes place in a distillery and requires the player to interact with bottles a lot.
Developing a shader that made the bottles look full of liquid would make the level that much more impressive. And Wilde wouldn’t be starting from nothing, either: the game was basically done, with detailed assets and a powerful lighting system in place.
“All the bottles existed as models, and they were all beautifully textured and they look great,” Wilde said. “And so immediately, we could see that it was really promising.”
But with Alyx’s release date looming, there just wasn’t time to implement the new shader without causing performance issues.
“If there was just the occasional bottle around... that probably wouldn’t have been a problem,” Wilde told me. “But again, it was this distillery level that had thousands of props, and thousands of bottles.”
The shader got shelved for release, and though Wilde was disappointed, he took it in stride. Half-Life: Alyx came out on March 23, 2020. That same day, Jay Inslee, the governor of Washington state, issued a stay at home order that would shut down Valve’s Bellevue offices.
“And so we had time suddenly,” Wilde said. “Lockdown gave us the opportunity to have a look back at things that we hadn’t managed to do previously.”
Making the shader
Shaders are programs that tell 3D objects how to look. This specific shader is a pixel shader, which tells every pixel what color to be, based on how it is lit. Everything that’s rendered in a game has a shader.
“It’s just that some shaders are a bit more involved than others,” Wilde told me.
Shaders end up accounting for a lot of the details that we see. Actually rendering something in 3D — all of the grooves and knots in tree bark, for example — would be time-consuming and performance-heavy. But a shader can create the illusion of tree bark, or armor, or skin, or beer foaming in a bottle, even if the object it’s applied to is just made of smooth, smooth polygons.
Now ensconced at home, Wilde returned to the shader. Alyx already had a lighting system, so what the shader needed to do was figure out what values to use when the lighting was calculated. The shader takes into account inputs like base colors, textures, and reflections for both the liquid and the bottle itself, and then combines all them together.
“And then what you output is another color,” Wilde said. “You do it for every pixel, and you get a result at the end.”
The shader is, first and foremost, the result of obsessive observation. Wilde quite literally sat in his basement, picking up and playing with bottles to see how liquid behaved.
“You look at a shader and you see all the work that’s gone into it, and it’s pages and pages of stuff, but that has never just kind of flown out of someone’s mind, you know, straight into the file,” Wilde told me. “It’s always been a case of building it up slowly... and then getting ideas as you go along, kind of sketching it out.”
Wilde would make observations of the real-life bottle — the foam that develops on beer, or the way liquid catches the light — and then tweak those inputs in the shader so that his creation reflected reality. It was like creating a pointillist painting, pixel by pixel. Notably, there’s no liquid simulation happening here.
“It’s really made to behave how I have determined that it should behave, not anything more realistic than that,” Wilde said. “There is no simulation, it’s just observed.”
That’s why the wording in Alyx’s patch notes is very intentional: “Bottles now appear to have liquid inside them that sloshes around as you shake them.”
Reflection and refraction
Cube mapping has long been how games handle reflections, and even with ray-tracing looming in our future, that won’t change overnight. A cube map is composed of six views baked into a cube. Depending on where the player’s camera is pointing, the game will pull an approximate view from the cube to create a reflection. It’s why mirrors don’t really work in games — cube maps don’t create perfect reflections, and they really don’t need to.
There’s a great example of that in Marvel’s Spider-Man on PS4, where reflections on buildings might show something from nearby, but not necessarily the most accurate thing. We’re usually quite capable of suspending disbelief, because the reflection looks good enough.
This booze shader uses a cube map to create reflections, but also to create the illusion of refraction — which is light passing through an object, rather than bouncing off it.
The bottles are not transparent. But they look transparent, because Alyx is pulling the cube map for your approximate coordinates, and projecting that pre-baked image onto the side of the bottle you’re looking at. It shows you a distorted view of the space, but it’s a wild illusion that absolutely works.
“Using them for a bottle where things are already a bit distorted, where everything’s a bit dirty... it’s actually a really good way of doing it,” said Wilde. “I think it also helps that when you’re looking at glass and liquid, no one knows how it should look, just as an instinctive thing. You just accept when you start looking through glass and things go a bit weird.”
The cube map image is doubly distorted where the shader says there’s liquid. Wilde combines reflections on top of reflections to make it seem like there’s two surfaces: the glass bottle, and the liquid “inside” it.
And that’s how you get the illusion of liquid inside a transparent glass bottle — when in fact, the bottle is empty and opaque.
Fake physics
What I love most about this shader is that it’s detailed enough to pass our mental threshold of realism — even though, again, there’s no simulation involved.
“Everything is faked, everything is cheated. Everything is just kind of observed, and tweaked, and values modified until it just about feels right,” Wilde said. “When I shake a bottle, [the liquid] kind of wobbles around a bit. So we make it wobble around a bit, inasmuch as the wobble looks about right.”
It’s this wobble that initially delayed the shader, as there wasn’t an efficient way to get the information into the game. In the end, the performance cost was negligible, because Wilde’s colleagues at Valve realized they could store data in the shader’s vertex color.
The vertex color is “a relic from an earlier time before realistic lighting and textures,” Wilde told me in an email. “In this instance, it was just a color that was applied across the whole thing. And we didn’t use that color for anything.”
And so the agitation (or, professionally, sloshiness) of the liquid, the direction of gravity, and foam or bubbles, are all stored in these unused RGB channels. When I wave a bottle around wildly, the velocity of the bottle is used to drive agitation, making the liquid appear to slosh around. Bubbles or foam are also tied to velocity, and gradually decay when movement stops. But all the most intensive calculations — lighting, reflections, shadows — are already being done for every object in the game, regardless of whether the player is going nuts with bottles or not.
Why it succeeds
Although working on a lockdown project involving copious amounts of alcohol might sound isolating, when it came to implementing the shader and cracking the performance issue, Wilde wasn’t alone — Alyx’s visual effects are a team effort.
“The success of it comes from, first of all, the fact that the assets themselves are just so good to start with,” Wilde said. “When you’re writing a shader, certainly this kind of shader... you’re piggybacking onto an existing pipeline and existing lighting setups. So it’s just about trying to exploit what’s there as best you can.”
Shaking a bottle might be simple to do in real life, but it’s not so simple to make a virtual bottle respond in kind. With time and frankly impressive powers of observation, Half-Life: Alyx’s boozy bottles came to feel so right that we don’t need to suspend disbelief when we see them. It’s the kind of clever, creative thinking that game development will always benefit from, no matter how advanced technology gets.