z-index, renderDepth 또는 threejs의 깊이 정렬

Question

텍스처와 스프라이트로 일부 평면을 ​​렌더링하려고합니다. 모든 것이 투명한 PNG 텍스처를 가지고 있습니다.

개체가 겹쳐지면 투명도가 잘못 작동합니다. 내 문제의 스크린 샷을 만들려고했습니다.

또한 인터넷 검색을 시도하고 renderDepth 및 다른 이상한 것들로 재생했지만 아무 도움도받지 못했습니다 ...!

http://postimg.org/image/om69rdbxb/

Answer 1

내 문제가 해결)

그것은 비록 이상한 약간의 ... 나는 스프라이트를 사용하려고 모든 첫째. 나는 첫 번째 그림에있는 문제를 겪는다. 그런 다음 모든 스프라이트를 카메라가 회전 할 때마다 플레이어 각도로 회전 한 평면으로 변환했습니다 (카메라 위치는 4 개 뿐이므로 큰 문제는 아닙니다).

모든 것이 좋았지 만, 때로는 많은 항목이 한 곳에있을 때 서로 겹쳐서 ... 나는 다시 Google을 시작했습니다. "alphaTest : 0.5"와 함께 발견 된 솔루션. 그것은 효과가있다! 남아있는 유일한 "것"... 이것은 스프라이트가 아니므로 아이콘이 변형되었습니다.

15 분 전 비행기를 다시 Sprite로 바꾸고 작동하는지 확인하려고했습니다. 그리고 .... 작동 중!)

내가 처음부터해야만하는 것은 "alphaTest : 0.5"입니다.

http://postimg.org/image/o0h9plz9b/

Answer 2

객체 투명도가 잘못 작동 때로는 겹치는 경우. 내 문제의 스크린 샷을 만들려고했습니다.

예. 그렇다니까. 깊이/반투명 형상이 포함되면 깊이 테스트가 실패합니다 (비참하게). 멀리 떨어져있는 객체를 정렬하고 그 순서대로 그려야합니다. 그렇지 않으면 래스터 라이저에서 아직 해결되지 않은 문제 인 "주문 독립 투명성"이 필요합니다. 그래도 약간의 진전이있었습니다.