如何在三個js中將多個紋理剪輯爲多邊形

Question

我有一堆平面，每個平面都有自己的網格紋理。目前我將這些渲染爲獨立的平面，每個平面都有自己的紋理，儘管我可以使用具有多個面的單個平面。

每個顏色是紋理。

我有任意形狀的多邊形網格，其平行於這些平面：

這種形狀可以完全包含在平面中的一個，或更大的範圍內。

我想紋理的多邊形平面的交疊紋理：

如何實現紋理的這條新聞在三個JS？

我也開放給任何其他WebGL的解決方案。

一些想法，我有：

1. 細分多邊形到與重疊面對應的面孔。然後使用UV coords紋理這些面部。我知道我可以讓這個工作，但它似乎太複雜的解決方案。
2. 將多個紋理應用到多邊形並使用UV座標來分佈它們。 - 我不知道這不可能細分？

還有其他想法嗎？這可以通過混合模式來完成嗎？

Answer 1

一些想法：

---

烤小紋理爲texture atlas讓你有一個UV集（如果不止一個地圖集需要，你可以在一個WebGL的程序使用多個紋理採樣）在單一的平面瓷磚。

計算飛機的UV對應於與這些UV形狀頂點和樣本紋理地圖的世界POS。爲此，您可能需要傳遞以塑造材質平面的模型矩陣（如果知道其方向，則只是縮放/偏移量，或者如果平面固定，則爲空）。

請記住，你不需要對小青瓦高分辨率紋理。還圖譜可以通過使瓷磚紋理（從與正投影頂部） 或通過使紋理的單獨採樣代替。關於最後一種情況：要確定要傳遞哪些紋理，可以測試形狀與地圖切片的邊界框。

---

渲染用簡單的材料，你的形狀到紋理和您畫的飛機使用質地面膜在主要關口。

詳細上：

廣場的形狀要在單獨的容器和render it to a fixed size texture掩蓋用非常簡單的材料（寫白字到處）與普通相機。在渲染過程之後，您應該在屏幕上看到黑色和白色形狀的紋理（但會縮放爲方形紋理）。

之後渲染場景的其餘部分傳遞給瓷磚材質遮罩紋理。在fragmentPos作爲uv的片段着色器樣本遮罩紋理中，只有在得到白色時才繪製片段（否則放棄）。可能不是最好的主意（丟棄是昂貴的）。

---

更好的版本深度掩模方法的：在屏蔽通過禁用顏色寫作（renderer.context.colorMask(false, false, false, false);）。之後，你應該有你的形狀在深度緩衝。然後將顏色掩碼重置爲全部true，集合renderer.autoClearDepth = false，集合tileMaterial.depthFunc = THREE.GreaterDepth（more about depthFunc）。然後渲染你的瓷磚。這應該完成這項工作。

它也可以通過將掩碼深度寫入depthTexture並僅將其用作主通道中的紋理來完成。掩蔽

---

使用模板緩存：我沒有嘗試過，但它應該是適合你的情況。例如：1,2。想法與上面描述的掩蔽類似。