如何在三个js中将多个纹理剪切为多边形

Question

我有一堆平面，每个平面都有自己的网格纹理。目前我将它们渲染为单独的平面，每个平面都有自己的纹理，尽管我可以使用具有多个面的单个平面。

每种颜色都是纹理。

我有一个任意形状的多边形网格，与这些平面平行：

此形状可以完全包含在其中一个平面内，或更大。

我想用平面的重叠纹理来纹理多边形：

如何在三个js中完成纹理裁剪？

我也对任何其他WebGL解决方案持开放态度。

我有一些想法：

1. 将多边形细分为与重叠平面对应的面。然后使用UV坐标纹理这些面。我知道我可以让它工作，但似乎太复杂了解决方案。
2. 将多个纹理应用于多边形，并使用UV坐标分布它们。 - 我不确定这可能没有细分？

还有其他想法吗？这可以通过混合模式完成吗？

Answer 1

很少有想法：

将小纹理烘焙到texture atlas中，这样就可以在单个平面上放置一个uv设置的瓷砖（如果需要多一个地图集，则可以在一个WebGL程序中使用多个纹理采样器）。

计算平面的uv对应于形状顶点的世界位置和样本纹理图集与这些uv。为此你可能需要传递给形状材质平面的modelMatrix（或者只是缩放/偏移，如果你知道它的方向，如果平面固定则没有任何东西。）

请记住，在小瓷砖上不需要高分辨率纹理。此外图集可以通过渲染图块来替换纹理（从正交投影的顶部） 或通过在单独的采样器中传递纹理。关于最后一种情况：要确定要传递哪些纹理，您可以测试形状与地图图块的边界框。

使用简单材质将纹理渲染到纹理，并在绘制平面的主要通道中将此纹理用作蒙版。

详细说明：

使用普通相机将要遮盖的形状放在单独的容器中，并使用非常简单的材质（在任何地方写入白色）放置render it to a fixed size texture。在渲染过程之后，你应该有一个黑色和白色的纹理，就像你在屏幕上看到的那样（但缩放到方形纹理）。

之后渲染剩余的场景传递给tile材质遮罩纹理。在片段着色器样本掩码纹理中，screenPos为uv，只有在获得白色时才绘制片段（否则丢弃）。可能不是最好的主意（丢弃是昂贵的）。

深度掩模方法的更好版本：在掩码传递中禁用颜色写入（renderer.context.colorMask(false, false, false, false);）。之后你应该有你的深度缓冲形状。然后将颜色遮罩重置为所有true，设置renderer.autoClearDepth = false，设置tileMaterial.depthFunc = THREE.GreaterDepth（more about depthFunc）。然后渲染你的瓷砖。这应该可以胜任。

也可以将掩模深度写入depthTexture并将其用作主要传递中的纹理。

使用模板缓冲区进行屏蔽：我还没有尝试过，但它应该适合您的情况。示例：1，2。想法类似于上面描述的屏​​蔽。