Shadow map size

Questions
1

Im somewhat new to Babylon JS but I created a scene and filled it with some cubes, added a light and a shadow map using:

new BABYLON.ShadowGenerator(4096, light);

Im getting really aliased shadow edges. I would like to know how I can get the aliasing to be smaller without bumping up the shadow map size.

Screenshot_8
Screenshot_8.jpg1755Ă—1102 369 KB

Its already at 4096 which is already fairly large. Am I missing something? Thanks!

2

Hi @tkmoney

Welcome to the forum :slight_smile:

You can use shadowmap blur like in this PG
https://www.babylonjs-playground.com/#IIZ9UU
In particular these lines:

    shadowGenerator.useBlurExponentialShadowMap = true;
    shadowGenerator.useKernelBlur = true;
    shadowGenerator.blurKernel = 64;
4 Likes
3

Hey @Cedric,
Thx :slight_smile:

I think I’ve discovered what the issue is but Im not sure what to do about it. It seems that the more objects you add to the to the shadow caster with “addShadowCaster”, the more jagged the shadows become. I created a playground here: Babylon.js Playground

It seems like you really dont need that many to start getting jaggies. Is there anything that can be done? Thanks!

4

https://playground.babylonjs.com/#ZSB485#1
Added animation to the light, moved some spheres upwards.
With
shadowGenerator.useBlurExponentialShadowMap = true; shadowGenerator.useKernelBlur = true; shadowGenerator.blurKernel = 64;
results are much better.

5

Hey @labris,

Why is it that the meshes close to the ground dont cast a shadow? Also btw, it seems that the range of distance that the meshes are spread out seems to matter as far as shadow quality. Go to this playground and adjust the “distance_range” var to 10.

https://playground.babylonjs.com/#ZSB485#3

Thanks!

6

A shadow map must englobe every mesh set as parameter. If the meshes are spread across a large surface, the shadow map texels will have less density.
A possibility is to add/remove meshes based on distance to the camera.

1 Like
7

Hey @Cedric,

Thanks, that makes sense :slight_smile:. I think setting useBlurExponentialShadowMap should work good enough for my purpose. Although I have a question that is somewhat adjacent. When using “useBlurExponentialShadowMap”, it seems that when a mesh is half under the ground, a shadow is being drawn for that portion of the mesh below the ground. here is a playground: https://playground.babylonjs.com/#ZSB485#5

Is there a way to account for this other than just not doing that? Thanks!

8

I tried to play with light.shadowMinZ and light.shadowMaxZ without success
Maybe @sebavan has some idea ?

9

Ha! I found something! use shadowGenerator.useContactHardeningShadow = true;

But it’s webgl2 only

https://doc.babylonjs.com/babylon101/shadows#contact-hardening-shadow-webgl2-only

10

Aw, dang. It gets rid of the extra shadow but I loose the blur. Also I need to support webgl1. Thanks!