sRGB and linear: the same grey
The canvas shows the grey drawn with the sRGB output. The table prints what is stored and what lands on the screen.
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
ColorManagement.enabled: true
new Color("#808080") stores 0.2159 (not 0.5020)
getHex() gives it back as #808080
setRGB(0.5, 0.5, 0.5) linear is #bcbcbc on the screen
outputColorSpace srgb -> pixel 128
outputColorSpace srgb-linear -> pixel 55