2017-02-23 2 views
0

나는 일반적인 투명성 분류 문제로 고심하고있다. 주변에는 수동으로 객체를 정렬하거나 순서 독립적 인 투명성과 같은 방법이 있지만 모든 것이 상당히 까다로워 질 수 있다는 것을 알고 있습니다. 부분적으로 불투명하고 부분적으로 100 % 투명하고 올바르게 교차하는 객체를 갖는 방법이 있다면 나는 괜찮을 것이다.three.js를 사용하여 색인화 된 투명성과 같은 것을 얻을 수 있습니까?

이론적으로 이것이 가능해야합니다. 불투명 한 픽셀은 표준 방식으로 색상 버퍼와 z 버퍼에 렌더링되고 투명한 픽셀은 방치됩니다.

내가 찾고있는 것은 gif 파일과 함께 사용 된 것처럼 색인이 붙은 투명도와 비슷합니다. 예를 들어 색상이 # FF00FF 인 모든 객체의 픽셀이 렌더링되지 않습니다.

three.js를 사용하여 이것이 가능할 수 있는지, 어떻게 될지 모르겠습니다. 또한 커스텀 셰이더와 함께 사용할 수 있기를 원합니다.

편집 : 지금까지 의견을 보내 주셔서 감사 드리며 혼란 스럽습니다. 이것은 내 코드의 특정 문제보다 개념적인 것입니다. 투명 오브젝트의 일부가 앞에 있어야하는 다른 투명 오브젝트의 일부를 잘라내는 문제에 자주 직면한다는 것입니다. 또한 투명한 오브젝트는 올바르게 교차하지 않으며 항상 다른 오브젝트를 덮습니다. 나는 이것이 왜 일어나는가와 그것이 투명성이 다루어지는 방식에 내재 된 문제라는 것을 이해한다. 그러나 종종 나는 부분적으로 빛나는 알파 투명도가 아닌 완전히 투명한 물체의 부분 만 필요로합니다. 특정 픽셀의 픽셀을 남기고 나머지를 보통의 불투명 한 오브젝트처럼 렌더링하는 방법이 있다면 가능할 수 있습니다.

금속 체인이 있고 각 세그먼트가 O 모양 (그리고 나머지는 투명)을 나타내는 텍스처를 가진 PlaneGeometry 일 것이라고 가정합시다. 이제 사슬은 올바른 연결 고리로 표시되어야합니다.

도움을 환영합니다!

건배!

+0

하십시오 [편집 : 사용자 정의 쉐이더를 작성하는 경우

, 당신은 당신의 조각 쉐이더에서 다음과 같은 패턴을 사용하여 동일한 효과를 얻을 수 있습니다 ] 귀하의 질문에 [지금까지 시도한 내용] (http://whathaveyoutried.com)을 보여주십시오. 문제가있는 코드의 [mcve]를 포함시켜야 특정 문제를 해결할 수 있습니다. 또한 [ask]를 읽어야합니다. –

+0

ShaderMaterial : https://threejs.org/docs/?q=shader#Reference/Materials/ShaderMaterial. 이를 효과적으로 사용하려면 코드에서 ShaderLib 및 ShaderChunk를 확인하십시오. Three.js는 이것을 사용하여 내부 쉐이더를 빌드하고 패턴을 확장/향상 시키거나 자체 패턴을 만들 수 있습니다. 더 많은 유연성을 원하면 RawShaderMaterial https://threejs.org/docs/?q=shader#Reference/Materials/RawShaderMaterial을 살펴보십시오. – TheJim01

+0

@Mircode 금속 체인 예제의 경우, 'material.alphaTest = 0.5'를 설정하면 연결 고리가 올바르게 렌더링되어야합니다. – WestLangley

답변

0

세 개의 .js 장면을 렌더링하고 텍스처 맵에 부분 투명 픽셀이없는 경우, 즉 각 픽셀이 100 % 불투명하거나 100 % 투명하면,

material.alphaTest = 0.5; 
//material.transparent = true; // likely not needed 

이진 알파 맵을 사용하는 경우에도 마찬가지입니다.

if (texelColor.a < 0.5) discard; 

three.js를 r.84

관련 문제