Wrong color space after updating three

[edsunman]

Hi, I have just updated from three 0.152 to 0.158 and now when using postprocessing the colors look washed out - I think it is displaying in linear color space rather than srgb. I have not made any other changes except adjusting the light intensity due to lighting changes in 0.155.

If I comment out the effect pass and only use the render pass the colors display correctly. I have tried OutlineEffect, BloomEffect and GlitchEffect and the color output is the same (looks like linear).

If I check the color space of the renderer it looks correct:
console.log(renderer.outputColorSpace) // <- "srgb"

Is there anything else that I can check that could be causing this?

Thanks!

[vanruesc]

Hi, are you using tone mapping? If so, you might need to use a ToneMappingEffect instead of WebGLRenderer.toneMapping.

[edsunman]

Thank you adding in ToneMappingEffect worked.

The problem I have now which may be related is that I am applying the tone mapping after the bloom effect, but lots more objects are having the bloom effect applied than before I updated the three version. I have the luminance threshold set to 1 so the bloom effect would only apply to materials with tonemapped set to false. Is the tonemapped property ignored when using ToneMappingEffect?

[vanruesc]

If you want to restore the previous behaviour, you'll need to use an EffectPass with a ToneMappingEffect followed by another EffectPass with a BloomEffect.

Tone mapping should really be applied last though because bloom usually pushes pixels out of the [0, 1] range again. If your scene already contains a lot of bright pixels prior to tone mapping, you should consider adjusting the lighting or raising the bloom threshold, e.g. bloomEffect.luminanceMaterial.threshold = 1.2;