# Lost in the shadows ☀️🌗🌚

**URL:** <https://forum.babylonjs.com/t/lost-in-the-shadows/41723>\
**Category:** Questions\
**Tags:** shadows, cascadeshadowgenerat\
**Created:** [June 19, 2023, 2:34pm UTC](https://forum.babylonjs.com/t/lost-in-the-shadows/41723 "2023-06-19T14:34:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Leon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leon/32/30387_2.png) [@Leon](https://forum.babylonjs.com/u/Leon)\
**Post date:** [June 19, 2023, 2:34pm UTC](https://forum.babylonjs.com/t/lost-in-the-shadows/41723/1 "2023-06-19T14:34:31Z")

</div>

I’m a bit stuck with shadows.

At work we build a interactive apartment picker.

up until now we have been using a normal shadow generator, which works well for smaller \< 500m scenes.

But now we wanted to expand our scenes to get more from the surroundings. which has lead to the shadow map being 2048x2048 and our scene size is 10 000m x 10 000m

I did some reading and cascade shadow maps seems the way to go.  
But I get all these strange moiré pattern artifacts.

 ![Screenshot 2023-06-19 at 16.28.28](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/9/99243285afab6c10ae124147e9a06213085deef5.jpeg)

Here you can try it out

> **[wec360°](https://wec360-dev-view--471-aaamtae7.web.app/leon/dev/streetmap?feature=sunstudy)**
>
> wec360° project

This is the conf I’m using for the generator

```auto
this.shadowGenerator = new CascadedShadowGenerator(2048, this.sunLight, true)

    // this.shadowGenerator.shadowMaxZ = 500
    // You can greatly improve the shadow rendering (depending on your scene) by setting autoCalcDepthBounds to true, at the expense of more GPU work.
    this.shadowGenerator.autoCalcDepthBounds = true
    this.shadowGenerator.lambda = 0.7
    // this.shadowGenerator.cascadeBlendPercentage = 0.05
    this.shadowGenerator.depthClamp = true
    this.shadowGenerator.stabilizeCascades = false
    this.shadowGenerator.filter = ShadowGenerator.FILTER_PCF
    this.shadowGenerator.filteringQuality = ShadowGenerator.QUALITY_HIGH
    // this.shadowGenerator.transparencyShadow = true
    // this.shadowGenerator.enableSoftTransparentShadow = true

    // this.shadowGenerator.debug = true

    // If your shadow casters and receivers don't move
    this.shadowGenerator.freezeShadowCastersBoundingInfo = true

    // Only render once on startup
    this.shadowGenerator.getShadowMap().refreshRate = RenderTargetTexture.REFRESHRATE_RENDER_ONCE

```

Any suggestions where these strange patterns come from and if there is anything I can do to get rid of them?

What I have already tried is playing around with most of the cascade shadow generator settings, and I have read the [Cascaded Shadow Maps | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/lights/shadows_csm) documentation, but to no avail.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [June 19, 2023, 2:42pm UTC](https://forum.babylonjs.com/t/lost-in-the-shadows/41723/2 "2023-06-19T14:42:32Z")

</div>

does not look like you have tweaked the bias at all.

> **[Shadows | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/lights/shadows#troubleshooting)**
>
> Learn how to leverage shadows in Babylon.js

---

<div class="post-metadata">

**Author:** ![11128](https://avatars.discourse-cdn.com/v4/letter/1/d07c76/32.png) [@11128](https://forum.babylonjs.com/u/11128)\
**Post date:** [June 21, 2023, 5:50am UTC](https://forum.babylonjs.com/t/lost-in-the-shadows/41723/3 "2023-06-21T05:50:46Z")

</div>

As Pryme8 said that in order to solve remove moiré pattern(maybe you using self shadowing), you need to set a bias on the shadow generator

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 21, 2023, 6:18am UTC](https://forum.babylonjs.com/t/lost-in-the-shadows/41723/4 "2023-06-21T06:18:03Z")

</div>

I had the same issue maybe 2 years ago, so I’m not sure this will work, but if I can recall correctly I got rid of the moire using poisson sampling.

```auto
    usePoissonShadows: true
    minShadowZ: 0
    maxShadowZ: 100
    mapSize: 8192

```

Tweak the min and max values so you don’t cast shadows on an unnecessary big area.  
Start with a bigger mapSize a lower the value if not needed that big.