# Pixel shadows between adjacent meshes

**URL:** <https://discourse.threejs.org/t/pixel-shadows-between-adjacent-meshes/41951>\
**Category:** Questions\
**Tags:** shadows, lights, mesh\
**Created:** [August 26, 2022, 8:55pm UTC](https://discourse.threejs.org/t/pixel-shadows-between-adjacent-meshes/41951 "2022-08-26T20:55:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sofmal](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@Sofmal](https://discourse.threejs.org/u/Sofmal)\
**Post date:** [August 26, 2022, 8:55pm UTC](https://discourse.threejs.org/t/pixel-shadows-between-adjacent-meshes/41951/1 "2022-08-26T20:55:10Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/c/fce5c74d9867b9c1a66939bf39de8c0c1273755c.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/d/ad56cdacbad521e977ef858791244622f05795ab.jpeg)

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [August 26, 2022, 11:02pm UTC](https://discourse.threejs.org/t/pixel-shadows-between-adjacent-meshes/41951/2 "2022-08-26T23:02:34Z")

</div>

You can fine tune the shadows offset on the `light.shadow.bias`, with a very small negative or positive offset see [three.js docs](https://threejs.org/docs/?q=shadow#api/en/lights/shadows/LightShadow.bias) 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.

---

<div class="post-metadata">

**Author:** ![Sofmal](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@Sofmal](https://discourse.threejs.org/u/Sofmal)\
**Post date:** [August 27, 2022, 7:36am UTC](https://discourse.threejs.org/t/pixel-shadows-between-adjacent-meshes/41951/3 "2022-08-27T07:36:38Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/5/e5d201dc4f9d1cbb8c74a3a7569617ba151154e1.png)

Here are my shadow settings:

```javascript
 //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;

```

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [August 27, 2022, 5:53pm UTC](https://discourse.threejs.org/t/pixel-shadows-between-adjacent-meshes/41951/4 "2022-08-27T17:53:08Z")

</div>

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.