Tone mapping

The curve that squeezes unlimited lighting values into screen colors, so bright areas roll off like film instead of clipping to white.

why is everything blown out whitethe ACES settingtonemappingthe filmic look settingHDR to screen conversionmy highlights are pure white blobstone mapthe exposure setting in three js

See it

Live demo coming soon

What it is

Lighting math produces values with no ceiling: a sun-lit highlight might be 40.0 where the screen tops out at 1.0. Tone mapping is the curve that squeezes that open-ended range into displayable color, deciding how gracefully bright things roll off instead of clipping to flat white. Photography solved this with film response curves, and the common operators borrow the same shape.

The named options are recipes. Linear just clips, so anything bright goes chalk white. Reinhard compresses gently but reads washed out and grey. ACES Filmic is the crowd favorite: contrasty shadows, highlights that bend toward the light's hue before they desaturate, which is why an ACES render instantly looks more 'shot'. Worth being precise about that name. ACES is a whole color management system used across film, while what three.js ships as ACESFilmicToneMapping is a cheap curve fitted to approximate its display look, not the full pipeline. Three.js also ships AgX and Neutral, which preserve saturation in bright areas better than ACES does.

Gotcha: tone mapping and color space are two different knobs and people conflate them. If your scene looks flat and washed out, the culprit is usually an unset output color space (sRGB) or textures not flagged as color data, not the tone mapper. And tone mapping applies to the whole frame, so raising toneMappingExposure to fix a dark model will blow out the background: fix the light intensity instead.

Ask AI for it

Configure the renderer's color pipeline for a filmic look: set toneMapping to ACESFilmicToneMapping with toneMappingExposure around 1.0, set outputColorSpace to SRGBColorSpace, and mark all color textures (base color, emissive) as SRGBColorSpace while leaving normal, roughness, and metalness maps in linear. Light the scene with an HDR environment map so highlights actually exceed 1.0 and have something to roll off. Then compare AgX against ACES and keep whichever holds saturation better in the bright areas.

You might have meant

post processing render passenvironment mappbrbloommaterial

Go deeper