Hue and Saturation
Rotate the image palette and control overall color intensity without changing the basic image
geometry. hueSaturation is useful for color grading, thematic recoloring, and reducing a scene
to monochrome.
At a Glance​
| Property | Value |
|---|---|
| Export | hueSaturation |
| Backends | WebGPU and WebGL2 |
| Render passes | One fullscreen color-filter pass |
| Additional inputs | None |
Usage​
import {ShaderPassRenderer} from '@luma.gl/engine';
import {hueSaturation} from '@luma.gl/engine/effects';
const renderer = new ShaderPassRenderer(device, {shaderPasses: [hueSaturation]});
renderer.renderToScreen({
sourceTexture: sceneColorTexture,
uniforms: {hueSaturation: {hue: -0.08, saturation: 0.32}}
});
Parameters​
| Parameter | Default | Range | Description |
|---|---|---|---|
hue | 0 | -1 to 1 | Rotates RGB around the grayscale axis; the endpoints represent a half-turn in either direction. |
saturation | 0 | -1 to 1 | Pulls colors toward gray or pushes them farther from their channel average. |
A saturation value of -1 produces a grayscale treatment. Hue rotation leaves perfectly neutral
colors on the grayscale axis unchanged.
Composition and Cost​
The implementation operates directly on the current pixel and requires no neighboring samples, depth attachments, or history. Place it before color-dependent stylization when the rotated palette should affect printed channels, or after bloom when the entire composed image should be graded together.
Related Effects​
- Vibrance selectively boosts less saturated colors.
- Sepia applies a specific warm photographic color transform.
- Color Halftone converts a graded image into separated print channels.