HTML5 Three.js r81 shadows lose alpha map during camera rotation

Question

Working with Three.JS r81 I'm having an issue with shadows being cast through transparent materials with a custom depth shader. When I have just a tree in my scene, the shadows look great. The second I add in a simple box approximately 100 units to the right, the shadows lose all of the transparency from the transparent material they are cast from. Turning off shadows on the box has zero effect.

Here's how the shadows should look

Here's what happens when I add a box

Interestingly, if I move the box closer to the tree, the shadows seem to correct themselves. Also, I am using an orbital camera, and rotating around the scene makes the shadows shift back and forth from good to bad as you rotate around the tree.

My light is set up pretty 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've messed with pretty much every value in the light shadow settings and nothing is having a positive effect.

I know the shadow system in Three.js has changed a bit over the past year, but wasn't sure if it was me or a possible bug in the library. Any ideas?

DeadTaco DeadTaco · Accepted Answer · 2016-09-30T20:18:08

It looks like this was all due to a dumb mistake on my part. My shader material uniforms were using mesh.material instead of mesh.material.map. After changing it, it works just fine.

var uniforms = { texture: { type: "t", value: mesh.material.map } }

shaderLibrary[libraryName] = new THREE.ShaderMaterial({
                            uniforms: uniforms,
                            vertexShader: vertexShader,
                            fragmentShader: fragmentShader,
                        });

HTML5 Three.js r81 shadows lose alpha map during camera rotation

1 Answers