투명도 페이스 점핑?

Question

나는 Three.js 라이브러리에서 실행되는 WebGL 프로젝트를 작업 해왔다. 저는 여러 개의 반투명 메쉬를 렌더링 중입니다. 각도에 따라 카메라를 기울이면 다른 물체가 맨 위에 표시됩니다.

나는 세 반투명 큐브를 사용하여 빠른 데모를했다, 문제를 설명합니다. 이미지를 화면 수직으로 지나치게 회전하면 가장 작은 큐브의 두 번째 절반이 "점프"하고 더 이상 보이지 않습니다. 그러나 여전히 보이지 않아야합니까? 나는 블렌딩 방정식의 일부를 조정하려고 시도했지만, 차이가 나는 것 같지 않았습니다.

은 내가 궁금하면이가 WebGL을/세 버그, 또는 내가 해결할 수있는 일이 있는지 여부입니다. 어떤 통찰력이 많이 주시면 감사하겠습니다 :)

Answer 1

글쎄, 그건 그들이이 모든 하드웨어 가속 그래픽 비즈니스를 발명 할 때 해결할 수 없었다 뭔가 우리가 오랜 동안이 처리 할 것 같은데.

여기서 문제는 그래픽 카드가 폴리곤이나 객체를 정렬하지 않는다는 것입니다. 그래픽 카드는 "벙어리"이며, 객체를 그리라고 지시하면 픽셀을 나타내는 픽셀이 그려지며 zbuffer (또는 심도 버퍼)라고하는 다른 보이지 않는 "이미지"에서 객체를 나타내는 픽셀이 그려집니다 그러나 색상 대신 각 픽셀에 대해 카메라까지의 거리를 그립니다. 이후에 그리는 다른 모든 객체는 그래픽 카드가 각 픽셀에 대한 카메라까지의 거리를 확인하고, 멀리있는 경우 검사를 비활성화하지 않는 한 그리지 않습니다.

이렇게하면 작업 속도가 빨라지고 솔리드 오브젝트간에 멋진 교차점이 생깁니다. 그러나 투명성과 잘 어울리지 않습니다. 2 개의 투명한 오브젝트가 있고 A가 B 뒤에 그려지기를 원한다고 가정 해보십시오. 먼저 그래픽 카드에 A를 그리고 B를 그릴 것을 지시해야합니다. 교차하지 않는 한 정상적으로 작동합니다. 교차하는 2 개의 투명한 오브젝트를 드로잉하려면 그래픽이 모든 다각형을 정렬해야하며, 그래픽 카드가 그렇게하지 않으면 그 작업을 수행해야합니다.

귀하가 이해하고 특별히 조정해야 할 사항 중 하나입니다. 당신이 material.transparent = true을 설정하면이 앞에 있습니다 (이전) 다른 개체 전에 그려 있도록 three.js를에서

, 우리는 그 객체를 정렬 할 수 있습니다. 그러나 당신이 그들을 교차시키고 자한다면 우리는 정말로 당신을 도울 수 없습니다.