Puddles with rain drops

[FishOfTheNorthStar]

So this is what it looks like so far:

Here I'm cranking up spec and shine for areas that have heavily creased normal maps, so the less flat the normal map is, the more 'watery effect' it gets, which seems to be working pretty well. Feels natural. Also adds same effect, to a less extent, to areas that are mostly flat (mesh, not texture).

But animated rain drops in those puddles was pretty tricky, I had to generate an image I could either sub-sample as an animated sprite sheet, or convert into a texture2darray, which meant the Blender frames output had to be laid out as a grid, etc etc. So that was a whole process, and to save anyone else the trouble, here it is as a highly compressed 'webp' file, which works fine in Godot just like a png or jpg. Except its 55k for a 2048x2048 normal map, which is pretty amazing levels of compression.

Unfortunately github won't let me drag the webp straight in here like a normal image, so here's a zip, and underneath I'll put the actual png even though it's 3400% larger file size for the same image. Whatever, 1.7mb still isn't too bad and maybe some people would prefer a png anyways.

rain_drops_compressed.zip

[FishOfTheNorthStar]

Rain drops puddle normal map image generated by myself and released to the public domain under MIT license for anyone to use for any purpose. Good luck!

[TokisanGames]

Great, thanks for making these available. I've created an Extras discussion category and moved your threads into it instead of Q&A or Architecture.

[FishOfTheNorthStar]

np, yeah wasn't sure where to post this or if to at all but seemed like it might come in handy. slight adjusts to the involved code have evolved over time since posting btw, probably single biggest change is that it definitely helps to turn NORMAL (not NORMAL_MAP) towards world up direction (but transformed into viewspace), inside the puddles as puddle intensity goes up. I had not looked at this screenshot in a minute and it's a world of difference. Rest is about the same though.

[FishOfTheNorthStar]

Here is the relevant code (from my t3d fork), be aware this GLSL will not work in stock T3D without edits, but those should be pretty straight forward for anyone used to writing shaders.

#if !defined(__T3D_RAIN_SPEC_MOD__)
#define __T3D_RAIN_SPEC_MOD__

#if !defined(__T3D_INTERNAL_GLOBALS_AVAILABLE__)
void UNUSED_get_rain_spec_mod_effects( float __overlay_shared_param_normal_map_flatness, float v_role, vec3 v_noise, inout mat4 _OI_ ) {
#endif

//	_OI_ (Overlay Input) Key:
//	vec3 __albedo			= _OI_[0].rgb;
//	vec3 __normal_map		= _OI_[1].rgb;
//	vec3 __emission			= _OI_[2].rgb;
//	vec3 __r_m_s 			= _OI_[3].xyz; // roughness/metallic/specular components
//	float __ao_light_affect	= _OI_[3].w;
//	float __ao				= _OI_[2].w;

	#if defined(__T3D_INTERNAL_GLOBALS_AVAILABLE__)
		float _rain = _rain_current_level;
		float _nz = v_noise.x;
	#else
		float _rain = 0.;
		float _nz = 0.;
	#endif
	
	// x = puddles, y = vertical surface, z = flat surface
	const vec3 _max_crack_fill_by_role = vec3(1.0, 1.0, 0.125);
	float _normRole =  v_role / 4.0;
	float _curRain = _rain;

	float _neg_noise = max(0., -_nz);
	float _pos_noise = max(0., _nz);
	
	//
	// Rain processing - Phase 1, surface gloss modulated by verticality and inverse 
	// 					 normal map flatness, so flat surfaces and the cracks of vertical
	// 					 surfaces gain gloss.
	//
	// Rain filled cracks calc
	// Step 1: only non-flat normal map areas
	float filled_normal_map_cracks = (1. - __overlay_shared_param_normal_map_flatness);
	// Step 2: apply filling levels by role (most puddle, then flat mesh, then vertical mesh)
	filled_normal_map_cracks *= mix(_max_crack_fill_by_role.z, _max_crack_fill_by_role.y, _normRole);
	// --
	// Water-logged flat surface calc
	// Only step, add half the exponential norm_role (v_role/4) and 0.5, so all surfaces
	// gain at least 50% effect at max rain but flat surfaces get up to another 50% based on how flat they are.
	float waterlogged_flat_surface_factor = (_normRole * _normRole * _normRole) * 0.5 + 0.5;
	// --
	// Modulate by noise
	waterlogged_flat_surface_factor *= ( (_neg_noise*0.25) + 0.75);
	// --
	// Apply surface gloss factor
	float surface_gloss_factor =  _curRain * min(1., waterlogged_flat_surface_factor + filled_normal_map_cracks);
	_OI_[1].rgb	= mix(_OI_[1].rgb,	vec3( 0.5, 0.5, 1.0 ),		surface_gloss_factor * .5);	// Texture Normal
	_OI_[3].x	= mix(_OI_[3].x,	0.05,						surface_gloss_factor); 		// Roughness/Metallic/Specular


	#if defined(RAIN_PUDDLES_ENABLED)
	// Rain processing - Phase 2, optional puddles
		float _puddle_flat_check_rain_offset = 
			( _rain_puddles_size*1.1 * _rain);
		float _puddle_flatness_test_result = 
			1. - clamp( -(v_role - 4.50 + _puddle_flat_check_rain_offset ) * 2.0, 0., 1.);
		float _puddle_noise_test_result = min(1., _pos_noise + _rain);
	float puddle_factor = (_puddle_noise_test_result * _puddle_flatness_test_result); 
	float pow_puddle_factor = 1.- puddle_factor;
	pow_puddle_factor *= pow_puddle_factor;
	pow_puddle_factor = 1. - pow_puddle_factor;
	_OI_[0].rgb	= mix(_OI_[0].rgb, _OI_[0].rgb * 1.25, 		puddle_factor );
	_OI_[1].rgb	= mix(_OI_[1].rgb,	vec3( 0.5, 0.5, 1.0 ),	puddle_factor );	// Texture Normal
	_OI_[3].xyz	= mix(_OI_[3].xyz,	vec3(0.1,0.8, 0.8),		puddle_factor ); 	// Roughness/Metallic/Specular
	#endif

	// Rain drops
	float _curtime = get_current_time();
	const float drops_fps = 24.;
	const int drops_row_count = 8;
	const int drops_col_count = 8;
	const vec2 drops_uv_conv = 1. / vec2(float(drops_col_count), float(drops_row_count));
	const int drops_frames_total = drops_row_count * drops_col_count;
	const float drops_time_frame_factor = 1. / float( drops_fps );
	int __drop_frame_num = int(_curtime * float( drops_fps )) % drops_frames_total;
	int __drop_frame_row = int(__drop_frame_num / drops_col_count);
	int __drop_frame_col = __drop_frame_num - (__drop_frame_row * drops_col_count);
	vec2 __drop_uv_win = vec2(float(__drop_frame_col), float(__drop_frame_row)) * drops_uv_conv;
	vec2 __drop_time_slide_factor = ((0.05*vec2(0.871294, -0.341087))*_curtime);
	vec2 __drop_world_uv = __overlay_shared_param_pixel_worldpos.xz * 0.05;
	vec2 dfx = dFdx(__drop_world_uv * drops_uv_conv);
	vec2 dfy = dFdy(__drop_world_uv * drops_uv_conv);
	vec3 dropsTex = textureGrad(rain_drops_texture, (fract(__drop_world_uv + __drop_time_slide_factor ) * drops_uv_conv) +  __drop_uv_win, dfx, dfy).rgb;
	_OI_[1].rgb	= mix(_OI_[1].rgb,	dropsTex,		min(0.8, puddle_factor *2.) + 0.2 );	// Texture Normal
	
#if !defined(__T3D_INTERNAL_GLOBALS_AVAILABLE__)
	return; }
