Tone Mapping
Convert scene-linear high-dynamic-range lighting into display-ready color with an ACES-style
filmic response. toneMapping compresses bright highlights, preserves source alpha, and exposes
explicit controls for scene exposure and supported display luminance.
At a Glance​
| Property | Value |
|---|---|
| Export | toneMapping |
| Backends | WebGPU and WebGL2 |
| Render passes | One fullscreen color-filter pass |
| Recommended input | Scene-linear floating-point color, such as rgba16float |
Usage​
import {ShaderPassRenderer} from '@luma.gl/engine';
import {createBloomCompositeShaderPass, toneMapping} from '@luma.gl/engine/effects';
const renderer = new ShaderPassRenderer(device, {
colorFormat: 'rgba16float',
shaderPasses: [createBloomCompositeShaderPass(), toneMapping]
});
renderer.renderToScreen({
sourceTexture: hdrSceneTexture,
uniforms: {toneMapping: {exposure: 1.2, maximumLuminance: 1}}
});
Parameters​
| Parameter | Default | Range | Description |
|---|---|---|---|
exposure | 1 | 0 to 10 | Linear multiplier applied to scene color before the filmic response curve. |
maximumLuminance | 1 | 1 to 4 | Maximum output luminance; values above one preserve additional highlight range on compatible HDR displays. |
The implementation smoothly introduces extended highlight output as scene luminance rises. Source alpha is passed through unchanged.
Composition and Cost​
Keep physically motivated lighting, adaptive exposure, temporal accumulation, and Bloom in floating-point scene color before tone mapping. Apply presentation-oriented grading and FXAA afterward when those operations should see the final display-referred image. Tone mapping adds one inexpensive fullscreen color pass and owns no persistent textures.
Related Effects​
- HDR Auto Exposure meters changing scene brightness on the GPU.
- Bloom spreads highlights before the final display transform.
- FXAA can smooth visible display-space contrast edges near presentation.