Three.js 阴影痘痘的原因及解决方法

Question

为了让所有阴影都渲染出来，我将

shadow.camera.top

/

bottom

/

left

/

right

设置为定向光（投射阴影），但它会导致阴影痤疮。 我尝试使用

shadow.bias

但仍然不正确。阴影痤疮的原因是什么以及如何解决？

这是我的代码。

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 );

谢谢！！

Answer 1

将

shadow.bias

设置为

- 0.0005

似乎可以消除阴影伪影。然而，阴影的质量仍然不好，因为阴影的边缘看起来很块状。

考虑将属性

renderer.shadowMap.type

设置为

THREE.PCFSoftShadowMap

这将显着改善阴影质量。减小阴影相机视锥体的尺寸并仅在某个“焦点”区域投射阴影也可能是个好主意。另一种选择是将高质量光照烘焙到光照贴图中，然后将其应用到城市材质的

lightMap

属性。您也可以将阴影贴图的分辨率增加到

4096 x 4096

，但这会对性能产生影响，尤其是在移动设备上。

Answer 2

设置shadow.bias= -0.01 对我有帮助，但我也降低了强度，阴影看起来不错。