Shadows not smooth (somewhat pixelated)

Questions
1

I am creating a prototype scene requiring shadows to be cast and received by most of my objects. Unfortunately, I cannot get the shadows to look smooth. They look somewhat pixelated at the edges. I created a playground showing my problem. Thanks!

2

Hello this is because you are using a point light to cast shadows.
I would recommend to switch to a directional light. Here is the doc you may want to read:
https://doc.babylonjs.com/babylon101/shadows

3

Exactly what I needed. Thanks for the help!

1 Like
4

hi there.
i’ve got a similar issue, but using a directional light. shadow looks good until the wall (shown in screenshot) gets broken apart. then each shadow becomes very pixelated. is it because there are too many objects on screen (100)?

g.light2 = new BABYLON.DirectionalLight(“dirLight”, new BABYLON.Vector3(.725, -10, 0.3), g.scene);
g.light2.intensity = .6;
g.light2.direction.y=-0.5;
g.light2.position.x=-6;
g.ground1.receiveShadows = true;
var shadowGenerator00 = new BABYLON.ShadowGenerator(1024, g.light2);
shadowGenerator00.usePoissonSampling = true;
shadowGenerator00.getShadowMap().renderList.push(g.hitter);
g.bricks.forEach(brick => {
shadowGenerator00.getShadowMap().renderList.push(brick);
});

Looks good here:

24%20PM
Screen Shot 2019-08-14 at 2.23.24 PM.jpg1794Ă—1112 174 KB

And then when wall breaks apart (and bricks get scattered further out on the ground) looks bad. Actually, the shadows flicker and then eventually disappear.

41%20PM
Screen Shot 2019-08-14 at 2.23.41 PM.jpg1772Ă—1458 139 KB

5

This is because the light automatically change its position to capture the entire scene. So if some objects are pretty far it will force the light to move away a lot and thus reduce the precision of the shadow map

Two options then:

  • ask the light to not automatically adapt: light.autoUpdateExtends = false
  • Manage the position of your light manually by setting light.position to a meaningful place
1 Like