35
[SOLVED] How to apply a shader to a sprite without it becoming a rectangle? (startrek.website)
submitted 2 years ago* (last edited 2 years ago) by to c/godot@programming.dev
3 comments fedilink hide all child comments
 

I have been looking for a 2D reflective water shader for some time and was delighted to see that this tutorial was posted on YouTube to create just that:

https://www.youtube.com/watch?v=wPr5PvSgxFo

I've had a go at implementing it and have got the reflective water rendering. It's very "Kingdom: Two Crowns" like when spread across the full width of the scene.

However, as you can see from the image above, I've drawn a pond (as a separate Sprite2D) and I've applied the water shader to the pond. It's done that, but draws the water as a rectangle.

Is there a way to apply this shader to the Sprite2D, but conform to the actual sprite (only the light blue), rather than as a rectangle?

all 4 comments

sorted by: hot top controversial new old
[–] 21 points 2 years ago (1 child)

I think you'd want to apply the alpha value of the sprite. You can do that by making the last line "COLOR = vec4(mix(...).rgb, texture(TEXTURE, UV).a)"

  • permalink
  • fedilink
  • source
  • hideshow 2 child comments
    •
  • [–] [S] 5 points 2 years ago

    This worked perfectly - thank you!!

    For anyone else looking here later, the final shader code (confirmed working Godot 4.2) is:

    shader_type canvas_item;

uniform sampler2D screen_texture : hint_screen_texture;
uniform vec4 water_color : source_color;
uniform sampler2D wave_noise : repeat_enable;

void fragment() {
	vec2 water_wave = (texture(wave_noise, UV * TIME * 0.02).rg - 0.5) * 0.02;
	vec2 uv = vec2(SCREEN_UV.x , SCREEN_UV.y - UV.y) + water_wave;
	vec4 color = texture(screen_texture, uv);
	float mix_value = 1.0 - UV.y;

	float avg_color = (color.r + color.g + color.b) / 3.0;
	avg_color = pow(avg_color, 1.4);
	mix_value += avg_color;

	mix_value = clamp(mix_value, 0.0, 0.7);
	COLOR = vec4(mix(water_color, color, mix_value).rgb, texture(TEXTURE, UV).a);
}

    Credits to Single-mindedRyan for creating this shader in the first place.

  • permalink
  • fedilink
  • source
  • parent
    • [+] 9 points 2 years ago*
    [deleted]
  • permalink
  • fedilink
  • source
    •
    [–] 8 points 2 years ago

    Oof, I haven't touched shaders in Godot myself yet, besides a very simple section during one tutorial, so maybe I should not give any advice, but I think this can be solved by applying the shader to the pond and adding a check for transparency before applying the changes to the pixels.

  • permalink
  • fedilink
  • source
    •