Tone Mapping
Compress HDR-style scene values into a range a normal display can actually show while keeping highlights under control.
Interactive playground
Tweak the operator or scene live so the article connects to an immediate visual result.
Tone mapping
Compress HDR-like values into the displayable range so bright highlights remain impressive without clipping every midtone away.
Clipped HDR preview
Reference viewTone-mapped output
Interactive compareExposure scales the scene before the mapping curve decides how highlights roll off.
Family
Color & tone
Color spaces, gamma, tone mapping, compositing, and distribution-aware image remapping.
Builds on
2 topics
Read these first if you want the surrounding pipeline context.
Unlocks
2 next topics
Use these follow-ups when you want to keep turning the image-processing pipeline forward.
Learning paths
1
This topic appears in curated graphics progressions so the next step is obvious.
Choose this over that
Compress dynamic range before polishing the result
Tone mapping is about fitting bright HDR-style values into a display range, not about histogram balancing or display-space encoding alone.
Tone Mapping
Choose this when: The scene contains values far above normal display range and they need graceful compression.
Choose something else when: The image is already LDR and only needs contrast reshaping or gamma handling.
Gamma Correction
Choose this when: The mismatch is between linear-light computations and display-encoded output.
Choose something else when: The scene still needs exposure compression before gamma is even relevant.
Bloom
Choose this when: Bright highlights should visibly bleed after the main tone pipeline, not just be compressed.
Choose something else when: You still need to fit HDR values into range before adding glow.
Problem
Rendered scenes can contain values far beyond what an ordinary display can show. If you just clamp them, highlights blow out and contrast relationships collapse.
Intuition
Tone mapping bends a wide dynamic range into a narrower one. Bright values are compressed more aggressively than midtones so the overall scene remains readable instead of exploding into clipped white patches.
Core idea
- Start from linear HDR-style scene values.
- Optionally apply exposure control to set the overall scene brightness.
- Pass the values through a tone-mapping curve such as Reinhard, filmic, or ACES-style compression.
- Afterward, continue toward output encoding and any late post-processing steps.
Worked example
A sunlit highlight and a dim shadow can both exist in the same physically-based render. Tone mapping lets the highlight stay intense without erasing every midtone detail in the rest of the image.
Complexity
Most tone-mapping operators are constant work per pixel. The challenge is choosing a curve that behaves well, not paying for it computationally.
When to choose it
- Choose tone mapping whenever your scene values exceed the display range.
- Choose histogram equalization when the issue is local or global contrast redistribution in an already bounded image.
- Add bloom later if you want bright regions to glow after the main dynamic-range compression is handled.
Key takeaways
- Tone mapping compresses dynamic range; it does not replace gamma handling.
- Exposure control and the tone curve work together.
- A good tone mapper preserves scene readability while keeping highlights expressive.
- It is a standard bridge between HDR rendering and LDR output.
Practice ideas
- Compare clamping against a simple Reinhard or filmic tone mapper on an HDR-like test image.
- Adjust exposure before tone mapping and observe how the same curve behaves differently.
- Add bloom after tone mapping and inspect how highlight glow changes the perceived scene.
Relation to other topics
- Gamma correction comes later when encoding the final output for display.
- Histogram equalization redistributes contrast differently and is usually not a replacement for HDR compression.
- Bloom is a common companion effect that operates after bright regions have been identified and controlled.
Build on these first
These topics supply the mental model or preceding stage that this page assumes.
Color Spaces
Choose the right representation for the job, because RGB, HSV, linear light, and display-encoded values make different operations easy or safe.
Gamma Correction
Match linear-light math to display-encoded output so blends, shading, and gradients do not look mysteriously wrong.
What this enables
Once the current operator feels natural, these are the most useful follow-up jumps.
Related directions
These topics live nearby conceptually, even if they are not strict prerequisites.
Alpha Compositing
Combine foreground and background layers with transparency so multiple images or passes can share the same final frame.
Dithering
Trade spatial noise for perceived smoothness when the output format cannot represent all the shades you want directly.
Histogram Equalization
Redistribute grayscale values so a low-contrast image uses more of the available intensity range.
Bloom
Make bright highlights glow by extracting them, blurring them, and compositing the result back onto the base frame.
More from Color & tone
Stay in the same family when you want parallel operators built from the same mental model.
Alpha Compositing
Combine foreground and background layers with transparency so multiple images or passes can share the same final frame.
Color Spaces
Choose the right representation for the job, because RGB, HSV, linear light, and display-encoded values make different operations easy or safe.
Dithering
Trade spatial noise for perceived smoothness when the output format cannot represent all the shades you want directly.
Gamma Correction
Match linear-light math to display-encoded output so blends, shading, and gradients do not look mysteriously wrong.
Paths that include this topic
Follow one of these sequences if you want a guided next step instead of open-ended browsing.
Color and tone pipeline
Track how values move from color spaces and gamma into dynamic-range compression, equalization, dithering, and compositing.
From the blog
Pair the graphics atlas with recent writing from the broader site whenever you want a wider engineering lens.