Тени HTML5 Three.js r81 теряют альфа-карту при повороте камеры

Question

Работа с Three.JS r81 У меня проблема с отбрасыванием теней через прозрачные материалы с помощью специального шейдера глубины. Когда в моей сцене только дерево, тени выглядят великолепно. Когда я добавляю в простую рамку примерно на 100 единиц справа, тени теряют всю прозрачность от прозрачного материала, из которого они отлиты. Отключение теней на поле имеет нулевой эффект.

Вот как должны выглядеть тени

Вот что происходит, когда я добавляю коробку

Интересно, что если я переместу коробку ближе к дереву, тени, кажется, исправятся. Кроме того, я использую орбитальную камеру, и вращение вокруг сцены заставляет тени перемещаться взад-вперед от хорошего к плохому, когда вы вращаетесь вокруг дерева.

Мой свет настроен довольно просто:

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);

Я испортил почти все значения в настройках светлых теней, и ничего не дает положительного эффекта.

Я знаю, что система теней в Three.js немного изменилась за последний год, но я не был уверен, что это я или возможная ошибка в библиотеке. Есть идеи?

Answer 1

Похоже, это все из-за глупой ошибки с моей стороны. Моя форма шейдерного материала использовала mesh.material вместо mesh.material.map. После изменения все работает просто отлично.

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

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