Three.js what causes shadow acne and how to fix it

Question

In order to let all shadows be rendered, I set shadow.camera.top / bottom / left / right to the directional light (casting shadow), but it causes shadow acne. I try to use shadow.bias but still not right. What causes shadow acne and how to fix it?

Here is my code.

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 38, 82, 1 );
light.castShadow = true;
// light.shadow.bias = -0.001;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
light.shadow.camera.near = 0.1;  // same as the camera
light.shadow.camera.far = 1000;  // same as the camera
light.shadow.camera.top = 120;
light.shadow.camera.bottom = -120;
light.shadow.camera.left = 120;
light.shadow.camera.right = -120;
scene.add( light );

Thanks!!

Jezabel

Can you please demonstrate the issue with a live example? It's strange when tweaking light.shadow.bias does no help. BTW: The shadow camera does not have to use the same near and far values like the actual camera for rendering the scene. I suggest you use THREE.CameraHelper to visualize the shadow camera and make the frustum as tight as possible. You can create the helper like so scene.add( new THREE.CameraHelper( light.shadow.camera ) );. – Set

Here is my complete code. :) – Jezabel

It seems the fiddle does not work since the JSON file is not loaded correctly from your backend (I can see in the network tab just the status "Pending"). Can you please share the JSON file here? I can then make a local test. – Set

Answer 1

Setting shadow.bias to - 0.0005 seems to remove the shadow artifacts. However, the quality of the shadows are still not good since the edges of the shadows look very blocky.

Consider setting the property renderer.shadowMap.type to THREE.PCFSoftShadowMap which will noticeable improve the shadow quality. It might also be a good idea to reduce the size of the shadow camera's frustum and only cast shadow in a certain "focus" area. Another option is to bake a high quality lighting into a light map and then apply it to the lightMap property of the city's material. You can also just increase the resolution of the shadow map to 4096 x 4096 but this will have a performance impact, especially on mobile devices.

Set

I change light1.shadow.camera.left = side; to light1.shadow.camera.left = -side; and light1.shadow.camera.right = -side; to light1.shadow.camera.right = side;. It looks much better. – Jezabel

I think baking by 3DsMax or blender is the best solution. :) – Jezabel

Answer 2

Setting shadow.bias= -0.01 helps me, but I also lower intensity and shadow looks good.

Aragats