如何在三个js中将多个纹理裁剪为多边形
How to clip multiple textures to polygon in three js
我有一堆平面，每个平面在网格中都有自己的纹理。目前我将它们渲染为单独的平面，每个平面都有自己的纹理，尽管我可以使用具有多个面的单个平面。
每种颜色都是一种纹理。
我有一个平行于这些平面的任意形状的多边形网格：
此形状可以完全包含在其中一个平面内，或者更大。
我想用平面的重叠纹理对多边形进行纹理处理：
如何在三个 js 中完成纹理的裁剪？
我也愿意接受任何其他 WebGL 解决方案。
我的一些想法：
- 将多边形细分为与重叠平面相对应的面。然后使用 UV 坐标对这些面进行纹理处理。我知道我可以让它工作，但这个解决方案似乎太复杂了。
- 将多个纹理应用于多边形并使用 UV 坐标分布它们。 -- 我不确定不细分是否可行？
还有其他想法吗？这可以通过混合模式实现吗？
一些想法：
将小纹理烘焙到 texture atlas 中，这样您就可以在具有一个 uv 集的单个平面上获得图块（如果需要不止一个图集，您可以在一个 WebGL 程序中使用多个纹理采样器）。
计算对应于形状顶点的世界位置的平面的uv和具有这些uv的样本纹理图集。为此你可能需要传递给形状material平面的modelMatrix（或者只是 scale/offset 如果你知道它的方向，或者如果平面是固定的则什么都不知道。
请记住，您不需要在小图块上使用高分辨率纹理。 atlas 也可以通过将图块渲染为纹理来代替（从顶部开始使用正交投影）
或通过在单独的采样器中传递纹理。关于最后一种情况：要确定要传递哪些纹理，您可以测试形状边界框与地图图块。
使用简单的 material 将您的形状渲染为纹理，并在绘制平面的主通道中将此纹理用作遮罩。
详细说明：
将您想要遮盖的形状放在单独的容器中，然后 render it to a fixed size texture 使用非常简单的 material（在所有地方写上白色）使用您的普通相机。在该渲染通道之后，您应该有一个黑色和白色形状的纹理，就像您在屏幕上看到的那样（但缩放为方形纹理）。
之后渲染其余场景传递给图块 materials 蒙版纹理。在片段着色器样本蒙版纹理中，screenPos 为 uv，只有当你变白时才绘制片段（否则丢弃）。可能不是最好的主意（丢弃是昂贵的）。
深度蒙版方法的更好版本：在蒙版通道中禁用颜色书写 (renderer.context.colorMask(false, false, false, false);)。之后你应该在深度缓冲区中有你的形状。然后将颜色遮罩重置为全部 true、设置 renderer.autoClearDepth = false、设置 tileMaterial.depthFunc = THREE.GreaterDepth (more about depthFunc)。然后渲染你的瓷砖。这应该可以完成工作。
也可以通过将掩码深度写入 depthTexture 并将其用作主通道中的纹理来完成。
使用模板缓冲区进行掩蔽：我还没有尝试过，但它应该适合你的情况。示例：1, 。想法类似于上面描述的掩码。
我有一堆平面，每个平面在网格中都有自己的纹理。目前我将它们渲染为单独的平面，每个平面都有自己的纹理，尽管我可以使用具有多个面的单个平面。
每种颜色都是一种纹理。
我有一个平行于这些平面的任意形状的多边形网格：
此形状可以完全包含在其中一个平面内，或者更大。
我想用平面的重叠纹理对多边形进行纹理处理：
如何在三个 js 中完成纹理的裁剪？
我也愿意接受任何其他 WebGL 解决方案。
我的一些想法：
- 将多边形细分为与重叠平面相对应的面。然后使用 UV 坐标对这些面进行纹理处理。我知道我可以让它工作，但这个解决方案似乎太复杂了。
- 将多个纹理应用于多边形并使用 UV 坐标分布它们。 -- 我不确定不细分是否可行？
还有其他想法吗？这可以通过混合模式实现吗？
一些想法：
将小纹理烘焙到 texture atlas 中，这样您就可以在具有一个 uv 集的单个平面上获得图块（如果需要不止一个图集，您可以在一个 WebGL 程序中使用多个纹理采样器）。
计算对应于形状顶点的世界位置的平面的uv和具有这些uv的样本纹理图集。为此你可能需要传递给形状material平面的modelMatrix（或者只是 scale/offset 如果你知道它的方向，或者如果平面是固定的则什么都不知道。
请记住，您不需要在小图块上使用高分辨率纹理。 atlas 也可以通过将图块渲染为纹理来代替（从顶部开始使用正交投影） 或通过在单独的采样器中传递纹理。关于最后一种情况：要确定要传递哪些纹理，您可以测试形状边界框与地图图块。
使用简单的 material 将您的形状渲染为纹理，并在绘制平面的主通道中将此纹理用作遮罩。
详细说明：
将您想要遮盖的形状放在单独的容器中，然后 render it to a fixed size texture 使用非常简单的 material（在所有地方写上白色）使用您的普通相机。在该渲染通道之后，您应该有一个黑色和白色形状的纹理，就像您在屏幕上看到的那样（但缩放为方形纹理）。
之后渲染其余场景传递给图块 materials 蒙版纹理。在片段着色器样本蒙版纹理中，screenPos 为 uv，只有当你变白时才绘制片段（否则丢弃）。可能不是最好的主意（丢弃是昂贵的）。
深度蒙版方法的更好版本：在蒙版通道中禁用颜色书写 (renderer.context.colorMask(false, false, false, false);)。之后你应该在深度缓冲区中有你的形状。然后将颜色遮罩重置为全部 true、设置 renderer.autoClearDepth = false、设置 tileMaterial.depthFunc = THREE.GreaterDepth (more about depthFunc)。然后渲染你的瓷砖。这应该可以完成工作。
也可以通过将掩码深度写入 depthTexture 并将其用作主通道中的纹理来完成。
使用模板缓冲区进行掩蔽：我还没有尝试过，但它应该适合你的情况。示例：1,