Three.js Schatten - wie verbessert man?

Question

Ich habe hier mit three.js gespielt - 2toria.com/pool

Das Problem, das ich habe, versucht, meine Schatten besser aussehen zu lassen. Im Moment sehen sie wie folgt aus: -

Ein bisschen gepixelten. Gibt es eine Möglichkeit, ich kann sie glatter, wie hier aussehen: -

ich ein paar Dinge ausprobiert habe, aber ich kann die richtigen Einstellungen nicht finden. Mein Renderer ist wie folgt aufgebaut: -

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

Ich dachte shadowMapSoft es getan hätte, aber nein. Irgendwelche Ideen/Hilfe?

Answer 1

Tatsächlich hatte ich das gleiche Problem. Meine Lösung war, meine Lichtquellen shadowMapWidth und Height zu erhöhen. In meinem Fall war es ein Schlaglicht:

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 eine weitere Sache, wenn Sie die Karte Größe von Macht des zweier Sie desto mehr Schatten glätten erhöhen und mehr, aber Sie werden eine Performance-Einbußen mit komplexer Geometrie sehen. Also versuche 2048, vielleicht 4096, wie sie für dich arbeiten.

Ich bemerkte, Sie haben renderer.shadowMapType. Ich werde mich darum kümmern müssen, kann meine eigenen Projekte so viel besser machen, danke :)