Noise Offset (Wiggle)

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

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

Normal-based Edge Detection with Sobel Operator -Screenspace

Depth-based Edge Detection with Sobel Operator – Screenspace

Related shaders

Chromatic Abberation (With Offset)

rgb offset shader v2

VHS with wiggle

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
comaybay
comaybay
6 months ago

Thx u for making this, it’s awesome