top of page

Water Shader

​

Final Shader Showcase:
Dynamic Material Instance:
What I'm trying to create:
image.png
Technique I used:
image.png
image.png

01

Single Layer Water

To achieve a realistic water look, I used the Single Layer Water shading mode for scattering color and being able to control the murkiness of the water. 

02

Water Normal

To create the water normal for an ocean surface, I down-scaled the normal maps and moved them toward the shoreline, adding variations based on the speeds and directions. With the Flatten Normal node, I could adjust the intensity of the normal easily. 

image.png

The color that's plugged into Base Color will determine the color of the foam.

image.png
Stationary Foam

I utilized the Distance to Nearest Surface node to create a stationary mask for the first part of the foam creation.

03

Water Foam Creation

image.png
Moving Foam
image.png

By adding the values from the time node on top of the mask that the Distance to Nearest Surface created to a Sine node, I got sine waves that looked like ripples. I wanted to make the lingering, trail-like water foam created by the momentum of the waves, so I used a texture to break down the sine waves.

04

Wave Momentum

By using Sine nodes to create pulsing masks in two different directions, I combined that information with vertex normal to create world position offset for the mesh that had this material assigned.

image.png
Result:
2025-01-23 10-50-30.gif

05

Bonus: Swimming Fish

I created a sphere mask that covered the area of where the tail textures would be, and I added the sine waves information in the mask combined with vertex normal to make the fish tail wiggle. 

image.png
2025-01-22 13-42-39.gif

​To make the fish move along a spline, I referenced the spline blueprint inside the mesh blueprint and used the spline information to transform the mesh blueprint. 

image.png
2025-01-22 13-39-33.gif

Resource

Beach Reference

https://www.istockphoto.com/photo/upon-a-rocky-beach-gm640953512-116019575 

Environment & set-dressing assets are downloaded from Fab

  • Email
  • LinkedIn

© 2025 by RANRAN JIANG.

bottom of page