Three.js shadows - how to improve?

Question

I've been playing with three.js here - 2toria.com/pool

The issue I'm having is trying to get my shadows to look better. At the moment, they look like this:-

A bit pixellated. Is there a way I can make them look smoother, like here:-

I've tried a few things, but I can't find the right settings. My renderer is set up like this:-

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

I thought shadowMapSoft would have done it, but no. Any ideas/help?

Answer 1

Indeed, I've had the same problem. My fix was to increase my light sources shadowMapWidth and Height. In my case it was a 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;

Oh one more thing, if you increase the map size by power's of two you smooth out the shadow's more and more, but you will see a performance hit with complex geometry. So try 2048, maybe 4096 see how they work for ya.

I noticed you have renderer.shadowMapType. I'm gonna have to look into that, may make my own projects that much better, thanks :)