Three.js 是什么导致了阴影痤疮以及如何修复它 [英] Three.js what causes shadow acne and how to fix it

问题描述

为了让所有的阴影都被渲染出来，我设置了shadow.camera.top/bottom/left/right 到定向光(投射阴影)，但它会导致阴影粉刺.我尝试使用 shadow.bias 但仍然不对.什么原因导致阴影痤疮以及如何解决它?

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?

这是我的代码.

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

谢谢！！

推荐答案

将 shadow.bias 设置为 - 0.0005 似乎可以消除阴影伪影.但是，由于阴影的边缘看起来非常块状，因此阴影的质量仍然不佳.

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.

考虑将属性renderer.shadowMap.type 设置为THREE.PCFSoftShadowMap，这将显着提高阴影质量.减小阴影相机的截锥体的大小并仅在某个焦点"区域投射阴影也可能是一个好主意.另一种选择是将高质量的光照烘焙到光照贴图中，然后将其应用于城市材质的 lightMap 属性.您也可以将阴影贴图的分辨率提高到 4096 x 4096，但这会对性能产生影响，尤其是在移动设备上.

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.

这篇关于Three.js 是什么导致了阴影痤疮以及如何修复它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！