Ripple shader

Nevoski

I converted/modified this shader from this ShaderToy ripple shader: https://www.shadertoy.com/view/ldBXDD

Just attach the shader to a ColorRect, and play with the shader parameters to get stronger or weaker ripple effects. Everything behind the ColorRect will be affected by the shader.

Shader code
// Converted/modified from ShaderToy: https://www.shadertoy.com/view/ldBXDD
// Attach this shader to a ColorRect

shader_type canvas_item;

uniform float wave_count : hint_range(1.0, 20.0, 1.0) = 20.0;
uniform float speed : hint_range(0.0, 10.0, 0.1) = 3.0;
uniform float height : hint_range(0.0, 0.1, 0.001) = 0.003;

void fragment() {
	vec2 cPos = -1.0 + 2.0 * UV / (1.0 / TEXTURE_PIXEL_SIZE);
	float cLength = length(cPos);
	vec2 uv = FRAGCOORD.xy / (1.0 / SCREEN_PIXEL_SIZE).xy + (cPos/cLength) * cos(cLength * wave_count - TIME * speed) * height;
    vec3 col = texture(SCREEN_TEXTURE,uv).xyz;
	COLOR = vec4(col,1.0);
}
Live Preview
Tags
distortion, drop, ripple, water, wave
This shader is a port from an existing Shadertoy project. Shadertoy shaders are by default protected under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) license unless anything else has been stated by the author. For more info, see our License terms.

Related shaders

guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
GodotUser
GodotUser
3 years ago

Thank you, exactly what I needed. I appreciate the instructions in the comments at the top of the shader.

0
Reply
Mark
Mark
2 years ago

does not work with godot 4

2
Reply
lio
lio
2 years ago
Reply to  Mark

With mouse interaction for godot 4.

shader_type canvas_item;

uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
uniform float wave_count : hint_range(-100.0, 100.0, 1.0) = 60.0;
uniform float speed : hint_range(0.0, 10.0, 0.1) = 3.0;
uniform float height : hint_range(0.0, 0.1, 0.001) = 0.003;
uniform vec2 iMouse;
uniform vec2 iResolution;

void fragment()
{
vec2 cPos = -1.0 + 2.0 * SCREEN_UV / (1.0 / TEXTURE_PIXEL_SIZE);
float cLength = length(cPos);

vec2 waveCentre = vec2(iMouse.x / iResolution.x, iMouse.y / iResolution.y);
vec2 uv = SCREEN_UV + (cPos / cLength) * cos(cLength * wave_count – TIME * speed) * height;

float distanceToCentre = distance(uv, waveCentre);
float intensity = 1.0 – distanceToCentre;
intensity = clamp(intensity, 0.0, 1.0);

vec3 col = texture(SCREEN_TEXTURE, uv).xyz;
col += col * intensity;

COLOR = vec4(col, 1.0);
}

6
Reply
Artium
Artium
1 year ago
Reply to  Mark

For Godot 4:

uniform float wave_count : hint_range(1.0, 20.0, 1.0) = 20.0;
uniform float speed : hint_range(0.0, 10.0, 0.1) = 3.0;
uniform float height : hint_range(0.0, 0.1, 0.001) = 0.003;

uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_nearest;

void fragment() {
vec2 cPos = -1.0 + 2.0 * UV;
float cLength = length(cPos);
vec2 uv = SCREEN_UV + (cPos/cLength) * cos(cLength * wave_count – TIME * speed) * height;
  vec3 col = textureLod(screen_texture,uv, 0.0).xyz;
COLOR = vec4(col,1.0);
}

-2
Reply
OlliBanjo
OlliBanjo
1 year ago

Thanks for your Shader, i used in my underwater game Deep Dive
(playable in browser):
https://ollibanjo.itch.io/deep-dive-pro

0
Reply