Seven tone-mapping curves on a very bright ball
Left to right: None, Linear, Reinhard, Cineon, ACESFilmic, AgX, Neutral, all at exposure 1. The scene has a light of intensity 9 on purpose.
Screens do not store brightness evenly (sRGB), but light maths needs evenly spaced numbers (linear). three.js converts between them for you, and breaks the picture if you tell it the wrong thing. Tone mapping then squeezes very bright light into what a screen can show.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the showroom's renderer keep colours close to true under a bright key light. Write the two lines.
A roughness map is loaded with TextureLoader. What colour space does it get?
Explain it without notes
A photo texture looks pale on a plane. What is the likely cause and the one-line fix?
Why does None tone mapping turn bright orange yellowish, and what does a tone-mapping curve do instead?
Console
Nothing logged yet.Expected console output
tone mapping lit side (R,G,B) lower left (R,G,B)
None 255,211,156 255,153,70
Linear 255,211,156 255,153,70
Reinhard 224,169,137 215,135,68
Cineon 240,200,167 235,164,69
ACESFilmic 255,217,188 255,186,107
AgX 242,193,173 239,168,132
Neutral 252,165,147 251,137,107