Josh Profile picture
Technical UI Designer @GearsBreakfast | 3D artist and dev of silly lil games 🪴 | Views & opinions are my own | he/him

Sep 30, 2022, 12 tweets

💧 Stylized Water in UE5 Breakdown 💦

After I posted my latest scene, there were a few people who reached out to me about the water! While I'm working to finalize the complete project breakdown, here's a 🧵on the material:

#UnrealEngine #gameart #VFX

Firstly, the water is based on the SingleLayerWater material type in Unreal. This colors the scene below the water mesh and allows for transparency without having to code that logic in the graph. I introduce slight color variation by using a curve to define the AbsorptionColor.

The sparkly effect on top is what completes the water's signature look. It is made with fairly uncomplicated logic based on techniques used by Nintendo on Mario Galaxy. @JasperRLZ provides a thorough breakdown here that helped me a ton:

To summarize, two panning samples of a noise texture are multiplied and selectively clipped until you get two unique, shimmery effects to add back together. Here's a look at the entire function:

I created my texture in Photoshop by manipulating a few layers of Cloud noise until it looked similar to Nintendo's, and then pan two samples of it in different directions before multiplying them and running the result through two If statements.

If #1 cuts out parts of the noise that are greater than a certain threshold. This creates the not-so-shiny part of the surface effect. These shapes have a clear edge and fade out towards the center—this is due to the abscence of all the higher-value information.

If #2 cuts out parts of the noise that are less than a certain threshold. This lets *only* values higher than the threshold through, which controls the rarity of the really bright sparkles.

Here are some manipulations of the threshold values: ([no effect] vs [If #1 & If #2 thresholds = 1])

And ([If #1 = 0.05; If #2 = 1] vs [If #1 = 0.05; If #2 = 0.8])

The opacity of #1 and the brightness of #2 are processed after the texture limiting.

For refraction, I generated a normal map from the same noise texture and blended two panning samples of that to match, scaled down by 0.5 for larger, more pleasing waves. And that's the main effect, in full! ✨

The water also includes a shoreline effect to appear on objects that enter the bounds of the water mesh, and sine-based offset to create the appearance of waves. You can check the graphs out on the project page for the overall environment, Forest Relic: artstation.com/artwork/aGqKy0

I plan on expanding this material in the future to have it fit more contexts, and finding ways to optimize it further. Thanks a lot for following along! I hope this helps you in your own watery tech art explorations 🌊

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling