CODEWITHSUNDEEP
javascriptthree.js
Jesse Luo
Jesse Luo

Reputation: 137

why shadow becomes blurred in Three.js

In a normal scenario, the shaow look like this

picture-before

But after I modified the parameters ofdirectionalLight.shadow.camera

directionalLight.shadow.camera.left = -50
directionalLight.shadow.camera.right = 50
directionalLight.shadow.camera.top = -50
directionalLight.shadow.camera.bottom = 50

It became like this

picture:after

How to resolve this problem?

https://jsfiddle.net/JesseLuo/z1m6uffu/12/

Upvotes: 3

Views: 1454

Answers (1)

Don McCurdy
Don McCurdy

Reputation: 11960

Shadows are simulated using a "camera" in the location of the light source, and that camera's frustum (or, its field of view) and resolution determine how precisely the shadow matches your object. You can't have perfectly detailed shadows covering large areas, so you need to tune the shadow camera to the part of the scene that's important. In this case, when you change the parameters to expand the camera's frustum, you've spread it over a larger area and lost precision.

To improve the result you can:

A. Increase the shadowMap's resolution. Higher values give better quality shadows at the cost of computation time. Values must be powers of 2.

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

B. Change the shadow type. PCFSoft may look better, but doesn't perform as well.

renderer.shadowMap.type = THREE.PCFSoftShadowMap;

C. Reduce the dimensions of the shadow camera frustum to just the area you need to cover. Use a CameraHelper to see where the shadows are covering, like in this example.

scene.add( new THREE.CameraHelper( light.shadow.camera ) );

See THREE.LightShadow docs for more information.

Upvotes: 4

Related Questions