Размытый цвет в ShaderMaterial - PullRequest
Новая
       52

Размытый цвет в ShaderMaterial

0 голосов
/ 09 марта 2019

Я не понимаю, почему мой материал производит блеклое изображение, любые подсказки были бы оценены.Вот изображение, ландшафт использует шейдер.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

любойбыла бы признательна за помощь.

1 Ответ

1 голос
/ 09 марта 2019

Culprit # 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

...