Pixel shadows between adjacent meshes

Questions
, ,
1

I have a scene with multiple meshes in. I have stacked several apartments (all represented as separate meshes) on top of each other and they are all both casting and receiving shadows.

I always end up with a darker part close tho the edges between adjacent apartments (see picture) The shadow shouldn’t be there and it is also very low resolution. Does anyone know how I can get rid of the shadow in between my meshes?

image
image828×1792 45.6 KB

image
image828×1792 43.9 KB

2

You can fine tune the shadows offset on the light.shadow.bias, with a very small negative or positive offset see three.js docs or test out if normalBias can help you.

Other than that also optimizing your shadow frustum and shadow map size, which is only about optimizing the effective resolution/quality though.

1 Like
3

Setting the bias to -0.005 solves the problem in between the meshes, but it moves the whole shadow (look at the balconies for example). Should I change some other settings when I add the bias value?

image
image1534×1060 133 KB

Here are my shadow settings:

 //Optimize the shadow map size

let bbox = new THREE.Box3().setFromObject(mesh);
    const center = new THREE.Vector3();
    bbox.getCenter(center);
    let sphere= bbox.getBoundingSphere(new THREE.Sphere(center));

const shadowCameraSize = sphere.radius * 2
    let shadowMapFactor = 1

    if (shadowCameraSize > 100) {
      shadowMapFactor = Math.round(shadowCameraSize / 100)
    }

// Shadow settings
    directional.castShadow = true
    directional.shadow.mapSize.width = 1024 * shadowMapFactor
    directional.shadow.mapSize.height = 1024 * shadowMapFactor
    directional.shadow.camera.left = -shadowCameraSize
    directional.shadow.camera.right = shadowCameraSize
    directional.shadow.camera.top = shadowCameraSize
    directional.shadow.camera.bottom = -shadowCameraSize
    directional.shadow.camera.near = 0.1
    directional.shadow.camera.far = shadowCameraSize * 3
    directional.shadow.bias = -0.005;
    directional.shadow.normalBias = -0.005;
4

There is not much to tell about it unless you provide a jsfiddle or codepen. But visually that shadow bias seems to be too much, also take a look at the docs what normalBias means not just use both if one does not what you expect. Then try to fine tune these until it looks good enough, but at this low resolution you probably need to expect some parts to be not perfect.