Directional Light Shadow

Questions
,
1

What do I have to do to make Directional Light shadows large enough and resolution high enough?

Here is my code

    let directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(-100, 100, 50);
    directionalLight.castShadow = true;
    let d = 15
    directionalLight.shadow.camera.left = -d;
    directionalLight.shadow.camera.right = d;
    directionalLight.shadow.camera.top = d;
    directionalLight.shadow.camera.bottom = -d;

    directionalLight.shadow.camera.near = 2;
    directionalLight.shadow.camera.far = 500;

    directionalLight.shadow.mapSize.x = 2048;
    directionalLight.shadow.mapSize.y = 2048;
    
    scene.add(directionalLight);

myimage (28)
myimage (28)1920×1073 185 KB

myimage (29)
myimage (29)1920×1073 217 KB

At present, my method is to increase the value of d and the value of shadow.mapSize, but this method still has great limitations, so is there any other way to implement it?

2

You have to define the dimensions of the shadow frustums manually. Meaning you have to know the dimensions of the scene and then configure the shadow frustum so it encloses all objects.

And yes, the more you increase the size of the frustum, the worse the quality of the shadows. Notice that 2048x2048 is already a comparatively high resolution. I do not recommend to increase it even more for performance reasons.

Sidenote: In three.js a typical way to mitigate performance issues with shadows is to focus dynamic shadowing on the focus area of the player/user. Or you give the experimental implementation of cascade shadows maps a try. However, it’s no part of the core so far.

You can also try to completely avoid shadow mapping and work with ambient occlusion or light maps to implement static shadows. Sometimes you can also fake a shadow by projecting a black faded circle on the bottom of game entities. This simple “hint” provides a great spatial feedback and can be sufficient for simple games.