While working on my project using Three.JS r81, I encountered a problem with shadows passing through transparent materials when using a custom depth shader. Initially, the shadows appeared fine when there was only a tree in the scene. However, as soon as I added a simple box about 100 units to the right of the tree, the transparency in the shadows from the transparent material disappeared. Disabling shadows on the box did not resolve the issue.
Click here to see how the shadows should appear
Here's what happens when the box is added
An interesting observation is that moving the box closer to the tree seems to fix the shadow transparency issue. Additionally, I am using an orbital camera, and rotating around the scene causes the shadows to alternate between good and bad as you move around the tree.
The setup for my light source is quite basic:
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(120, 120, 120);
directionalLight.castShadow = true;
directionalLight.shadow.camera.right = 250;
directionalLight.shadow.camera.left = -250;
directionalLight.shadow.camera.top = 250;
directionalLight.shadow.camera.bottom = -250;
directionalLight.shadow.camera.far = 300;
directionalLight.target.position.x = 80;
directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.bias = -0.0003;
directionalLight.shadow.camera.scale.x = 0.25;
directionalLight.shadow.camera.scale.y = 0.25;
scene.add(directionalLight);
I have experimented with various settings in the light shadow configurations but none seem to have a positive impact on the issue.
I am aware that the shadow system in Three.js has undergone some changes in the past year. However, I am uncertain whether the problem lies with me or if it could be a potential bug within the library. Any suggestions?