Directional Light Shadow not as expected(VSMShadowMap)

Hello, I’m working onadding directional light and its shadows after loading gltf model. Here’s my demo link: http://zhiyuan-learning.tech/demo/. In the scene, there’s always a unexpected shadow mask. Below are some code snippets I used:

this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.autoUpdate = true;
this.renderer.gammaFactor = 2.2;

const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1000, 1000, 1000);
directionalLight.castShadow = true;
directionalLight.shadow.camera = new THREE.OrthographicCamera(
      -200,
      200,
      -200,
      200,
      0.5,
      5000
);
this.scene.add(directionalLight);

this.loader = new GLTFLoader();
this.loader.load("../models/office/scene.gltf", gltf => {
      gltf.scene.traverse((o: any) => {
        if (o.isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;
        }
    })
})

Maybe I missed some key points when setting up directional light?

Did you check your model? https://gltf-viewer.donmccurdy.com/

1 Like

yes, checked. It looks fine when no shadow enabled.

Shadow has a frustum, what you’re seeing is that frustum being too small to cover your entire scene. I suggest reading documentation on directional light.

3 Likes

@Usnul Thanks for your suggestion! I actually make the frustum small intentionally, which let the issue to look more clearly. I have played around the example https://threejs.org/examples/?q=shadow#webgl_shadowmap_viewer, and try to change the shadow frustum small in the example but not see a similar issue. Pls correct me if some of my understanding is wrong.

A CameraHelper for DirectionalLight.shadow.camera might be useful here.

One issue is - your near and far planes are quite far apart, this reduces your depth resolution, and results in inaccurate shading. I suggest you get them closer together.

Another thing is to try VSM shadows.

Lastly, it’s possible you have some weird double-layered geometry and that results in shadow artifacts on the surface.

4 Likes

Another thing is to try VSM shadows.

I tried this one and it solves the problem!

this.renderer.shadowMap.type = THREE.VSMShadowMap;

Thanks so much! Now I’m trying to figure out why…