Shading appears on some parts

Questions
, ,
1

Hi there,
I am doing avatars using threejs, loading gltf and I get some shading patterns on some parts of them although textures are solid color and mesh is good, please see the difference between mine (white background) and gltf online viewer (black background).
I am suspicious of of post-processing shader and composer, so I am adding it here as well.
Any help is much appreciated.

        let pixelRatio = window.devicePixelRatio;
        let AA = true;
        if (pixelRatio > 1) {
              AA = false;
            }
        let renderer = new THREE.WebGLRenderer({
              antialias: AA,
              powerPreference: "high-performance",
            })
        renderer.shadowMap.enabled = true;
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.toneMappingExposure = 1.7;

        renderer.gammaFactor = 2.2;
        renderer.outputEncoding = THREE.sRGBEncoding;

        renderer.setSize ( window.innerWidth , window.innerHeight );
        document.getElementById ( 'webgl' ).appendChild ( renderer.domElement );

        const composer = new EffectComposer ( renderer );
        const renderPass = new RenderPass ( WebScene , camera );
        renderPass.renderToScreen = true;
        composer.addPass ( renderPass );

        const effectFXAA = new ShaderPass( FXAAShader );
        effectFXAA.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
        effectFXAA.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );
        composer.addPass( effectFXAA );

    	const brightnessContrastShader = new ShaderPass ( BrightnessContrastShader );
        brightnessContrastShader.name = 'BrightnessContrast';
        brightnessContrastShader.uniforms ['brightness'].value = 0.20 ;
        brightnessContrastShader.uniforms ['contrast'].value = 0.20 ;
        brightnessContrastShader.renderToScreen = true;
        composer.addPass ( brightnessContrastShader );

image
image1848×845 230 KB

2

I think you were supposed to resize the composer as well

3

thanks, I have added that but had no effect. I still get the same shade pattern

4 
const composer_renderTarget=new WebGLRenderTarget(width,height,{type:THREE.HalfFloatType} );
const composer = new EffectComposer ( renderer,composer_renderTarget );

or

const composer_renderTarget=new WebGLRenderTarget(width,height,{type:HalfFloatType} );
const composer = new EffectComposer ( renderer,composer_renderTarget );
5

Thank you, but I am still getting that :frowning:

6

Maybe is shadow bias. Try disable shadow. Or change shadow.bias at light.

8

thank you, yes it is shadow, thanks for your help. but now how can I get the shadow yet removing the pattern? I got 3 lights more or less like this:

let spotLight = getThisLight ( baseLight*1 , 0xffffff ,'spot' , 0xff0000 , true);
spotLight.name  = 'spotLight-1';
spotLight.position.x = -6;
spotLight.position.y = 1.5;
spotLight.position.z = 15;
spotLight.penumbra   = 0.18;

spotLight.shadow.bias = 0.001;
spotLight.shadow.mapSize.width = 4096;
spotLight.shadow.mapSize.height = 4096;
9

Try:
renderer.shadowMap.type=THREE.VSMShadowMap;
Or
spotLight.shadow.bias = -0.001;
Its hard without full project archive.

10

Thank you, I am considering to rewrite the shadow, what do you recommend me to do for a very light casting a shadow (since this makes the model more realistic) yet not seeing such a pattern?

11

I dont know english good. I use VSMShadowMap.
For realisric u can add HDR envMap like here:
https://threejs.org/examples/?q=gltf#webgl_loader_gltf

12

Thank you very much :slight_smile: