Three.js shadows - come migliorare?

Question

Ho giocato con three.js qui - 2toria.com/pool

Il problema che sto avendo sta cercando di far apparire meglio le mie ombre. Al momento, sembrano in questo modo: -

Un po 'pixellato. C'è un modo per farli apparire più liscia, come qui: -

Ho provato un paio di cose, ma non riesco a trovare le giuste regolazioni. Il mio renderer è impostato in questo modo: -

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

ho pensato shadowMapSoft l'avrebbe fatto, ma no. Qualche idea/aiuto?

Answer 1

In effetti, ho avuto lo stesso problema. La mia soluzione era aumentare le mie sorgenti di luce shadowMapWidth e Height. Nel mio caso si trattava di un riflettore:

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; 

Ah un'altra cosa, se si aumenta la dimensione della mappa per la potenza di due si liscia fuori dell'ombra sempre di più, ma si vedrà un calo di prestazioni con geometria complessa. Quindi prova 2048, forse 4096 vedi come funzionano per te.

Ho notato che hai renderer.shadowMapType. Devo indagare su questo, potrebbe rendere i miei progetti molto meglio, grazie :)