#endif
#endif

If you're wondering what "get_current_time()" is, that's a function in another file that just returns TIME, but only if a define disabling TIME access is not set. If that disable-time define is set, it returns 0 and TIME ref is stripped out of the shader, so animation can be disabled within the editor (and then it won't constantly update, which annoys me to no end).

Also, v_role is processed earlier, here's the function to get that value from world mesh normal:

const vec4 STANDARD_CONTOUR_BREAKING_SET = vec4(0.54, 0.62, 0.843, 0.985);

vec4 get_features_by_normal(vec3 __for_normal ) {
	const vec4 __breaks_at = STANDARD_CONTOUR_BREAKING_SET;
	__for_normal = normalize(__for_normal);
	return 	min( vec4(1.), max( vec4(0.), vec4( 
			clamp( dot( __for_normal, vec3(0.,1.,0.) ), 0., 1. ) ) 
			- __breaks_at ) / ( vec4( __breaks_at.yzw, 1.0 ) - __breaks_at ) ); }


#define xT3D_TIME_DISABLED
float get_current_time() {
	#if defined(T3D_TIME_DISABLED)
		return 0.;
	#else
		return TIME;
	#endif
}

Also, in another area I calculate 'how creased is the normal map at this texel', it's a one liner, here's the one line:

float __overlay_shared_param_normal_map_flatness = clamp((dot(NORMAL_MAP.rgb*2.0-1.0, vec3(0.0,0.0,1.0))),0.,1.);

I would bet that the above calc also functions pretty well to provide an 'implied AO' value, too. More creased = more occluded, makes sense to me. Haven't tried that yet though.

[FishOfTheNorthStar]

really interesting results adding the following lines to the above (just before the last 'if defined':

	vec2 __sheetsX_world_uv = __overlay_shared_param_pixel_worldpos.xy * 0.01;
	vec2 __sheets_time_slide_factor = ((0.15*vec2(0.18235, 0.341087))*_curtime);
	vec3 dropsTexXZ = texture(rain_drops_texture,  __sheetsX_world_uv + __sheets_time_slide_factor ).rgb;
	_OI_[1].rgb	= mix(_OI_[1].rgb, dropsTexXZ, (1. - _normRole) * filled_normal_map_cracks * _curRain  );		// Texture Normal

What that will do is put the same puddles texture (except not animated, cause it doesn't matter here) inside the texture normal cracks that got highlighted and watery earlier in the script, so they get subtle ripples flowing down the surface. I started it with intention of triplanar implementation, but it really isn't necessary, at least with this scene, because the cracks being filled are so thin, the texture distortion of this stages normal map being misaligned really doesn't impact the visuals much.

This could be expanded a bit, with proper triplanar (or dual planar, at least, x/z), and a proper 'sheets of rain flowing down a surface' normal map (not animated), so it puts 20-40% of that over any vertical surface, for partial effect, but inside the filled cracks, it's 100%, for maximum ripple flow there. I've seen that before and it looks quite nice, but raises the sample count to 3 for this (with drops only, it's 1, with drops and vertical crack flow, it's 2, with proper triplanar it'd be 3)