在ShaderMaterial中洗掉了颜色

问题描述 投票:0回答:1

我不明白为什么我的材料会产生褪色的图像,任何线索都会受到赞赏。这是图像,地形使用着色器。 enter image description here正如您所看到的那样,材质看起来非常褪色,与场景中的其他对象相映成趣。

这是与#include <encoding_fragment>删除相同的场景:enter image description here

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

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为模型

任何帮助,将不胜感激。

three.js glsl webgl shader
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.