Stylized Water Shader In UE5: A Step-By-Step Guide

Refraction & Caustics

Even though most light in our water gets absorbed, we noticed an improvement in the believability of the ground right underneath the water’s surface when utilizing refraction together with the waveforms. When it comes to caustics, the diffuse lighting conditions of our scene would make visible caustic patterns physically implausible, but it felt right aesthetically, which is why we included it anyway (not being bound to physical plausibility is one of the perks of stylized graphics).

Technical Realization in Unreal Engine 5

When building a water material in Unreal, choosing the right shading model and blend mode is crucial. While a Default Lit Translucent material with Surface Forward Shading offers the most control, it is very costly to render. The more efficient choice is the Single Layer Water shading model introduced in Unreal 4.27, which supports light absorption, scattering, reflection, refraction, and shadowing at a lower instruction count. However, there are some downsides. For example, as it only uses a single depth layer, it lacks back-face rendering, making it less suitable for underwater views. And while still quite expensive by itself, its benefits outweigh the drawbacks of our stylized water material.

Waveforms

Starting with the waveforms, we used panning normal maps to simulate the rather calm low-altitude gravity waves. The approach here is simple: create a wave normal map in Substance 3D Designer, sample it twice, and continuously offset the samples’ UV coordinates in opposing directions at different speeds. Give one of the two samples a higher speed and normal intensity to create a sense of wind direction. This panning operation does not need to run in the fragment shader, you can move it to the vertex shader through the Vertex Interpolator without quality loss and thereby reduce the instruction count.