Swirl

Rotate image samples around a configurable circular focal region. swirl creates a controllable vortex distortion whose angular displacement decreases away from the selected center.

GitHub

At a Glance

Property	Value
Export	swirl
Backends	WebGPU and WebGL2
Render passes	One fullscreen texture-sampling pass
Additional inputs	None

Usage

import {ShaderPassRenderer} from '@luma.gl/engine';
import {swirl} from '@luma.gl/effects';

const renderer = new ShaderPassRenderer(device, {shaderPasses: [swirl]});

renderer.renderToScreen({
  sourceTexture: sceneColorTexture,
  uniforms: {swirl: {center: [0.5, 0.5], radius: 300, angle: 1.05}}
});

Parameters

Parameter	Default	Description
center	[0.5, 0.5]	Normalized origin of the circular distortion.
radius	200	Maximum affected distance from the center in source-image pixels.
angle	3	Rotation strength in radians; positive and negative values rotate in opposite directions.

The image outside the chosen radius remains unwarped. Animating angle creates continuous rotation without changing the original scene geometry.

Composition and Cost

Swirl requires one fullscreen source-texture sampling pass and no auxiliary attachments. Because depth, normal, and velocity textures are not warped alongside the color result, run it after scene-aware effects and temporal reconstruction.

Related Effects

• Bulge and Pinch applies radial rather than angular distortion.
• Magnify creates an adjustable local inspection lens.
• Zoom Blur stretches samples toward a central focal point.