another wave Progress Shader

furet_fr

My version of the wavy watery progress shader.

This can be placed on top of a sprite to keep the sprite shape.

Shader code
shader_type canvas_item;

uniform float progress: hint_range(0.0, 1.0) = 0.5;
uniform vec4 bg_color: source_color;
uniform vec4 wave_1_color: source_color;
uniform vec4 wave_2_color: source_color;
uniform float wave_1_speed = -1.0;
uniform float wave_2_speed = 1.0;

vec4 wave( vec2 uv, vec4 wave_color, float level, float freq, float amp, float sin_shift, float speed ){
	float sinus = sin( (uv.x + sin_shift + TIME * speed) * freq) * amp;
	float shifted_level = ( 1.0 + 2.0 * amp ) * level - amp; //shift to completely hide or fill
	float treshold = step( 1.0 - sinus - shifted_level, uv.y);
	return wave_color * treshold;
}

void fragment() {
	
	vec4 wave1 = wave(UV, wave_1_color, progress, 2.5, 0.13, 0.0, wave_1_speed);
	vec4 wave2 = wave(UV, wave_2_color, progress, 2.0, 0.1, 0.7785*TIME, wave_2_speed);
	
	vec4 combined_waves = mix(wave1, wave2, wave2.a);
	COLOR.rgb = mix( bg_color, combined_waves, combined_waves.a ).rgb;
}
Tags
liquid, progress, 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.

Related shaders

Canvas item2

Wave Progress Shader

Spatial760

(Another) Water Shader

Canvas item16

sine wave camera view shader

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
HEPEBAP
HEPEBAP
1 year ago

on line 23 need:
COLOR.rgba = mix( bg_color, combined_waves, combined_waves.a ).rgba;
to take into account transparency, for example, in the background color

0
Reply
Andrew
Andrew
11 months ago

Here is the same shader but with more parameters exposed to make it easier to modify as you need:

shader_type canvas_item;

uniform float progress: hint_range(0.0, 1.0) = 0.5;

uniform vec4 wave_1_color: source_color;
uniform float wave_1_amplitude = 0.13;
uniform float wave_1_frequency = 2.0;
uniform float wave_1_speed = -1.0;

uniform vec4 wave_2_color: source_color;
uniform float wave_2_amplitude = 0.1;
uniform float wave_2_frequency = 2.5;
uniform float wave_2_speed = 1.0;
uniform float wave_2_shift = 0.75;

uniform vec4 bg_color: source_color;

vec4 wave( vec2 uv, vec4 wave_color, float level, float freq, float amp, float sin_shift, float speed ){
float sinus = sin( (uv.x + sin_shift + TIME * speed) * freq) * amp;
float shifted_level = ( 1.0 + 2.0 * amp ) * level – amp; //shift to completely hide or fill
float treshold = step( 1.0 – sinus – shifted_level, uv.y);
return wave_color * treshold;
}

void fragment() {
vec4 wave1 = wave(UV, wave_1_color, progress, wave_1_frequency, wave_1_amplitude, 0.0, wave_1_speed);
vec4 wave2 = wave(UV, wave_2_color, progress, wave_2_frequency, wave_2_amplitude, wave_2_shift*TIME, wave_2_speed);
vec4 combined_waves = mix(wave1, wave2, wave2.a);
COLOR.rgb = mix( bg_color, combined_waves, combined_waves.a ).rgb;
}

Last edited 11 months ago by Andrew
1
Reply