Have you ever been working on a 3D scene using Three.js and noticed the dreaded shadow stripes? Don't worry – shadow acne is a relatively common problem in 3D graphics, but luckily there are ways to fix it. In this tutorial, we'll explore what causes shadow acne and how to solve it for smoother results with your geometry.
What is the shadow acne?
You may have noticed the ugly shadow stripes on the model's surface in Three.js.
The scene looks unattractive despite the high resolution setting for the shadow map and using soft shadows configured with THREE.PCFSoftShadowMap.
Issue is hard to debug. Only certain angles of the sun's rays generate jagged shadows.
This problem may appear as in the screenshots below:
Fix ugly shadows in Three.js
The solution is simple, configure the normal bias parameter for shadow casting lights.
Usually only the sun is the source of issue because of its distance and low angles.
Add normalBias parameter and set it to value larger than default 0.0:
sunLight.shadow.normalBias = 0.2;
Shadows are correct now:
Play around with value to find the sweet spot that best suits your scene. Remember to keep the bias below 0.5, otherwise the shadows may appear distorted.
If you want to learn more why shadow acne occurs and the mathematics behind it, check out the following thread in Godot engine repository. Three.js documentation about the normal bias setting: click here.