问题描述
为了让所有的阴影都被渲染出来，我设置了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 是什么导致了阴影痤疮以及如何修复它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！