Jagged Overlapping Directional Light Shadow

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.

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

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

How can I blend these shadow maps?

and maybe for cube material.side:THREE.DoubleSide,

1 Like