Cienie Three.js - jak poprawić?

Question

Gram tutaj z plikiem three.js - 2toria.com/pool

Problem, który mam, stara się, aby moje cienie wyglądały lepiej. W tej chwili wyglądają tak: -

Trochę pixellated. Czy istnieje sposób mogę uczynić je wyglądać gładsza, jak tutaj: -

Próbowałem kilka rzeczy, ale nie mogę znaleźć odpowiednich ustawień. Mój renderer jest skonfigurowany w ten sposób: -

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

Myślałem, że shadowMapSoft by to zrobił, ale nie. Wszelkie pomysły/pomoc?

Answer 1

Rzeczywiście, miałem ten sam problem. Moją poprawą było zwiększenie moich źródeł światła shadowMapWidth i Height. W moim przypadku było to Spotlight:

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; 

Aha jeszcze jedno, jeśli można zwiększyć rozmiar mapy siłą na dwóch ty wygładzić cień na coraz więcej, ale widać spadek wydajności o złożonej geometrii. Więc spróbuj 2048, może 4096 zobacz, jak one działają dla ciebie.

Zauważyłem, że masz renderer.shadowMapType. Będę musiał to sprawdzić, dzięki czemu moje własne projekty będą o wiele lepsze, dzięki :)