Noise Offset (Wiggle)

nuzcraft

Uses a noise texture to offset pixels on the screen to make things wiggly or wavy. This would work well with an aquatic theme!

One of the inputs required is a noise texture. This can be one generated by Godot, or one you have saved.

Instructions

  1. Create a new CanvasLayer in your 2D or 3D scene
  2. Create a ColorRect as a child of the CanvasLayer
  3. Use the FullRect anchor preset to size the ColorRect to fill the whole screen
  4. In the ColorRect, in `CanvasItem`, under `Material`, choose `New Shader Material`
  5. In the Material, in `Shader`, choose `New Shader`
  6. Here you can choose a name for your shader and we can start customizing!

Notes

  • I used a blue noise texture that I found online for my examples. It’s a more uniform noise pattern than what you tend to get from Godot’s noise generator.
  • It is possible to convert this shader to a spatial one
    • change COLOR to ALBEDO
    • calculate the SCREEN_PIXEL_SIZE based on the VIEWPORT_SIZE
    • most everything else stays the same

Check out my full write-up here: https://github.com/nuzcraft/unga-dungeon/blob/main/shader_notes/noise_offset.md

Sprites and Models from Kenney: kenney.nl

Get demo project
See more about this shader
Shader code
shader_type canvas_item;

uniform sampler2D SCREEN_TEXTURE: hint_screen_texture, filter_linear;
uniform sampler2D NOISE_TEXTURE: repeat_enable;
uniform float strength: hint_range(0.0, 5, 0.1) = 1.0;
uniform float uv_scaling: hint_range (0.0, 1.0, 0.05) = 1.0;
uniform vec2 movement_direction = vec2(1, 0);
uniform float movement_speed: hint_range (0.0, 0.5, 0.01) = 0.1;

void fragment() {
	vec2 uv = SCREEN_UV;
	vec4 screen_texture = texture(SCREEN_TEXTURE, uv);
	vec2 movement_factor = movement_direction * movement_speed * TIME;
	float noise_value = texture(NOISE_TEXTURE, uv*uv_scaling + movement_factor).r - 0.5;
	uv += noise_value * SCREEN_PIXEL_SIZE * strength;
	COLOR = texture(SCREEN_TEXTURE, uv);
}
Tags
aquatic, canvas, hand drawn, noise, offset, water, wavy, wiggle
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.

More from nuzcraft

Spatial24

Normal-based Edge Detection with Sobel Operator -Screenspace

Spatial4

Depth-based Edge Detection with Sobel Operator – Screenspace

Related shaders

Canvas item151

Chromatic Abberation (With Offset)

Canvas item11

rgb offset shader v2

Canvas item18

2D shadow with bottom offset, image ratio independent shadow direction, and minimal vertex increase

Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
comaybay
comaybay
1 year ago

Thx u for making this, it’s awesome

1
Reply
pixelkid
pixelkid
2 months ago

Thank you for making this. Unfortunately even if I checked inside the demo project I couldn’t figure out how to make the noise texture transparent, I tried with the modulate property and the visible bool but it just makes the whole shader disappear, I’m a bit stuck. Can you help please?

0
Reply
sunsgo
sunsgo
1 month ago
Reply to  pixelkid

same issue.Set the SCREEN_TEXTURE filter to none to solve this.

uniform sampler2D SCREEN_TEXTURE: hint_screen_texture;

i dont know why this works.But it works

0
Reply