Color management with ShaderMaterials

[bennlich]

Hi. I’m trying to understand the correct way to handle color in custom ShaderMaterials, and how this changes when I use an EffectComposer.

I’m using r177 (i.e. with the new and improved threejs color management: Updates to Color Management in three.js r152)

---

In the color management docs I found:

Custom materials based on ShaderMaterial and RawShaderMaterial have to implement their own output color space conversion. For instances of ShaderMaterial , adding the colorspace_fragment shader chunk to the fragment shader’s main() function should be sufficient.

This is the opposite of what one user recommends in this question: ShaderMaterial and Colormanagement - #2 by HEOJUNFO

In Color Space seems to be inconsistent with reflection after r152 - #5 by Sidney_Dev, Don says:

The issue is, partially, that shaders must use a different output colorspace when rendering to a render target vs. rendering to the drawing buffer.

---

I’m working with a simple fragment shader like this:

gl_FragColor = vec4(a * 0.16, a * 1.0, a * 1.0, 1.);

where a varies from 0 to 1.

Before I started using an EffectComposer, my shader produced various teal colors like this:

Now that I started using an EffectComposer with an OutputPass, the teal colors look much brighter, like this:

I wonder what’s going on. Is it that beforehand, without the EffectComposer, the gl_FragColor in my fragment shader was expected to already be in sRGB-space, and now, with the EffectComposer, the gl_FragColor is expected to be in linear-space, and gets converted to sRGB-space in the OutputPass?

[manthrax]

If you are using effectcomposer, I think you do Not have to implement colorspace conversion in your shader, but only output linear color.
Then the outputpass on the composer will color grade the final output.

If you want your shader to work with/without effectcomposer, then you will need to insert the same logical tonemapping/colorspace chunks as in the built in materials…

Specifically the:
tonemapping_fragment
and
colorspace_fragment
chunk you can see here:

three-shaderlib-skim