Screen Distortion
The Screen Distortion shader warps the canvas image using barrel, pincushion, or wave distortion — simulating curved screens, fisheye lenses, and liquid-like undulation.
Parameters
Type
| Value | Effect |
|---|---|
| Barrel | Image bulges outward from center (convex lens / fisheye) |
| Pincushion | Image pinches inward toward center (concave lens) |
| Wave | Animated sine wave ripple across the image |
Intensity
| Range | Default | Step |
|---|---|---|
| 0–2 | 0.5 | 0.1 |
Controls the strength of the distortion. Higher values produce more dramatic warping.
| Intensity | Barrel | Pincushion | Wave |
|---|---|---|---|
| 0.1–0.3 | Subtle curve | Slight pinch | Gentle ripple |
| 0.5–1.0 | Noticeable fisheye | Strong pinch | Moderate waves |
| 1.0–2.0 | Extreme bulge | Heavy compression | Intense undulation |
Info
The wave type animates automatically during playback — no keyframing needed for the wave motion itself. Keyframe the intensity to control how strong the waves are over time.
Edge Handling
Pixels that are warped beyond the canvas boundary are filled with the canvas background color rather than being stretched or repeated. This prevents distracting edge artifacts, especially at higher intensity values.
Keyframing
- Type uses hold interpolation — snaps between barrel, pincushion, and wave
- Intensity uses numeric interpolation — smooth transitions
Animation Ideas
- Keyframe intensity from 0 to 1 for a warp-in transition
- Switch type at specific frames for dramatic scene changes
- Use low intensity barrel distortion as a constant subtle effect
Use Cases
- CRT monitor — Barrel distortion at low intensity (0.1–0.3)
- Fisheye lens — Barrel at high intensity (0.8–1.5)
- Underwater — Wave type at moderate intensity (0.3–0.6)
- Transition effect — Keyframe intensity spike during scene changes
- Retro gaming — Subtle barrel (0.1) combined with chromatic aberration
Technical Notes
- Single-pass fragment shader
- Barrel and pincushion use radial coordinate remapping from the canvas center
- Wave mode uses time-based sine displacement on UV coordinates
- Out-of-bounds samples use
u_bgColoruniform to match the canvas background