Shadow quality issue on local

Hello everyone,

I am using Babylon.js v5.0.0-alpha.2 - WebGL2 on my local. On my scene i have PointLight, Ground and Box. When i try to create shadow, quality is low. But same code on Playground gives high quality result. I am confused, which setting i should check?

Local:

PG https://playground.babylonjs.com/#P8I5ML:

Do you have any errors with local version in the console?

Also you are not using the same setup :slight_smile: we can see it from the shadow position, try repro in the pg with the same scene setup

1 Like

There is no errors on the console:

I am using it with Angular, you can see the my local code below:

Here is PG, now i have same issue on there too, i couldn’t see whats wrong with my code :frowning:

https://playground.babylonjs.com/#9WCPZN#2

Now i see the difference, when you increase the y value of the PointLight position, quality of the shadow decreasing. So when the light source is far away quality decreasing i think, what causes this?

Another example, i add the range for the light which is far away from the object. Shadow quality still low, i think i am missing something about how ShadowGenerator.

https://playground.babylonjs.com/#9WCPZN#3

If the light is far from the objects it lights, the quality is lowered because the shadow map must handle more 3D space than when it is near the objects.

Here’s the shadow map with your settings for the Y negative direction:
image

Same thing but moving the position of the light nearer the cube:
image

You can see the cube is using more space in the shadow map, so the shadows will be better:

Note that for point lights blur exponential shadow is downgraded to exponential shadow because generating shadows for point lights is expensive. If possible, try to use a directional light instead.

Here’s a doc that can help deal with shadows in general: Shadows | Babylon.js Documentation

2 Likes