在线重复纹理

Question

我在三角形上重复纹理时遇到问题。

我的观点是简单的二维正交投影。

我有一条折线 - 对于这个例子 - 3点看起来像镜像L.

为了绘制宽度不是1的此折线（目前是WebGL限制），我正在为每个点计算所需的偏移量，并在最后创建三角形。

1. 每次添加两个顶点
2. 为每个顶点添加计算的偏移量
3. 在vshader中，根据我正在抵消顶点的分辨率。



绿色是我的折线，蓝色是以像素为单位的偏移值



着色器处理扩展顶点后，它会创建我的三角形。

现在解决我的问题

我正在尝试沿着X轴在这些三角形上重复纹理。

我的纹理是

我想要的结果是



我能做的就是这个结果，我明白为什么会这样。 我只是不知道如何解决它



基本上我正在做的是计算我的世界单位中的每个段距离，在这种情况下是GIS坐标，并将其除以纹理宽度（以像素为单位）=然后我得到重复计数。并相应地附加为顶点属性。下一个段将从重复的任何内容开始，并计算其自己的重复值。 我知道距离和纹理宽度是不同的单位，但我假设它们是相同的意思是分辨率= 1，并且在着色器中我再次将它与我的真实像素分开以协调比例。这样我处理的同时也可以放大和缩小，更多的重复或更少。

这是我的vexel位置计算：

// vTexCoords.s is the repeat count, and due to i'm working with my world units i need to divide by it scale. 
// vTexCoords.t is 0 or 1 according to the vertex Y Position
vec2 vexelPos = fract(vec2(vTexCoords.s / (uPixelWolrdScale.x), vTexCoords.t));

我现在的解决方案不是使用三角形条带，而是使用三角形。每个片段将分开两个三角形，如下图所示。



但是我的客户不喜欢它。

Answer 1

答案不完整，请参阅下面的编辑

为了达到你想要的效果，当部分三角形（132）和（234）时，点2和3应该有不同的纹理坐标。为此，您需要复制这些点，如下图所示。

这种方式2和2'，以及3和3'不共享相同的纹理坐标，你可以达到你想要的效果。

如果你想坚持使用三角形条，虽然考虑到你拥有多少个三角形可能不值得，但你可以使用诸如01232'3'45之类的订单。

修改

我的回答确实不完整。但是你的评论让我找到了可能的解决方案。您的平铺相对于（23）轴是对称的。所以你甚至不需要复制第2点和第3点。

vTexCoords.s对于段[02]和[13]应该是不同的。这将为您提供2和3个正弦坐标，其具有完全相同的等式。然后和之前一样，要计算4和5，您将从纹素区域中的2和3处开始。不同之处在于您需要减去重复计数（因为对称性）而不是添加它。对于垂直部分，它会产生如下结果：

vec2 vexelPos = fract(vec2(lastPos - vTexCoords.s / (uPixelWolrdScale.x), vTexCoords.t));

第二次修改

如果镜像纹理没有意义，那么我认为在数学上不可能有一个使角度适合的映射。您可能只需为角度创建一个特殊纹理。

另一方面，如果您只需要在第2点进行拟合而不必在第3点进行拟合，那么只需返回重复点：2'和3'的想法。然后根据我的第一次编辑中的说明给出相对于每个段长度的纹理坐标。