2D Wavy Effect

2D Wave Effect Shader by marsonfire

1. Add a Sprite2D
2. Add a noise texture to that Sprite2D – resize as desired
3. Check the “Seamless” box
4. Set the CanvasItem -> Texture -> Repeat to “Enabled”
5. Apply the shader to the CanvasItem -> Material -> NewShaderMaterial (You can also drag and drop the shader onto the material)
6. Play with parameters for desired effects

Make sure the Sprite2D with the shader is below the nodes you want to have the effect (or change layer ordering).

Feel free to modify this shader in anyway and to use this for anything you want

I am learning Shaders, so lots of comments and stuff to help me know what’s going on… and maybe it’ll help you too!

Shader code
//2D Heat Wave Effect Shader by marsonfire
//Feel free to modify this shader in anyway and to use this for anything you want 
//This was made by someone learning Shaders, so lots of comments and stuff to help me know what's going on...

//1. Add a Sprite2D
//2. Add a noise texture to that Sprite2D - resize as desired
//3. Check the "Seamless" box
//4. Set the CanvasItem -> Texture -> Repeat to "Enabled"
//5. Apply the shader to the CanvasItem -> Material -> NewShaderMaterial (You can also drag and drop the shader onto the material)
//6. Play with parameters for desired effects

shader_type canvas_item;

//Get the screen texture
uniform sampler2D screenTexture : hint_screen_texture;

//Set the scroll amount - default = 0.05, 0.05
uniform vec2 scrollAmount = vec2(0.05, 0.05);

//How much distortion is desired? - default = 0.01
uniform float multiplierAmount : hint_range(0.0, 0.1) = 0.01;

void fragment() {
	// Called for every pixel the material is visible on.
	
	//Get the the screen, then add the noise to it based on the red channel. 
	//Scroll that noise multiplied by the time, multiply all of that by given amount
	vec2 distortionUV = SCREEN_UV + texture(TEXTURE, UV + scrollAmount * TIME).r * multiplierAmount;
	
	//Now, get what's underneath the noise texture (the screen) and apply the distorted noise UV to that
	vec4 screen = texture(screenTexture, distortionUV);
	
	//Set the COLOR to apply the effect
	COLOR = screen;	
}
Tags
2d, heat effect, wavy
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

Slime/Slug wavy walk

Rain and Snow with Parallax Effect

WRIP EFFECT WITH GODOT SHADER

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Instructions
2 months ago

Very nice, it’s a cool effect that could be used to symbolize heat!