Three.js/WebGL - прозрачные плоскости, скрывающие за собой другие плоскости

Когда у вас есть две плоскости в Three.js/WebGL, и один или оба из них прозрачны, иногда плоскость позади будет скрыта прозрачной плоскостью выше. Почему это?

Ответ 1

Это не ошибка, это просто то, как работает OpenGL (и, следовательно, WebGL). Прозрачные поверхности плохо воспроизводятся с z-буфером и поэтому должны быть вручную отсортированы и отображены в обратном порядке. Три JS пытаются сделать это за вас (поэтому проблема уходит, когда вы устанавливаете значение X > 0), но не можете надежно обрабатывать случай пересекающейся геометрии, как вы показываете.

Я объяснил эту проблему более подробно в другом вопросе SO, поэтому вы можете ссылаться на нее.

Ответ 2

Скажем, что вы используете прозрачный *.png образ. Тогда это поможет:

new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });

Ответ 3

Попробуйте добавить alphaTest: 0.5 к материалу.

Ответ 4

Установка свойства depthWrite в false решила мою проблему.

new THREE.MeshBasicMaterial({ 
    opacity: 0.25, 
    transparent: true, 
    side: THREE.DoubleSide, 
    depthWrite: false
});

Ответ 5

fwiw, если у вас много параллельных плоскостей (вы не можете увидеть свой образец, Google не может разрешить ваш домен), легко их сортировать по перпендикулярной оси. Для списка плоскостей [A B C D] порядок для рисования будет либо [A B C D], либо [D C B A], и больше ничего! Таким образом, не требуется удар производительности при сортировке. Просто держите их в порядке, когда идете.