LogInMatt Newell shared the working process behind the recently-presented realistic umbrella shader, made in Unreal Engine 5 for Lushfoil Photography Sim.
In case you missed it, a couple of weeks ago, Game Developer Matt Newell presented a new and improved version of an incredibly realistic umbrella shader made for Lushfoil Photography Sim, Matt's upcoming game that will give you the chance to become a traveling photographer and experience detailed, true-to-life recreations of various real-life landmarks.
Powered by Unreal Engine 5, the shader consists of a single-layer water material with Normals that involves panning textures and particles being fed to Render Target. The demo shared by the developer showed that with this shader one can push realism to the next level and set up ultra-realistic digital rain.
Luckily, Matt agreed to tell us more about the shader, explaining how the transparency and refraction were set up, sharing some insights about the droplets, and discussing the optimization process. You can check out our interview with the developer down below and learn more about the shader by clicking this link.
Introduction
My name is Matt, I'm from Perth in West Australia where I was studying computer systems engineering right up until last month. During my time studying, I couldn't commit to any full-time positions so I undertook a lot of freelance Unreal Engine work doing Environment/Tech Art and blueprint scripting. Because UE, is so versatile I've been able to work in fields like Live Music, Live Streaming, Film, App development for museums, interactive films, and VR. Before I took the plunge with UE, I had a strong background in photography and color design, as opposed to game development.
The "Photography Sim" project I've been doing has sort of been the eventuation of all the various freelance projects I've been working on. It'll be released as a game, but I see it more as a way to showcase my work in 3D environment art in a format that allows people to explore and walk around. Since the game is such an open concept, that's why I've been working on fun, experimental ideas such as the first-person umbrella.
The Umbrella Shader
Several environments I've been working on for the project have a rainy atmosphere, Inspired by several rainy walks I'd done, I decided that a useable umbrella in the game would be a nice addition. I didn't have any specific goals aside from it being first person and being able to see rolling raindrops on a glossy, transparent surface.
The Production Process
I still haven't decided on a final setup, but I found the best glossy/refractive result by using the Single Layer Water shading model. There's nothing unusual about the shader setup aside from the fact that I use a DitherTemporalAA when plugging into the refraction.
I also needed to configure some of my UE5 settings so that the velocity is calculated properly for AA dither, otherwise, you get a very blurry screen smear. I had originally used these settings to help with the AA ghosting on moving foliage(settings shown in the image). I'm also considering using a depth calculation in the shader to get the blur falloff to look a little better, so closer objects are clearer.
The Droplet rolling effect was actually derived from the rain post-process material included in this pack by Andrey Harchenko.
The Umbrella Blueprint initiates a cascade particle system which is then captured to a render target texture that is referenced in the material. This is combined with water normal textures that are both panning and still. The render target definitely produces a convincing effect as the particles can move in a much more irregular fashion than the panning textures.
Optimization
The performance impact was fairly minimal and so I haven't yet done any optimization. I would consider using regular translucency instead of single-layer water because that's what incurs the largest cost. But at the moment I still think the SLW provides the best glossy effect so I'm inclined to stick with it even though it's a bit on the expensive side.
Challenges
The whole task was relatively easy considering most of the render target work was already done and just needed repurposing, the whole endeavor only took about a day or two. The part that was the most time-consuming was definitely finding the right combination of project settings and translucency methods (especially when you consider recompiling shaders after each settings change). I also put a significant chunk of time into the movement of the umbrella relative to the first-person camera, I wanted it to feel as natural as possible.