Когда у вас есть две плоскости в Three.js/WebGL, и одна или обе они прозрачны, иногда плоскость позади будет скрыта на прозрачной плоскости выше. Почему это?Three.js/WebGL - прозрачные плоскости, скрывающие другие плоскости позади них
Это не ошибка, это то, как работает OpenGL (и, следовательно, WebGL). Прозрачные поверхности плохо воспроизводятся с z-буфером и поэтому должны быть вручную отсортированы и отображены в обратном порядке. Три JS пытаются сделать это за вас (поэтому проблема уходит, когда вы устанавливаете значение X> 0), но не можете надежно обрабатывать случай пересекающейся геометрии, как вы показываете.
Я объяснил проблему более подробно в different SO question, поэтому вы можете обратиться к ней.
Попробуйте добавить alphaTest: 0.5 к материалу.
Пробовал, что не работал:/Я думаю, что это проблема webgl, поэтому мне нужно перепроектировать, как в моей игре отображаются самолеты. Хотя это будет немного взломанным. – MaiaVictor
У меня есть плоскость с текстурой на холсте, отображаемой на ней, отображающей текст. При определенных углах/позициях у меня возникали проблемы с прозрачностью материала текстуры, и это фиксировало его, поэтому спасибо! – plyawn
Примечание: 'alphaTest' - это перехват, который сделает полупрозрачные области в текстурах либо полностью непрозрачными (когда непрозрачность пикселей), либо полностью прозрачна (при непрозрачности пикселей
fwiw, если у вас много параллельных плоскостей (вы не можете увидеть ваш образец, Google не может разрешить ваш домен), их легко сортировать по перпендикулярной оси. Для списка плоскостей [A B C D] порядок для рисования будет либо [A B C D], либо [D C B A], и больше ничего! Таким образом, не требуется удар производительности при сортировке. Просто держите их в порядке, когда идете.
проблема в том, что у меня есть несколько самолетов, которые должны быть переданы другим. Как если бы они были 3d плоскими мечами. Могу я спросить, как вы нашли этот вопрос так долго после того, как его спросили, и как сюда пришли 4 спасателя? – MaiaVictor
Ваши вопросы приспосабливаются к поведению людей Я не могу ответить :) Однако, если у вас есть многоугольники, которые пересекают друг друга, нет простого правильного решения, отличного от фрагментарных фрагментов, таких как K-Buffers или оригинальный алгоритм A-Buffer, если вы специально не контролируете пересечения треугольников и тесселировать их на лету. – bjorke
Предположим, что вы используете прозрачное изображение * .png. Тогда это помогло бы:
new THREE.MeshBasicMaterial({ side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
По какой-то причине часть 'side: THREE.BackSide' остановила мои изображения от рендеринга все вместе. Но, кроме этого, все остальное отлично поработало! –
Возможно, вы захотите использовать THREE.DoubleSide, чтобы он был видимым с обеих сторон. – Blaise
Это действительно работает очень хорошо! – polyclick
Установка depthWrite свойства false решить мою проблему.
new THREE.MeshBasicMaterial({
opacity: 0.25,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false
});
СПАСИБО. Больше нет «прозрачной проблемы с черным ящиком»! – Andy
Благодарим за ответ, но так вы говорите мне, что лучше просто перепроектировать мою игру или это решение, подходящее для взлома Three.JS? – MaiaVictor
@ Тоджи, на который вы ссылаетесь, не касается точно такой же проблемы. В другом вопросе это только часть объекта/текстуры, которая прозрачна, где в этом вопросе вся плоскость прозрачна, и это легко разрешимо, просто деактивируя «depthWrit» полностью для прозрачной плоскости. – Wilt