3 개의 js에서 다각형에 여러 텍스처를 클립하는 방법

Question

나는 격자에 각각 텍스처가있는 일련의 평면이 있습니다. 현재 여러면이있는 하나의 평면을 사용할 수 있지만,이 평면을 각각 별도의 텍스처로 렌더링하고 있습니다.

각 색상 질감입니다. 이 형상은 완전히 평면 중 하나 이상 포함 할 수

:

I는이 평면에 평행 한 임의의 형상과 다각형 메쉬를 갖는다.

나는 비행기의 중복 텍스처 다각형 텍스처 싶습니다 :

어떻게 세 JS에서 텍스처의 클리핑을 수행합니까?

다른 WebGL 솔루션에 대해서도 열려 있습니다.

몇 가지 아이디어를 내가했다 :

1. 이 중복되는면과 일치 얼굴에 다각형을 분할합니다. 그런 다음 UV coords를 사용하여이면들을 텍스처링합니다. 나는 이것을 작동시킬 수 있다는 것을 알고 있지만, 너무 복잡해 보인다.
2. 다각형에 여러 텍스처를 적용하고 UV 좌표를 사용하여 그 텍스처를 분산시킵니다. - 세분화없이 이것이 가능한지 확실하지 않은가요?

다른 아이디어? 블렌딩 모드로이 작업을 수행 할 수 있습니까?

Answer 1

몇 가지 아이디어 : texture atlas에

---

구워 작은 텍스처 그래서 당신은 하나 개의 UV 세트 (둘 이상의지도 책이 필요한 경우 하나 개의 WebGL이 프로그램에서 여러 텍스처 샘플러를 사용할 수 있습니다) 단일면에 타일을 가지고있다.

이 uv를 사용하여 모양 정점의 세계 pos 및 샘플 텍스처 지도체에 해당하는 평면의 uv를 계산합니다.이 경우 소재 평면의 modelMatrix (또는 오리엔테이션을 알고있는 경우 축척/옵셋 만 사용하거나 평면이 고정되어 있으면 아무 것도하지 않음)을 전달해야합니다.

작은 타일에는 고해상도 텍스처가 필요하지 않습니다. 또한 아틀라스는 타일을 (정사영 투영법을 사용하여 상단) 으로 렌더링하거나 별도의 샘플러에 텍스처를 전달하여 대체 할 수 있습니다. 마지막 경우 : 어떤 텍스처를 전달할지 결정하기 위해 모양 대 맵 타일의 경계 상자를 테스트 할 수 있습니다.

---

는 텍스처 간단한 재료와 모양을 렌더링하고 비행기를 그리는 곳의 주요 패스 마스크로이 텍스처를 사용합니다.그에 대한 자세한

:

장소 모양 당신은 일반 카메라로 아주 간단한 재료 (사방 흰색 쓰기)과 별도의 용기와 render it to a fixed size texture에 마스크 싶다. 렌더링 패스가 끝나면 검정색과 흰색 모양의 텍스처가 화면에 표시되지만 (정사각형 텍스처로 스케일링 됨) 텍스처에 있어야합니다.

그런 다음 장면의 나머지 부분을 타일로 전달하여 마스크 텍스처를 만듭니다. 프래그먼트 쉐이더에서는 screenPos와 함께 마스크 텍스처를 uv로 샘플링하고 흰색을 얻은 경우에만 조각을 그립니다 (그렇지 않으면 삭제). 아마도 가장 좋은 아이디어는 아닐 것입니다. 깊이 마스크 접근의

---

더 나은 버전 : 마스크 해제 색 쓰기 (renderer.context.colorMask(false, false, false, false);)를 전달합니다. 그 후 깊이 버퍼에 모양이 있어야합니다. 그런 다음 색상 마스크를 모두 true으로 재설정하고 renderer.autoClearDepth = false으로 설정하고 tileMaterial.depthFunc = THREE.GreaterDepth (more about depthFunc)으로 설정하십시오. 타일을 렌더링하십시오. 이 일을해야합니다.

또한 마스크 깊이를 depthTexture으로 작성하고 메인 패스의 텍스처로 사용하기 만하면됩니다.를 마스킹

---

사용 스텐실 버퍼 : 나는 아직 그것을 시도하지 않았다, 그러나 귀하의 경우에 적합합니다. 예 : 1, 2. 아이디어는 위에서 설명한 마스킹과 비슷합니다.