Bóng tối Three.js - cách cải thiện?

Question

Tôi đã chơi với ba.js ở đây - 2toria.com/pool

Vấn đề tôi đang gặp đang cố gắng làm cho bóng của tôi trông đẹp hơn. Tại thời điểm này, họ trông như thế này: -

Một chút pixellated. Có cách nào tôi có thể làm cho họ trông mượt mà hơn, như ở đây: -

Tôi đã thử một vài điều, nhưng tôi không thể tìm thấy các thiết lập đúng. Trình kết xuất của tôi được thiết lập như sau: -

renderer.shadowMapEnabled = true; 
renderer.shadowMapSoft = true; 
renderer.shadowMapType = THREE.PCFShadowMap; 

Tôi nghĩ shadowMapSoft sẽ làm điều đó, nhưng không. Bất kỳ ý tưởng/giúp đỡ?

Answer 1

Thật vậy, tôi đã có cùng một vấn đề. Sửa lỗi của tôi là tăng nguồn ánh sáng của tôi shadowMapWidth và Height. Trong trường hợp của tôi đó là một ánh đèn sân khấu:

spotLight = new THREE.SpotLight(0xAAAAAA); 
spotLight.castShadow = true; 
spotLight.shadowCameraFov = VIEW_ANGLE; 
spotLight.shadowBias = 0.0001; 
spotLight.shadowDarkness = 0.2; 
spotLight.shadowMapWidth = 2048; 
spotLight.shadowMapHeight = 2048; 

Oh một điều nữa, nếu bạn tăng kích thước bản đồ bằng điện của hai bạn mịn ra của bóng ngày càng nhiều, nhưng bạn sẽ thấy hiệu suất một hit với hình học phức tạp. Vì vậy, hãy thử 2048, có thể 4096 xem cách họ làm việc cho ya.

Tôi nhận thấy bạn có renderer.shadowMapType. Tôi sẽ phải xem xét điều đó, có thể làm cho dự án của riêng tôi tốt hơn nhiều, cảm ơn :)