Josh Profile picture
Sep 30, 2022 12 tweets 5 min read Read on X
💧 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. ImageImageImage
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: Image
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. Image
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. Image
Here are some manipulations of the threshold values: ([no effect] vs [If #1 & If #2 thresholds = 1]) Image
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. Image
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 🌊

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Josh

Josh Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(