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, но это скажется на производительности, особенно на мобильных устройствах.