Directional Light - blocky shadows with distance

Questions
1

I am using a directional light - the idea is to get sharp shadows for an outside scene.

This example demonstrates the idea nicely.

https://playground.babylonjs.com/#4G38H4#153

My outside world is rather big and as I walk away from the light, the shadows become more and more blocky.

You can recreate the effect by changing this code in the above example (thus moving the light, not the camera):

Change it from

light.position = new BABYLON.Vector3(0, 150, -30);

To this

light.position = new BABYLON.Vector3(0, 1500, -30);

You should now see a much less impressive shadow.

I tried a few things (moving and parenting the light); but could not resolve the issue.

Is there something obvious I am missing?

2

Hi Willem,

I don’t think you miss anything. It is probably losing of precision when the light is far away. Is it ok if you use more than one light? A hemisphericLight for the entire world, and your directional light always follow your model for the shadow cast. You may need to adjust the intensity property of the lights to get it right.

2 Likes
4

Hi slin,

You are correct, it seems that you have to move the light with the caster. Thanks for your help.

My problem was that I had another caster in the scene - so moving away from the other caster caused an increase in the area the shadow map had to cover.

I created this scene for interest to show what I mean.

https://playground.babylonjs.com/#RNT8I6#11

For now I simply removed the other caster. If you need multiple casters; seems that other strategies would be needed.

5

Hi Willem,

Sorry. When I saw your follow up question my family was waiting for me to go out. My understanding of your question is if you have more than one model in the scene, it is not right to let the sunlight to follow one of the models in the scene.

I am not sure if this approach works for you: can you try to keep you sunlight at the position of the camera. So the shadows close to the models are always smooth. As you model walk further away from camera or for models that are far away from the camera, the detail doesn’t matter that much. Please see the following PG:

https://playground.babylonjs.com/#RNT8I6#17

1 Like
6

To have better shadows with a directional light that simulates the sun, you can use the cascaded shadow map technic: Cascaded Shadow Maps | Babylon.js Documentation

Note however that it taxes more on performance.

2 Likes
7

It also seem to help if you increase the resolution of the shadow texture size.

var shadowGenerator = new BABYLON.ShadowGenerator(4096, light);

https://playground.babylonjs.com/#4G38H4#156

I also made a PG to compare the performance of CascadedShadowGenerator and ShadowGenerator.
https://playground.babylonjs.com/#IIZ9UU#75

You can switch between

// var shadowGenerator = new BABYLON.CascadedShadowGenerator(1024, light);
// shadowGenerator.splitFrustum();

and

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

For a large number of meshes, ShadowGenerator is doing much better. But if you increase the resolution of ShadowGenerator to 4096. FPS is similar to CascadedShadowGenerator. But CascadedShadowGenerator renders much smoother shadows. So increase resolution of the shadow texture probably doesn’t make sense.

1 Like
8

For a fair comparison, you should enable PCF filtering + high quality on the standard shadow generator because it’s the default setup when using a cascaded shadow generator. You should also set a texture size of 2048, as by default CSM uses 4 textures the size you pass in parameter: 4x1024x1024 = 2048x2048.

By doing so, you will see that the standard shadow generator is actually not worst than CSM, if not better:

standard: https://playground.babylonjs.com/#IIZ9UU#76
CSM: https://playground.babylonjs.com/#IIZ9UU#77

That’s because the scene is too small, CSM should be used when the scene has big extents as in this scene:

standard: https://playground.babylonjs.com/#RNT8I6#19
CSM: https://playground.babylonjs.com/#RNT8I6#18

The shadows are clearly more blocky in the first case.

2 Likes
9

The Cascaded shadow maps is exactly what I needed. Thank you everyone

1 Like