Raindrops

My attempt at converting https://www.shadertoy.com/view/ldfyzl

See the link for animation.

 

To use, place the shader on a shaderMaterial on a colorRect.

Import the sample background texture or use your own.

Please enjoy

 

I learned to convert glsl shaders to godot shaders using these resources. You can learn it too!

https://docs.godotengine.org/en/3.4/tutorials/shaders/converting_glsl_to_godot_shaders.html

https://www.youtube.com/watch?v=Kn49zhCwg-0

Shader code
shader_type canvas_item;

uniform sampler2D backgroundTexture;

// Maximum number of cells a ripple can cross.
uniform float MAX_RADIUS = 2.0;

// Hash functions shamefully stolen from:
// https://www.shadertoy.com/view/4djSRW
uniform float HASHSCALE1 = 0.1031;
uniform vec3 HASHSCALE3 = vec3(0.1031, 0.1030, 0.0973);

float hash12(vec2 p)
{
	vec3 p3  = fract(vec3(p.xyx) * HASHSCALE1);
	p3 += dot(p3, p3.yzx + 19.19);
	return fract((p3.x + p3.y) * p3.z);
}

vec2 hash22(vec2 p)
{
	vec3 p3 = fract(vec3(p.xyx) * HASHSCALE3);
	p3 += dot(p3, p3.yzx+19.19);
	return fract((p3.xx+p3.yz)*p3.zy);
}

void fragment()
{
	float resolution = 10.0 * exp2(-3.0 / (1.0 / TEXTURE_PIXEL_SIZE).x);
	vec2 uv = UV.xy / (1.0 / TEXTURE_PIXEL_SIZE).y * resolution;
	vec2 p0 = floor(uv);

	vec2 circles = vec2(0.0);
	for (float j = -MAX_RADIUS; j <= MAX_RADIUS; ++j)
	{
		for (float i = -MAX_RADIUS; i <= MAX_RADIUS; ++i)
		{
			vec2 pi = p0 + vec2(i, j);
			
			vec2 hsh = hash22(pi);
			
			vec2 p = pi + hash22(hsh);
			
			float t = fract(0.3 * TIME + hash12(hsh));
			vec2 v = p - uv;
			float d = length(v) - (float(MAX_RADIUS) + 1.)*t;
			
			float h = 1e-3;
			float d1 = d - h;
			float d2 = d + h;
			float p1 = sin(31.*d1) * smoothstep(-0.6, -0.3, d1) * smoothstep(0., -0.3, d1);
			float p2 = sin(31.*d2) * smoothstep(-0.6, -0.3, d2) * smoothstep(0., -0.3, d2);
			circles += 0.5 * normalize(v) * ((p2 - p1) / (2. * h) * (1. - t) * (1. - t));
		}
	}
	
	circles /= float((MAX_RADIUS * 2.0 + 1.0) * (MAX_RADIUS * 2.0 + 1.0));
	
	float intensity = mix(0.01, 0.15, smoothstep(0.1, 0.6, abs(fract(0.05 * TIME + 0.5) * 2.0 -1.0)));
	vec3 n = vec3(circles, sqrt(1.0 - dot(circles, circles)));
	vec3 color = texture(backgroundTexture, uv/resolution - intensity * n.xy).rgb + 5.0 * pow(clamp(dot(n, normalize(vec3(1.0, 0.7, 0.5))), 0.0, 1.0), 6.0);
	COLOR = vec4(color, 1.0);
}
Tags
rain, water
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 halcyonxero

Flaring Star

Oil Stain

Pretty Hip

guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ALEX_EXE
ALEX_EXE
2 months ago

This is so beautiful. This must be one of the most underrated shaders l ´ve seen this should have more atention, good job dude. =)