TIMINeutron TIMINeutron - 5 months ago 15
Javascript Question

Artifacts in shadows, using standard MeshPhongMaterial

I'm having an issue regarding shadows.
Here is an image of the problem I'm facing:

An image is waaay better than a thousand words

enter image description here

I can't understand why there are those lines there, it's supposed to be completely lit! I don't get why the actual shadows appear to be really smooth, and the borders are good enough for what I'm trying to do, but then I have those lines all over the place.

My light configuration:

var dirLight = new THREE.DirectionalLight(0xfeffaf, 1);
dirLight.position.set(dimensions.middlePoint.x,
dimensions.middlePoint.y + ( dimensions.lengthY / 2),
dimensions.middlePoint.z + dimensions.lengthZ);
dirLight.target.position.set(
dimensions.middlePoint.x,
dimensions.middlePoint.y,
dimensions.minZ);
dirLight.castShadow = true;
dirLight.shadowDarkness = 0.4;
dirLight.shadowMapWidth = 1024;
dirLight.shadowMapHeight = 1024;
dirLight.shadowCameraNear = 1;
dirLight.shadowCameraFar = dimensions.lengthY * 2;
dirLight.shadowCameraLeft = - dimensions.lengthX / 2;
dirLight.shadowCameraRight = dimensions.lengthX / 2;
dirLight.shadowCameraTop = dimensions.lengthY / 2;
dirLight.shadowCameraBottom = -dimensions.lengthY / 2;
dirLight.shadowBias = 0.0000005;
scene.add(dirLight);


And then there's my render config:

threeRender = new THREE.WebGLRenderer({ antialias: true });
threeRender.shadowMap.enabled = true;
threeRender.shadowMap.renderReverseSided = false;
threeRender.shadowMapSoft = true;
threeRender.shadowMapType = THREE.PCFSoftShadowMap;


Please let me know how can I fix this, aswell as pointing me in the right direction towards fixing it. Thank you very much.

Answer

Increase the value of your shadowBias. The artifact is known as shadow acne:

enter image description here

See this link for more details.