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