Skip to main content

PostProcessEffect

The PostProcessEffect applies screen space pixel manipulation effects to deck.gl layers.

Constructor​

new PostProcessEffect(shaderModule, props);

Parameters:

  • shaderModule(object) - a shader module wraps a screen space effect. For supported effects see luma.gl shader modules.
  • props(object) - parameters to replace the default values in shader module.

Example​

import {brightnessContrast} from '@luma.gl/effects';
import {PostProcessEffect} from '@deck.gl/core';

const postProcessEffect = new PostProcessEffect(brightnessContrast, {
  brightness: 1.0,
  contrast: 1.0
});

const deckgl = new Deck({
  canvas: 'my-deck-canvas',
  initialViewState,
  controller: true,
  // add effect to deck
  effects: [postProcessEffect],
  layers: [new GeoJsonLayer({
    ...
  })]
});

Remarks​

Antialiasing​

Adding a post-processing effect redirects layer rendering into an offscreen framebuffer, which is not multisampled. Layers whose edges depend on the canvas' MSAA — including PathLayer, LineLayer, ArcLayer, and PointCloudLayer — therefore render with hard, aliased edges once any effect is added, even though the canvas itself was created with antialias: true. See #10404.

Set antialiasing: true on those layers to have them compute edge coverage in the shader instead. On composite layers the prop is named lineAntialiasing (GeoJsonLayer, PolygonLayer).

Source​

/modules/core/src/effects/post-process-effect.ts