Model's self shadow is striped

Questions
1

Hey, im using gltf models from blender. Im trying to get the shading correct, but the self shadow is striped?

Capture

Lights:

    let roomsize: number = 100;

    let bbox = new THREE.Box3().setFromObject(regal)
    let center = new THREE.Vector3()
    center.set(0, 1, 0)
    bbox.getCenter(center)

    this.ambientLight = new THREE.AmbientLight(0xfffdfa, .42);
    this.ambientLight.name = "ambientLight";

    scene.add(this.ambientLight);

    this.directionalLight = new THREE.DirectionalLight(0xfffdfa, .50); //,3000
    this.directionalLight.name = 'directionallight'
    this.directionalLight.position.x = 0
    this.directionalLight.position.y = 10;
    this.directionalLight.position.z = 10;

    this.directionalLight.shadow.mapSize.width = 2048;  // default
    this.directionalLight.shadow.mapSize.height = 2048; // default
    this.directionalLight.shadow.camera.near = .5;       // default
    this.directionalLight.shadow.camera.far = 100      // default
    this.directionalLight.shadow.bias = -.0001 // reduces self-shadowing on double-sided objects+

    this.directionalLight.shadow.camera.left = -roomsize;
    this.directionalLight.shadow.camera.right = roomsize;
    this.directionalLight.shadow.camera.top = roomsize;
    this.directionalLight.shadow.camera.bottom = -roomsize;

    this.directionalLight.castShadow = true;

    scene.add(this.directionalLight)

    this.pointLight = new THREE.PointLight(0xfffdfa, .30); //,100
    this.pointLight.name = 'pointlight'
    this.pointLight.position.x = 0
    this.pointLight.position.y = 2
    this.pointLight.position.z = 2
    this.pointLight.lookAt(center)

    this.pointLight.shadow.mapSize.width = 2048  // default
    this.pointLight.shadow.mapSize.height = 2048 // default
    this.pointLight.shadow.camera.near = .5       // default
    this.pointLight.shadow.camera.far = 100      // default
    this.pointLight.shadow.bias = -.0005 // reduces self-shadowing on double-sided objects+
    this.pointLight.castShadow = true

    scene.add(this.pointLight)

Renderer:

this.renderer.shadowMap.enabled = true
this.renderer.shadowMapType = THREE.PCFSoftShadowMap;
2

Can you please verify first if the mentioned artifacts are only visible when using shadows? It seems to me they are just part of the normal lighting…

Anyway, one approach to mitigate self-shadowing artifacts is to tweak shadow.bias. Try it with values in the range [- 0.01, -0-001]. Related issue at stackoverflow:

3

Its only visible if the directional light is turned on and is casting a shadow.
Im already using the bias, but couldnt get it to work yet. I guess thats just some tweeking.

I recognized that the two cuboids are shaded on the front, but both lights are in front of them. How’s that possible? I dont think it should be shaded on the frontside

 this.directionalLight.position.x = 0;
 this.directionalLight.position.y = 10;
 this.directionalLight.position.z = 10;
 this.pointLight.position.x = 0;
 this.pointLight.position.y = 2;
 this.pointLight.position.z = 2;
4

Any chances to share a full working example? TBH, the code section from your previous post does not help to understand what’s going on in your app.