2D water effect

DevItWithCat

Simple screen water effect for 2d game worked with mobile GLES2.

 

INSTRUCTIONS :

 

Apply the shader to a TextureRect or a Sprite.under “CanvasLayer” node. and set TextureRect/sprite size fit a viewport size. use shader params to adjust the effect as you like.

 

for demo project and a water shader effect for specified node,
please visit : https://github.com/GrhythmO/2D-water-effect-shader

Shader code
shader_type canvas_item;

uniform float wave_speed = 3.0; //wave loop speed
uniform float wave_freq = 10.0; //wave vertical freq
uniform float wave_width = 1; //wave width 
void fragment(){
	vec2 scale_UV = SCREEN_UV;
	vec2 wave_uv_offset;
	wave_uv_offset.x = cos((TIME*wave_speed)+UV.x+UV.y*wave_freq*2.0)*wave_width*0.01;
	//COLOR = vec4(wave_uv_offset,0.0,1.0);
	COLOR = texture(SCREEN_TEXTURE,scale_UV+wave_uv_offset);
}
Live Preview
Tags
screen effect, water
Get demo project
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.

Related shaders

Comments 9

  1. Ben Stark

    This shader works great on my computer with AMD graphics, but on my two laptops with Intel Iris and Apple Silicon graphics the effect obscures the canvas rather than just warping it.

    2
  4. RepeatedKibbles

    Doesn't work on Godot 4.1

    1
    1. RepeatedKibbles

      Never mind, I fixed it (sorry if I sounded mean):
      shader_type canvas_item;

       

      uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
      uniform float wave_speed = 3.0; //wave loop speed
      uniform float wave_freq = 10.0; //wave vertical freq
      uniform float wave_width = 1; //wave width 
      void fragment(){
      vec2 scale_UV = SCREEN_UV;
      vec2 wave_uv_offset;
      wave_uv_offset.x = cos((TIME*wave_speed)+UV.x+UV.y*wave_freq*2.0)*wave_width*0.01;
      //COLOR = vec4(wave_uv_offset,0.0,1.0);
      COLOR = texture(SCREEN_TEXTURE,scale_UV+wave_uv_offset);
      }

      0
  5. mango

    This modified code adds an optional tint, working godot 4. Works with transparent objects in 3d.

     

    shader_type canvas_item;

     

    uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
    uniform float wave_speed = 3.0; // Wave loop speed
    uniform float wave_freq = 10.0; // Wave vertical frequency
    uniform float wave_width = 1.0; // Wave width
    uniform vec4 tint : source_color = vec4(1.0, 1.0, 1.0, 1.0); // Tint color

     

    void fragment() {
      vec2 scale_UV = SCREEN_UV;
      vec2 wave_uv_offset;
      wave_uv_offset.x = cos((TIME * wave_speed) + UV.x + UV.y * wave_freq * 2.0) * wave_width * 0.01;

     

      vec4 screen_color = texture(SCREEN_TEXTURE, scale_UV + wave_uv_offset);
       
      // Apply tint by multiplying with the texture color
      COLOR = screen_color * tint;
    }

    0
  6. hoofhorn

    works great, thank you very much :)

    0

  8. fixed code 

    shader_type canvas_item;


// ۱. اضافه کردن این خط برای دسترسی به تصویر پشت
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;


uniform float wave_speed = 3.0;
uniform float wave_freq = 10.0;
uniform float wave_width = 1.0; // این عدد را در اینسپکتور بزرگتر کنید (مثلاً 5.0)


void fragment(){
    // استفاده از UV خودِ آب برای ایجاد نوسان
    vec2 wave_uv_offset;
    wave_uv_offset.x = cos((TIME * wave_speed) + UV.x + UV.y * wave_freq) * wave_width * 0.01;
    
    // خواندن رنگ از صفحه با اعمال جابجایی (Refraction)
    vec4 screen_color = texture(SCREEN_TEXTURE, SCREEN_UV + wave_uv_offset);
    
    // ۲. رعایت شفافیت خودِ لاین یا اسپرایت
    float mask = texture(TEXTURE, UV).a;
    
    COLOR = vec4(screen_color.rgb, screen_color.a * mask);
}
    0