UV warping

How it works

A shader never moves pixels. It decides, for each pixel, where to look: which point of a pattern to draw, or which point of a texture to read. UV warping changes that “where”. Add a small offset to the UV before the lookup, make the offset different at every pixel, and the picture bends.

vec2 warped = uv + offset(uv, time);
vec3 color = pattern(warped); // or texture(image, warped).rgb

The 2D transforms fundamental moves the whole space by one offset. Warping is the same subtraction, with an offset that varies across the surface. Everything about the look lives in the offset:

• A sine wave along one axis gives a ripple that travels: a flag, a wavy banner, water lines.
• Several sines at unrelated frequencies give a shimmer that doesn’t visibly repeat: heat, a mirage, glass.
• Noise gives organic, unpredictable bends, and feeding noise back into itself is domain warping: smoke, ink, marble.

Two stages, one idea

On a surface, the warped coordinate feeds a procedural pattern or the object’s own texture. Waving flag draws its stripes in the bent UV, so the cloth seems to fold although the quad stays flat.

As a screen post pass, the warped coordinate reads the finished frame. The scene is drawn into a render target first; a full-screen pass then samples it at shifted coordinates. Heat haze does that near the ground. It is one pass of the post-process chain.

On a sprite, the same lookup reads the sprite’s texture, for a swaying plant or a flag in a 2D game.

What to watch

• Strength is in UV units. An offset of 0.01 moves the lookup by 1% of the surface, which on a 1000-pixel screen is 10 pixels. Screen distortion reads as strong long before that.
• Edges. A warped lookup near the border reads outside 0..1. A clamped texture repeats its edge texel, a repeating one wraps around to the far side; pick the one that hides it, or fade the warp out near the edges.
• Where the offset is zero, nothing moves. Masking the offset (by height, distance or a texture) is how you keep the pole of a flag still or limit heat to the air over a fire.