three.js에서 서로 간섭하는 투명 텍스처

Question

나는 간단한 인간 형상을 만들었습니다. 속눈썹은 투명도가있는 텍스처를 사용합니다. 그러나 얼굴 텍스처의 투명도를 설정하면 안되는 곳에 투명도가 만들어집니다. 눈썹 아래에있는 부분의 얼굴 텍스처를 들여다 볼 수 있습니다.

내가 투명성를 원하는

mesh.material.materials[3].transparent = false 
mesh.material.materials[3].transparent = true 

가 어떻게이 문제를 해결할 수있는 얼굴 텍스처에 대해 설정, 그래서 :

이 라인 얼굴의 투명성을 전환하여 효과를 볼?

데모 : http://dev.udart.dk/transparencyProblemStackOverflow/ (모델이로드 될 때까지 기다립니다)

코드 : https://github.com/vibber/transparencyProblemStackOverflow/blob/gh-pages/index.html

Answer 1

투명 형상, 수동 깊이 분류 얻는다 자세한 내용은 도지하여이 정식 답변을 참조하십시오 Transparent textures behaviour in WebGL를.

이 시나리오가 제대로 작동하려면 모델을 분리하고 속눈썹을 별도의 (서브) 메쉬로 렌더링해야합니다. 이렇게하면 three.js는 일반적인 Z 버퍼 접근법을 사용하여 나머지 얼굴을 렌더링 한 다음 속눈썹을 별도로 적용 할 수 있습니다 (깊이 정렬 된 transaprent 객체 대기열에서).