2D water effect

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


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);
screen effect, 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.

Related shaders

fBm Toon Water

Anime-esque Water Shader

Stylized Water Shader

Inline Feedbacks
View all comments