Skip to main content

@luma.gl/engine/effects

@luma.gl/engine/effects provides shader passes and multi-pass pipelines for image adjustment, blur, bloom, antialiasing, depth-aware lighting, temporal reconstruction, atmosphere, and stylization.

Install @luma.gl/engine to use this optional subpath. Effects are not re-exported from the engine root. Shader-pass contracts remain in shaders; graph executes caller-supplied pass definitions without depending on engine.

When to use it​

Use Effects after rendering a scene into textures that can be consumed by a fullscreen ShaderPassRenderer. Use a Shaders shader module instead when the behavior belongs inside an object's material shader rather than a post-processing stage.

Quick start​

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

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

renderer.renderToScreen({sourceTexture});
renderer.destroy();

Core concepts​

  • A ShaderPass describes one fullscreen texture-processing stage.
  • A shader-pass pipeline composes several ordered stages and owns its intermediate render targets.
  • Temporal and depth-aware pipelines require explicit history, depth, velocity, or camera inputs.
  • The caller owns source textures and command submission unless a renderer states otherwise.

Capabilities​

FamilyExamples
Color and tonebrightness/contrast, hue/saturation, vibrance, sepia, tone mapping, HDR exposure
Blur and focusGaussian blur, bloom, depth of field, tilt shift, depth-aware blur
Temporal and antialiasingFXAA, TAA, camera reprojection, motion blur, persistence
Lighting and visibilitySSAO, GTAO, SSGI, SSR, outlines
Atmospherevolumetric fog and clustered volumetric lighting
Stylization and warphalftone, ink, noise, vignette, bulge, magnify, swirl

Public API index​

The Shader Pass Catalog lists every effect, its inputs, compatibility, and cost. The Shader Passes guide explains scene integration and multi-pass composition.

Limits and compatibility​

Simple fullscreen passes support WebGPU and WebGL 2 when both shader variants are provided. Storage-heavy, temporal, or clustered pipelines may require WebGPU and additional attachments. Check the compatibility section on the individual pass page.

Selection outlines​

selectionOutline draws an outer contour around a caller-provided selectionTexture. Supply an r8unorm mask with selected visible surfaces set to one and other pixels to zero. The mask and source must use the same UV orientation. Render the mask against opaque scene depth when the outline should respect occlusion.

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

const renderer = new ShaderPassRenderer(device, {shaderPasses: [selectionOutline]});
renderer.resize([width, height]);
const result = renderer.renderToTexture({
  sourceTexture,
  bindings: {selectionTexture},
  uniforms: {selectionOutline: {color: [0.12, 1, 0.7, 0.9], thickness: 2}}
});

Both WebGPU and WebGL 2 are supported. thickness is a radius in mask pixels, clamped to 0–8; zero disables the contour. A fixed 5×5 neighborhood samples the mask, so large radii are approximate and can miss isolated subpixel details. The default radius is 2 pixels. color is straight RGBA; the source and output use premultiplied alpha. The selected interior retains its source color. The renderer borrows the supplied textures and owns its intermediate targets; destroy it when finished.