Tilt Shift

Keep a chosen image-space line sharp while progressively blurring the surrounding scene. tiltShift creates a selective-focus miniature effect without requiring a scene depth texture.

GitHub

At a Glance

Property	Value
Export	tiltShift
Backends	WebGPU and WebGL2
Render passes	Two directional fullscreen sampling passes
Additional inputs	None; focus is defined entirely in image space

Usage

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

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

renderer.renderToScreen({
  sourceTexture: sceneColorTexture,
  uniforms: {
    tiltShift: {
      start: [0.12, 0.36],
      end: [0.88, 0.64],
      blurRadius: 18,
      gradientRadius: 130
    }
  }
});

Parameters

Parameter	Default	Range	Description
start	[0, 0]	Normalized image coordinates	First endpoint of the line that remains in focus.
end	[1, 1]	Normalized image coordinates	Second endpoint of the line that remains in focus.
blurRadius	15	0 to 50	Maximum blur radius in pixels away from the focal line.
gradientRadius	200	0 to 400	Distance in pixels over which blur grows from zero to its maximum.

The focus model assumes the visible scene can be approximated by a planar image-space band. Objects at different real-world depths are not independently distinguished.

Composition and Cost

Tilt shift uses two directional sampling passes, with cost increasing as the selected blur radius grows. Choose Depth of Field when a real depth attachment is available and foreground/background distance should determine focus instead of a manually positioned line.

Related Effects

• Depth of Field derives blur from physical camera depth.
• Gaussian Blur blurs the entire image evenly.
• Zoom Blur emphasizes motion toward a point rather than a focal band.