I’ve been exploring tone mapping while working on Shade to improve how HDR images are displayed, and I’d like to share my findings.

In a cartoony scene with a basic directional light (normalized to 1.0 intensity), the image looks too dark. Increasing the light intensity to 2 and then 10 improves brightness, but causes oversaturation in some areas (see the red-highlighted solid white in Photoshop):

[

For a scene with glossy materials, starting at intensity 1 gives a subdued result. Boosting the intensity to 10 improves detail on materials like wood and rubber, yet large portions become blown out:

[

and using Photoshop to highlight the FFFFFF areas confirms clipping, even when luminance is mapped to a false color scale.

So why use tone mapping? Our renderers produce HDR images with values well beyond the 0–255 (or 0–1) range that displays can handle. Tone mapping compresses these ranges so that both very dark and very bright areas can be properly represented. For example, the ACES tone mapping curve compresses higher intensities while preserving details in the mid-tones:

[

This compression means that values between 0.1 and 1.0 occupy most of the output range, while extreme values are adjusted to avoid harsh clipping.

However, ACES has its tradeoffs. It imparts a distinct look and can degrade color fidelity, especially toward the six primary hues, resulting in color banding (e.g. oranges turning yellow and water appearing cyan). At higher light intensities (e.g., 100), hues become clamped with little variation, as shown below:

[

[

For illustration, here’s a simple hue sweep (from intensity 0 to 3) without tone mapping:

GLSLCopied
hsv_to_rgb( vec3( uv.y, 0.8, 1.0 ) ) * ( uv.x * 10.0)

Below are comparisons of different tone mapping methods applied to various scenes. The tests include None, Reinhard, ACES, AGX, and Khronos PBR Neutral. Each section features screenshots with varying light intensities and color formulas. For example, the Khronos PBR Neutral tone mapping uses the formula:

GLSLCopied
hsv_to_rgb(vec3(uv.y, 1.0 - uv.x, 1.0))

Other examples include dark sweeps using values from 0 to 0.1:

GLSLCopied
hsv_to_rgb(vec3(uv.y, 1.0, mix(0.0, 0.1, uv.x)))

The post contains a series of image comparisons for each tone mapping option across different scenes such as the Pica Pica scene, Sea Keep scene, Flight Helmet scene, and Bistro scene. Each comparison illustrates how tone mapping affects the final rendered image.

In summary:

• If your scene uses realistic lighting, tone mapping is essential to prevent clipping.
• ACES, while popular, imparts a noticeable look and shifts colors.
• For accurate color reproduction (especially in product visualizations or embedded 3D on 2D pages), Khronos PBR Neutral is a great choice.
• If you want a neutral tone mapper without added artistic flair, AGX works well, though it may make the scene appear a bit flat.

Disclaimers:

• All screenshots were taken in Shade
• The ACES implementation closely follows three.js, with identical color matrices.
• AGX’s implementation is inspired by Blender though similar to three.js's approach.
• All scenes include SSR, SSAO, and Bloom effects.
• Gamma correction and color space (rec 709) are beyond the scope of this discussion.

References include Wikipedia’s article on tone mapping, Khronos PBR Neutral Tone Mapping documentation, and several blog posts and pull requests that detail implementations.

I welcome any further discussion or questions on these tone mapping techniques!