Water Shader in Unity

You, • Unity
Back

Recently I've been reintruiged by unity's shader graph and I decided to find in myself the inspiration to make some water shaders. In this article i'd like to share with you my process.

Photo

My shader has three parts;

  1. Depth Color

  2. Foam

  3. Waves

I first started off by giving my shader some color. The simplest way to achieve the perception of depth in water is tweening between two colors; a shallow water color and a deep watercolor. My shader achieves this by subtracting the screen position from the camera's depth mask and then dividing this by the desired distance that the viewer should be able to look into the water. we can then saturate and clamp this value from 0-1 and plug it into Unity's built-in lerp function which will fade between our two colors.

The second on my list was foam. The foam in this shader is purely procedural and uses Perlin noise (the saving grace of many an indie developer). It starts off by using a custom-written function that scrolls through Perlin noise infinitely giving the foam the illusion of motion and current. I then take my depth value (from the watercolor) and use it to clamp and fade my Perlin foam to only the shallowest parts of the water (or where the water makes contact with something: shore, boat, etc.).

The third and final part of my shader uses Perlin noise also, but in this case to provide the illusion of waves. I scroll a Perlin noise texture over my water mesh displacing each vertex based on the color of my texture (white = up, black = down).

Photo

By combining all of these things together I was left with one final "purdy" water shader.

Sources:

© Riley Ponzini-Beck.RSS