top of page

Stylized Water Shader

I created this water shader in the Amplify Shader Editor to be used in the game Edge. The game has a stylized, painted aesthetic that is still grounded in real world physics and lighting. Therefore, I wanted the water to follow the same principles while contributing to the colorful, whimsical theme of the game.

WaterShader.png

Gerstner Waves

To simulate real-world fluid dynamics, I used gerstner waves for my basic vertex displacement method. This allows for the same shader to be used to simulate different bodies of water. Settings can be tweaked to align with calmer, smaller bodies of water, or large, turbulent seas.

I also added an extra layer of detail to the gerstner waves using an additional voronoi noise pattern. This layer also effects the color of the water so it can be used to add more variety or texture to the waves, or it can be turned off completely.

Here is my Gerstner Wave Function using the gerstner algorithm.

Gerstner Waves and Extra Voronoi Noise Offset

Gerstner.PNG

Gerstner Function

GerstnerFunction.png
Normal.PNG

Normals

The surface normals of the shader consist of two differently scaled normal maps that are panned in opposite directions at different speeds to simulate more subtle fluid motion. The scaling and intensity of each normal map can be adjusted depending on the turbulence and size of the body of water.

Depth Foam

Foam Noise Pattern

I wanted this water shader to be easy to reuse in various situations with no asset swapping required, so I decided to create my depth foam using noise rather than a more manual method.

The foam pattern you see here is the result of a normal map split into three channels with each of those channels scaled differently and panning in a different direction and speed. I take the dot product of all of these and raise it to a power, then lerp that pattern in based on the depth.

Foam Noise.PNG

Depth Fade and Edge Foam

Depth and Edge Foam.PNG

Caustics

This shader is designed for Unity's Universal Render Pipeline, which does not support projectors at this time. Therefore, I projected the caustic lighting inside the shader by creating a projection matrix using the depth and light direction. This causes the caustic pattern to appear like it is below the water's surface.

I used a panning voronoi noise pattern to create the caustics texture. Its brightness, amount, and size can be adjusted.

Caustics.PNG
bottom of page