Three.js 如何将多个纹理剪裁到三个js中的多边形

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

每种颜色都是一种纹理

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

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

我希望使用平面的重叠纹理对多边形进行纹理处理：

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

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

我有一些想法：

将多边形细分为与重叠平面对应的面。然后使用UV坐标对这些面进行纹理处理。我知道我可以让它工作，但这似乎是一个太复杂的解决方案

将多个纹理应用于多边形，并使用UV坐标分布它们。-我不确定这是不可能的细分

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

一些想法：

---

将小纹理烘焙到中，以便在单个平面上使用一个uv集生成瓷砖（如果需要多个地图集，则可以在一个WebGL程序中使用多个纹理采样器）

计算与形状顶点的世界位置相对应的平面uv，并使用这些uv对纹理图集进行采样。为此，您可能需要传递到形状材质平面的modelMatrix（或者，如果知道其方向，只需缩放/偏移，如果平面固定，则无需任何操作）

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

---

使用简单材质将形状渲染为纹理，并在绘制平面的主通道中将此纹理用作遮罩。

详细说明如下：

将要遮罩的形状放置在单独的容器中，并使用非常简单的材料（在所有地方都写上白色）和常规相机。在那个渲染过程之后，你们应该有一个带有黑色和白色形状的纹理，就像你们在屏幕上看到的那个样（但缩放成方形纹理）

之后，渲染场景的其余部分，并将其传递到“瓷砖材质遮罩纹理”（tiles materials mask texture）。在片段着色器中，使用screenPos作为uv采样遮罩纹理，并仅在获得白色时绘制片段（否则放弃）。可能不是最好的主意（丢弃是昂贵的）

---

深度掩码方法的更好版本：在掩码过程中禁用颜色写入（

renderer.context.colorMask（false，false，false，false）；

）。之后，你应该有你的形状在深度缓冲区。然后将颜色掩码重置回所有

true

，设置

renderer.autoClearDepth=false

，设置

tileMaterial.depthFunc=THREE.GreaterDepth

（）。然后渲染你的瓷砖。这应该可以完成任务

也可以将遮罩深度写入主通道，并将其用作纹理

---

---

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

只是一个想法，很可能不是很有效。难道你不能按需要的顺序在2d画布上绘制所有纹理，然后在多边形上简单地映射一个纹理吗？好主意。我想我会尝试渲染到纹理。对于我的基本用例来说，它应该足够有效。不过看起来还是太复杂了。你能详细说明一下后两个吗？除非在运行时创建，否则我不能使用纹理图集，因为我在运行时从google maps api动态加载纹理图。@rawbeans添加了详细信息。考虑在单独的采样器中传递纹理，并使用世界空间坐标进行采样，我认为这是很好的工作，因为没有额外的通道。但可用的采样器数量可能会造成干扰。谢谢。我最终渲染了一个纹理，然后像你的第一个建议那样计算UV。“它工作得很好！”我很高兴听到它！