Skip to main content

Shader Pass Catalog

Explore reusable image-processing filters, cinematic lens effects, temporal reconstruction, and scene-aware WebGPU pipelines from @luma.gl/engine/effects. Every effect below has its own implementation guide, parameter reference, composition notes, and, where an existing showcase is available, a live interactive example.

GitHub
0s

Choosing an Effect​

CategoryEffectsTypical placement
Color and toneBrightness and contrast, hue and saturation, sepia, vibrance, tone mapping, HDR auto exposureExposure and grading before the final display transform.
Blur, bloom and focusBloom, Gaussian blur, triangle blur, tilt shift, zoom blur, depth of field, depth-aware blurScene-linear lighting and camera effects before tone mapping.
Temporal and antialiasingPersistence, FXAA, temporal antialiasing, camera-reprojection antialiasing, motion blurTemporal accumulation before lens effects; FXAA near presentation.
Lighting and visibilitySSAO, GTAO, screen-space global illumination, screen-space reflections, outlines, selection outlinesAfter scene rendering while depth, normals, and velocity still align.
AtmosphereVolumetric fog, clustered volumetric lightingAfter opaque lighting and visibility; before exposure and bloom.
Stylization and detailColor halftone, dot screen, edge work, hexagonal pixelation, ink, noise, vignette, denoiseCreative finishing or targeted source cleanup.
Warp and lensBulge and pinch, magnify, swirlAfter depth-dependent effects unless auxiliary attachments are transformed too.

Usage​

Individual ShaderPass descriptors and complete CompositeShaderPass graphs can share one ordered ShaderPassRenderer:

import {ShaderPassRenderer} from '@luma.gl/engine';
import {createBloomCompositeShaderPass, toneMapping, vignette} from '@luma.gl/engine/effects';

const renderer = new ShaderPassRenderer(device, {
  colorFormat: 'rgba16float',
  shaderPasses: [
    createBloomCompositeShaderPass({quality: 'high', blurAlgorithm: 'dual-kawase'}),
    toneMapping,
    vignette
  ]
});

renderer.renderToScreen({
  sourceTexture: sceneColorTexture,
  uniforms: {
    toneMapping: {exposure: 1, maximumLuminance: 1},
    vignette: {radius: 0.7, amount: 0.35}
  }
});

Every pass receives the output from the preceding stage. Pipelines may additionally allocate named scratch textures or persistent history, and WebGPU-enabled pipelines can replace supported render stages with compute work. The renderer owns its internal targets; application-owned scene attachments remain explicit bindings.

Inputs and Compatibility​

InputRequired byOwnership
sourceTextureEvery shader pass and pipeline.Application provides the current scene or image.
depthTextureDepth of field, bilateral blur, occlusion, reflections, temporal reconstruction, motion blur, and atmosphere.Application retains the scene depth attachment.
normalTextureNormal-aware occlusion, screen-space lighting and reflections, and optional outlines.Application supplies view-space normals or a compatible G-buffer attachment.
selectionTextureSelection outlines.Application supplies a visible-surface mask aligned with scene color.
velocityTextureMotion blur and velocity-based temporal reprojection.Application supplies per-pixel screen-space motion.
History texturesTemporal antialiasing, adaptive exposure, temporal occlusion/reflections, and fog.Named pipeline targets are owned by ShaderPassRenderer; persistenceEffect uses an application-owned history texture.

The image-only adjustments, blur filters, stylization passes, warps, FXAA, and depth of field include both WGSL and GLSL implementations for WebGPU and WebGL2. Selection outlines also support both backends. The advanced scene-aware pipelines documented here use WGSL and target WebGPU. Bloom's portable render path works on both backends; fused downsampling and FFT convolution additionally require WebGPU.

info

deck.gl's existing PostProcessEffect accepts individual shader-pass modules. Named-target CompositeShaderPass graphs and the separate WebGPU FFT bloom renderer require an integration that explicitly executes those rendering paths.