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
- Create a new CanvasLayer in your 2D or 3D scene
- Create a ColorRect as a child of the CanvasLayer
- Use the FullRect anchor preset to size the ColorRect to fill the whole screen
- In the ColorRect, in `CanvasItem`, under `Material`, choose `New Shader Material`
- In the Material, in `Shader`, choose `New Shader`
- 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);
}
Thx u for making this, it’s awesome