2D water surface with wave and noise

This shader generates a stylized 2D water surface.
It combines sine waves to create a dynamic waterline that moves over time. I added noise texture that i used for this shader to screenshot section.

 

Tested on Godot v3.5.3

 

Shader code
shader_type canvas_item;

uniform float base_y = 0.5;

uniform sampler2D waterNoise : hint_white;
uniform sampler2D waterDistortionNoise : hint_white;
uniform vec4 waterColor = vec4(0.069, 0.333, 0.58, 1.0);
uniform float colorCorection = 0.0;

uniform float distortionForce = 0.026;
uniform float WDBrightness = 0.386;
uniform float WDFreq = 0.39;
uniform float WDSize = 2.0;
uniform float WDSpeed = 3.658;
uniform vec2 tiling = vec2(1.164, 1.0);
uniform vec2 offSetSpeed = vec2(0.035, 0.01);

uniform float wave_frequency = 15.0;
uniform float wave_amplitude = 0.035;
uniform float wave_speed = 3.0;

void fragment() {
    vec2 uv = UV;

    float wave1 = sin(uv.x * wave_frequency + TIME * wave_speed);
    float wave2 = sin(uv.x * wave_frequency * 0.5 + TIME * wave_speed * 0.8);
    float combined_wave = (wave1 + wave2) * 0.5;
    float dynamic_water_level = base_y - (combined_wave * wave_amplitude);

    vec2 noiseUV = uv * tiling + offSetSpeed * TIME * 0.5;
    float noiseValue = texture(waterDistortionNoise, noiseUV).r;

    vec2 waterUV = uv * tiling;
    waterUV += offSetSpeed * TIME * vec2(1.0, 1.0);
    waterUV += noiseValue * distortionForce * WDSpeed;
    vec4 noiseColor = texture(waterNoise, waterUV);
    float intensity = smoothstep(WDFreq, WDSize, noiseColor.r);
    vec3 addLight = intensity * vec3(WDBrightness);

    vec4 water_surface_color = vec4(waterColor.rgb + addLight, 1.0);
    water_surface_color = mix(water_surface_color, waterColor, colorCorection);

    float water_mask = smoothstep(dynamic_water_level - 0.002, dynamic_water_level + 0.002, uv.y);

    vec4 sky_color = vec4(0.0, 0.0, 0.0, 0.0);
    COLOR = mix(sky_color, water_surface_color, water_mask);
}
Tags
2d water surface, 2d wave, sideview water, water, wave
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from emre

Slide Down & Up Text Effect

Gentle Breathing Effect for Face & Body Animation

Related shaders

Cubemap Reflective Water Surface

PSX Style Water Surface – Pixelation, Waves, Scrolling Textures

Rhythmic Color Pulse Shader (Sine Wave Brightness and Tint)

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments