How to fix foam issue in 3D water shader

This is a READ-ONLY snapshot of the Godot Community Forums when TwistedTwigleg was the owner, which is hosted for archival reasons only. The current Godot Community Forums can be found here.

Some links may point to external websites, including the current Godot Community Forums. These websites are not associated with TwistedTwigleg.

How to fix foam issue in 3D water shader

Lethn

I realise this is a necro but it's actually helpful for me you did this because when I was fiddling around with water shaders I was having this very same problem and it was because of how the setup was taking camera distance into account among other things this was back when I was using Unity and I was wondering how I was going to deal with it in Godot.

Gowydot

@cybereality

Thank you but can you show how to use it with the shader I posted? I just can't work it out without a working example as I don't have much exprience with shader.

I think this is a shader function so I've tried placing it above void vertex(), Replace z_near and z_far with 1.0 and 2.0, tex with DEPTH_TEXTURE..etc. and It just gave me all errors.

cybereality

You can remove these lines:

float real_depth = texture(DEPTH_TEXTURE, SCREEN_UV).r * 2.0 - 1.0;
real_depth = PROJECTION_MATRIX[3][2] / (real_depth + PROJECTION_MATRIX[2][2]) + VERTEX.z;
	
// Get the raw linear depth from the depth texture into a  [-1, 1] range
float depth = texture(DEPTH_TEXTURE, uv).r * 2.0 - 1.0;
// Recreate linear depth of the intersecting geometry using projection matrix, and subtract the vertex of the sphere
depth = PROJECTION_MATRIX[3][2] / (depth + PROJECTION_MATRIX[2][2]) + VERTEX.z;

Then call it like this:

float real_depth = getDepth(DEPTH_TEXTURE, SCREEN_UV);
float depth = getDepth(DEPTH_TEXTURE, uv);

z near and far are camera properties, you can define them at the top:

float z_near = 0.05;
float z_far = 100.0;

Those are the defaults for a Godot camera. If you didn't alter the camera, then you can leave them, it shouldn't matter much since they will be normalized.

Gowydot

cybereality

After using the code the foam on edge disappears and I noticed deep color fading effect is also gone too:

Here is the code I have now:


const float z_near = 0.05;
const float z_far = 100.0;

float getDepth(sampler2D tex, vec2 uv){
		float depth_sample = textureLod(tex, uv, 0.0).r;
		float ndc = depth_sample * 2.0 - 1.0;
		float linear_depth = (2.0 * z_near * z_far) / (z_far + z_near - ndc * (z_far - z_near));
		linear_depth /= z_far;
		return linear_depth;
}

void vertex() {
	//....
}

void fragment() {
	vec2 uv = SCREEN_UV + refraction_strength 
			* (texture(refraction_noise, UV + (TIME * movement_direction) * refraction_speed).rg 
			* 2.0 - 1.0);
	
	float real_depth = getDepth(DEPTH_TEXTURE, SCREEN_UV);
	float depth = getDepth(DEPTH_TEXTURE, SCREEN_UV);
	
	depth = max(depth, real_depth);
	//...

here is the original water in 3x for reference:

I've also upload my test project if anyone want to have a look.
https://github.com/j3du/godot-4-water-shader-testing

cybereality

That may not have been the issue. You should study the original code and see if you missed a step or made a mistake.

Gowydot

@cybereality
Thanks for trying to help. Water is something I want to get it right so I guess I need to start learning shader coding from ground up. Along with Godot and Blender, this is gonna take forever 😆

underdog32

Gowydot I had a lot of issues with this. I worked literally months on water shaders in unity and I had a pretty dope one I was using. It's been a rough ride transferring some of those concepts to godot. I did eventually get the depth to work, and the code I used to get depth looks like the following. I still have yet to get refraction to look as well as I'd like, but it's on the right path.

	float depth = texture(DEPTH_TEXTURE, SCREEN_UV).r;
	
	
	float z = -PROJECTION_MATRIX[3][2] / (depth + PROJECTION_MATRIX[2][2]);
	float delta = -(z - VERTEX.z); // z is negative.
	
	depth = exp(-delta * 2.0);

If you shade your scene with just depth, you should get a grayscale of what it looks like. You can tweak it from there by applying a strength factor to depth.

Megalomaniak

underdog32 If you shade your scene with just depth, you should get a grayscale of what it looks like. You can tweak it from there by applying a strength factor to depth.

Yes I always pipe a value into EMISSION when debugging something in a shader.

Gowydot

@underdog32

Thanks a lot! I will give it a try. (Sorry for late reply I'm on vacation now)

I've also just found this water ~~tutorial~~ demo looks very nice. There is a project in there so you can study the code as well.

And if you go to that channel's videos they have tutorials on shader for noobs as well. Pretty cool channel.

uOcool

You can use depth fade(as its called in unreal engine) to get a mask at intersecting edges, for foam effect.
heres how it looks like:

shader:

shader_type spatial;
render_mode depth_prepass_alpha,depth_draw_always;

varying vec3 AbsoluteWorldPosition;

uniform float depthFadeDiv;
void vertex()
{
	AbsoluteWorldPosition = (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz;
}
void fragment() 
{
	vec3 CameraPosition = INV_VIEW_MATRIX[3].xyz;
	vec3 CameraDirection = normalize( INV_VIEW_MATRIX[2].xyz*-1.0);
	//Scene Depth
	float depth = texture(DEPTH_TEXTURE, SCREEN_UV).x;
	vec3 ndc = vec3(SCREEN_UV * 2.0 - 1.0, depth);
	vec4 view = INV_PROJECTION_MATRIX * vec4(ndc, 1.0);
	view.xyz /= view.w;
	float linear_depth = -view.z;
	//Depth Fade
	float PixelDepth = dot(CameraDirection,(AbsoluteWorldPosition - CameraPosition));
	float depthFade = linear_depth-PixelDepth;
	depthFade = clamp(depthFade/depthFadeDiv,0.0,1.0);

}