Lost in the shadows ☀️🌗🌚

Questions
,
1

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
Screenshot 2023-06-19 at 16.28.281482×868 353 KB

Here you can try it out

This is the conf I’m using for the generator

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 documentation, but to no avail.

2

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

1 Like
3

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

4

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.

    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.

1 Like