在ShaderMaterial中

Question

我不明白为什么我的材料会产生褪色的图像，任何线索都将不胜感激。这是图像，terrain使用了相关的着色器。 如您所见，材质看起来真的褪色到场景中的其他对象。

以下是删除了#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