Skip to main content

Brightness and Contrast

Shape overall exposure and tonal separation with a compact, single-pass color adjustment. Use brightnessContrast for interactive image correction, restrained scene grading, or graphic high-contrast treatments.

GitHub

At a Glance

PropertyValue
ExportbrightnessContrast
BackendsWebGPU and WebGL2
Render passesOne fullscreen color-filter pass
Additional inputsNone

Usage

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

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

renderer.renderToScreen({
sourceTexture: sceneColorTexture,
uniforms: {brightnessContrast: {brightness: 0.08, contrast: 0.28}}
});

Parameters

ParameterDefaultRangeDescription
brightness0-1 to 1Adds or subtracts light uniformly; -1 approaches black and 1 approaches white.
contrast0-1 to 1Compresses or expands tonal separation around the image midpoint.

Both defaults preserve the source image. Positive contrast emphasizes existing differences; negative contrast compresses the image toward neutral gray.

Composition and Cost

This pass samples only the current source color and does not allocate history or named textures. Apply moderate adjustments after exposure or tone mapping for predictable display-space grading. When combined with edge extraction or halftones, placing contrast first gives the later effect a more distinct source signal.

  • Hue and Saturation rotates or expands the color palette.
  • Vibrance targets muted colors without treating every hue equally.
  • Tone Mapping compresses scene-linear HDR highlights with a filmic curve.