Skip to main content

Depth-Aware Blur

Smooth noisy screen-space results without bleeding across foreground/background boundaries. depthAwareBlurShaderPassPipeline combines Gaussian spatial weights with scene-depth similarity in two separable bilateral-filter passes.

GitHub

At a Glance

PropertyValue
ExportsdepthAwareBlur and depthAwareBlurShaderPassPipeline
BackendWebGPU
Render passesTwo separable bilateral-filter passes
Required bindingdepthTexture
Intermediate storageOne renderer-owned scratch texture

Usage

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

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

renderer.renderToScreen({
sourceTexture: noisyLightingTexture,
bindings: {depthTexture: sceneDepthTexture},
uniforms: {depthAwareBlur: {radius: 4, depthSigma: 0.01, spatialSigma: 3}}
});

Parameters

ParameterDefaultRangeDescription
radius41 to 8Number of bilateral-filter samples on each side of the center pixel.
depthSigma0.01Minimum 0.0001Accepted depth variation; smaller values preserve stronger depth discontinuities.
spatialSigma3Minimum 0.1Width of the Gaussian spatial weighting profile.
direction[1, 0]Set by the pipelineHorizontal or vertical sample direction for the low-level standalone pass.

The pipeline automatically supplies [1, 0] and [0, 1] for its two blur directions. Near-depth neighbors contribute normally, while samples separated by a depth edge are exponentially reduced.

Performance and Composition

Each direction visits at most eight samples on either side of the center pixel. The reusable filter also appears inside several higher-level scene-aware pipelines, where it denoises occlusion, indirect illumination, reflections, or volumetric lighting while retaining silhouettes.