Jagged Overlapping Directional Light Shadow

Questions
,
1

I am implementing shadows onto my scene by adding a shadow map to each directional camera.

My program uses a helper function to do this, and ends up using these settings:

shadows: {
        enabled: true,
        type: three.VSMShadowMap,
        mapWidth: 2056,
        mapHeight: 206,
        near: 0.5,
        far: 1000,
      }

And applies it to each 8 lights for 8 vertexs of a cube

      lights[i] = new three.DirectionalLight(this._threeSceneLightsOptions.colorHex, this._threeSceneLightsOptions.intensity)
      lights[i].castShadow = true
      lights[i].shadow.mapSize.width = shadows.mapWidth
      lights[i].shadow.mapSize.height = shadows.mapHeight
      lights[i].shadow.camera.near = shadows.near
      lights[i].shadow.camera.far = shadows.far

My shadow ends up be jagged and pixelated despite a high density.

image
image1920×991 110 KB

image
image1206×1246 69.2 KB

I enabled shadow helpers and I see the following from 8 lights:

image
image1920×1603 224 KB

image
image3483×1795 155 KB

Moving the lights close (around 100 units out to 3 or 4 units) still has the same effect:

image
image1321×1144 52.3 KB

How can I blend these shadow maps?

2

DirectionalLight.shadow.bias=-0.00004;
and maybe for cube material.side:THREE.DoubleSide,

1 Like