如何在三个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。想法与上面描述的掩蔽类似。