在 ShaderMaterial 中洗掉颜色

Question

我不明白为什么我的材料会产生褪色的图像，任何线索将不胜感激。这是图像，地形使用有问题的着色器。 如您所见，与场景中的其他对象相比，材质看起来确实褪色了。

这是删除#include <encoding_fragment> 的同一场景：

渲染直接在屏幕上完成，而不是渲染目标。以下是相关的渲染器设置：

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

这是材质的片段着色器：

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>
}

片段仿照朗伯材质： https://github.com/mrdoob/three.js/blob/c94018cb475e1c357671138e78741b1a162e0bf9/src/renderers/shaders/ShaderLib/meshlambert_frag.glsl.js

任何帮助将不胜感激。

Answer 1

罪魁祸首#1：

使用mapTexelToLinear，这是基于Material.map 属性加载的，因为我的是自定义材质，我不使用map，它设置不正确。这需要替换为sRGBToLinear。

有用的参考资料： 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