Inasa
patreon
Stylized water tutorial
🕑 Added 2019-04-17 11:23:03 +0000 UTCThere are a lot of ways to do water. It's one of the more diverse shaders in UE4 in terms of approach and there are countless tutorials on them. My water setup is pretty basic but I hope you find something interesting.
- Reference
Let's begin by understanding how water can be represented. I think it's important to determine where your project's style sits on the scale. In my instance, it's definitely stylized, but there are still touches of realism that separates it from a simplified "low-poly" style, so I it's probably in the center left. Keep this scale in mind to adjust how you want the final material to look like.
I tend to collect reference from personal photos, travel blogs and Twitter. Twitter is a godsend, they have a great photography community. I can proudly say my reference folder has 6000+ photos/illustrations.
For this tutorial, I'll mostly focus on the base color of the material since normals, opacity, and other misc is very basic. The material is translucent with tessellation enabled.
❗ Disclaimer the parameters needs to be adjusted for your liking. Copying the values will not produce the same results ❗
Base color overview (High res: https://i.imgur.com/jTbs5Ip.jpg )
Let's begin with the master color. We lerp between 2 constant3 vectors, using depthfade for the alpha. One will control the color of shallow water and the other controlling deep water.
Demonstration
To add the surface foam, we mask using a B/W texture and setup its panner and UVs. Since the panner setup is common, we will make a material function. The texture will be swapped if the water body is a river, the ocean or a pond.
Demonstration
Material function
We will also add two types of noise, opacity noise and distortion. We will first add with a distortion mask to create a wavy effect.
Demonstration
We will then multiply with another mask. This creates areas that doesn't have foam and it helps to hide tiling.
Demonstration
The shoreline waves are taken from Hippowombat's guide ( https://twitter.com/hippowombat/status/1033888690945253376 ). Thank you! We use an opacity noise once again to add variation.
Demonstration
We use lerp to control the amount of foam the edge gets, and control the color. Sometimes I want a white edge around my water so I will lerp another color with depth fade.
To control the horizon color, we lerp with pixel depth. Finally plug everything into the base color slot. 
Demonstration
An option is to add rapids with vertex painting. Use a lerp with vertex color as the alpha.
Other stuff
For opacity, we add 2 depthfades. Deep water will be opaque and shallow water will be translucent. Plug into Opacity.
Normal maps are taken from Tequila Works ( https://www.youtube.com/watch?v=4FIDBeF_4SI ). Plug into Normal.
We finish up by adding displacement. Plug into World Displacement.
Refraction. Fresnel Falloff should actually be negative, further objects should be distorted more than closer ones. Plug into Refraction.
That's about it! It's a pretty amateur setup compared to professional works, but adding complicated things will just confuse me. I mostly learn by breaking down existing projects and picking apart things that might be useful. It looks good but I think it's still considered WIP, so if you have tips on improving it please let me know, the help will be appreciated.
I hope you enjoyed my first tutorial, a guide on trees and grass will be published soon
Thanks for reading °˖✧◝(⁰▿⁰)◜✧˖°
Sources (in order)
https://twitter.com/tiffaart/status/1021004588629934082, http://canvas.pantone.com/Jiro_Miyata
The Legend of Zelda: The Wind Waker
https://twitter.com/hyogonosuke?lang=en
https://www.travel.co.jp/guide/matome/1520/, https://photohito.com/photo/7933227/, https://twitter.com/odwure?lang=en-gb
http://yamaainojoki.blog.fc2.com/blog-date-201307.html
https://twitter.com/Iska_TOSHIKAZU
https://twitter.com/hippowombat?lang=en
https://twitter.com/simonschreibt?lang=en
Additional Resources:
https://www.artstation.com/artwork/veV1a
https://www.youtube.com/watch?v=FuGQXtISR6w
https://www.youtube.com/watch?v=4FIDBeF_4SI
https://www.youtube.com/watch?v=5zoflexdo70
Comments
Inasa Fujio
Here are some of my favorites: <a href="https://twitter.com/Taishi_Arashida" rel="nofollow noopener" target="_blank">https://twitter.com/Taishi_Arashida</a> <a href="https://twitter.com/konnpic7" rel="nofollow noopener" target="_blank">https://twitter.com/konnpic7</a> <a href="https://twitter.com/nekoisanxxx" rel="nofollow noopener" target="_blank">https://twitter.com/nekoisanxxx</a> <a href="https://twitter.com/saaaki69my" rel="nofollow noopener" target="_blank">https://twitter.com/saaaki69my</a> <a href="https://twitter.com/cocoro_comet" rel="nofollow noopener" target="_blank">https://twitter.com/cocoro_comet</a> <a href="https://twitter.com/okapi_traveinfo" rel="nofollow noopener" target="_blank">https://twitter.com/okapi_traveinfo</a> <a href="https://twitter.com/kaidanmeguri" rel="nofollow noopener" target="_blank">https://twitter.com/kaidanmeguri</a> Each one specializes in something, whether it be flowers or staircases, I'd recommend using the Who to follow feature to look for more people based on your tastes
Misia Clive
This is great! Do you by chance have any good twitter links or recommendations for finding good reference pictures?
turquoise.useless.owl
Cool!
