Washed out color in ShaderMaterial

Question

I don't understand why my material produces a faded image, any clues would be appreciated. Here is the image, terrain uses the shader in question. As you can see the material looks really faded comapred to other objects in the scene.

Here's the same scene with #include <encoding_fragment> removed:

Rendering is done directly to the screen and not to a render-target. Here are relevant renderer settings:

webGLRenderer.gammaInput = true;
webGLRenderer.gammaOutput = true;
webGLRenderer.gammaFactor = 2.2;
webGLRenderer.physicallyBasedShading = true;

here's the fragment shader of the material:

void main() { 
    vec4 splatData = normalize( texture2D(splatMap, vUv) );
    vec2 uvT = vUv*diffuseMapRepeat;
    vec4 diffuseData0 = texture2D(diffuseMap0, uvT);
    vec4 diffuseData1 = texture2D(diffuseMap1, uvT);
    vec4 diffuseData2 = texture2D(diffuseMap2, uvT);
    vec4 diffuseData3 = texture2D(diffuseMap3, uvT);
    vec4 splatDiffuseColor = blendSplatTextures(diffuseData0, diffuseData1, diffuseData2, diffuseData3, splatData);

    splatDiffuseColor.a = 1.0;

    #ifdef DIFFUSE_GRAIN
        randomBlend(vUv, splatDiffuseColor.rgb, 0.03);
    #endif


    vec2 gridOverlayCoord = computeGridPosition(vUv);
    vec2 gridOverlayUV = gridOverlayCoord/(gridResolution);
    vec4 gridOverlayColor = texture2D(diffuseGridOverlayMap, gridOverlayUV);
    vec2 gridOverlayEdge = 1.0-step(0.5-gridBorderWidth*0.5, abs( fract(gridOverlayUV*gridResolution) - 0.5 ));
    float gridOverlayAlpha = min(gridOverlayEdge.x,gridOverlayEdge.y);
    gridOverlayColor *= gridOverlayAlpha;

    #include <clipping_planes_fragment>

    splatDiffuseColor = mapTexelToLinear( splatDiffuseColor );

    vec4 diffuseColor = blendAlpha( vec4(splatDiffuseColor.rgb,opacity) , gridOverlayColor);
    diffuseColor.a *=  opacity;

    ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
    vec3 totalEmissiveRadiance = emissive;

    #include <logdepthbuf_fragment>

    #include <alphamap_fragment>
    #include <alphatest_fragment>

    // make surface completely diffuse
    float specularStrength = 0.0;
    #include <emissivemap_fragment>
    // accumulation
    reflectedLight.indirectDiffuse = getAmbientLightIrradiance( ambientLightColor );
    #ifdef DOUBLE_SIDED
        reflectedLight.indirectDiffuse += ( gl_FrontFacing ) ? vIndirectFront : vIndirectBack;
    #else
        reflectedLight.indirectDiffuse += vIndirectFront;
    #endif

    #include <lightmap_fragment> 


    reflectedLight.indirectDiffuse *= BRDF_Diffuse_Lambert( diffuseColor.rgb );

    #ifdef DOUBLE_SIDED

        reflectedLight.directDiffuse = ( gl_FrontFacing ) ? vLightFront : vLightBack;

    #else

        reflectedLight.directDiffuse = vLightFront;

    #endif

    ${ShaderChunks.clouds_fragment}

    reflectedLight.directDiffuse *= BRDF_Diffuse_Lambert( diffuseColor.rgb ) * getShadowMask();

    // modulation
    #include <aomap_fragment>

    vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;

    #include <envmap_fragment>

    gl_FragColor = vec4( outgoingLight, diffuseColor.a );

    #include <tonemapping_fragment>
    #include <encodings_fragment>
    #include <fog_fragment>
    #include <dithering_fragment>
}

The fragment is modeled after lambert material: https://github.com/mrdoob/three.js/blob/c94018cb475e1c357671138e78741b1a162e0bf9/src/renderers/shaders/ShaderLib/meshlambert_frag.glsl.js

any help would be appreciated.

travnik travnik · Accepted Answer · 2019-03-09T19:52:25

Culprit #1:

using mapTexelToLinear, this is loaded based on Material.map property, since mine is a custom material and I don't use map, it's not set correctly. This needed to be replaced with sRGBToLinear.

Useful references: https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLProgram.js#L511 https://github.com/mrdoob/three.js/blob/ae49868c1b0ad53e3680074c961a9f7318d94f13/src/renderers/shaders/ShaderChunk/encodings_pars_fragment.glsl.js https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLProgram.js#L12

Washed out color in ShaderMaterial

1 Answers