Shader Pass Catalog

Explore reusable image-processing filters, cinematic lens effects, temporal reconstruction, and scene-aware WebGPU pipelines from @luma.gl/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

Choosing an Effect

Category	Effects	Typical placement
Color and tone	Brightness and contrast, hue and saturation, sepia, vibrance, tone mapping, HDR auto exposure	Exposure and grading before the final display transform.
Blur, bloom and focus	Bloom, Gaussian blur, triangle blur, tilt shift, zoom blur, depth of field, depth-aware blur	Scene-linear lighting and camera effects before tone mapping.
Temporal and antialiasing	Persistence, FXAA, temporal antialiasing, camera-reprojection antialiasing, motion blur	Temporal accumulation before lens effects; FXAA near presentation.
Lighting and visibility	SSAO, GTAO, screen-space global illumination, screen-space reflections, outlines	After scene rendering while depth, normals, and velocity still align.
Atmosphere	Volumetric fog, clustered volumetric lighting	After opaque lighting and visibility; before exposure and bloom.
Stylization and detail	Color halftone, dot screen, edge work, hexagonal pixelation, ink, noise, vignette, denoise	Creative finishing or targeted source cleanup.
Warp and lens	Bulge and pinch, magnify, swirl	After depth-dependent effects unless auxiliary attachments are transformed too.

Usage

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

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

const renderer = new ShaderPassRenderer(device, {
  colorFormat: 'rgba16float',
  shaderPasses: [
    createBloomShaderPassPipeline({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

Input	Required by	Ownership
sourceTexture	Every shader pass and pipeline.	Application provides the current scene or image.
depthTexture	Depth of field, bilateral blur, occlusion, reflections, temporal reconstruction, motion blur, and atmosphere.	Application retains the scene depth attachment.
normalTexture	Normal-aware occlusion, screen-space lighting and reflections, and optional outlines.	Application supplies view-space normals or a compatible G-buffer attachment.
velocityTexture	Motion blur and velocity-based temporal reprojection.	Application supplies per-pixel screen-space motion.
History textures	Temporal 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. 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 ShaderPassPipeline graphs and the separate WebGPU FFT bloom renderer require an integration that explicitly executes those rendering paths.

Related Guides

• Shader Passes explains routing, history, and complete HDR render stacks.
• Rendering Techniques and Tradeoffs compares blur, occlusion, reflections, transparency, and temporal techniques.
• ShaderPassRenderer documents execution, bindings, intermediate targets, and presentation.
• Many classic image filters are derived from Evan Wallace's glfx.js.