Three.js / WebGL - прозрачная плоскость перекрывает пересекающиеся с ней элемнеты
В Three.js (WebGL) - можно столкнуться с проблемой, когда прозрачная плоскость перекрывает пересекающиеся с ней элементы. Это происходит из-за того, что прозрачные поверхности не очень хорошо работают с z-буфером.
Данная проблема не является ошибкой, это стандартное поведение OpenGL (и, следовательно, WebGL).
Однако, проблема решается, тем, что у материала значение depthWrite - устанавливается в false.
Таким образом параметром depthWrite в Three.js можно отключить глубину при отрисовке 2d наложений.
Еще один способ решения этой проблему установить alphaTest материала в значение 0.5, либо пробовать изменять это значение.
Данная проблема не является ошибкой, это стандартное поведение OpenGL (и, следовательно, WebGL).
Однако, проблема решается, тем, что у материала значение depthWrite - устанавливается в false.
Таким образом параметром depthWrite в Three.js можно отключить глубину при отрисовке 2d наложений.
Еще один способ решения этой проблему установить alphaTest материала в значение 0.5, либо пробовать изменять это значение.
