Skip to main content

Vibrance

Adjust subdued colors while protecting hues that are already strongly saturated. vibrance offers a more selective color-grade control than a uniform saturation adjustment.

GitHub

At a Glance

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

Usage

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

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

renderer.renderToScreen({
sourceTexture: sceneColorTexture,
uniforms: {vibrance: {amount: 0.45}}
});

Parameters

ParameterDefaultRangeDescription
amount0-1 to 1Decreases or increases saturation in proportion to how muted each source color is.

The zero default leaves the source unchanged. Positive values reveal quieter color detail without applying the same increase to already vivid pixels.

Composition and Cost

Vibrance is a single color-only pass and requires no intermediate history or scene attachments. It works well after a broad hue rotation, after a color halftone, or as a late finishing grade. Use Hue and Saturation when all colors should change with the same global saturation control.