Repeating texture on line

Question

I have a problem repeating my texture over my triangles.

My view is simple 2D orthographic projection.

I have a polyline - for this example - 3 points look like mirrored L.

In order to draw this polyline with width other than 1 (WebGL limit for now) I'm calculating for each point the needed offset, and creating triangles in the end.

1. Adding each vertex twice
2. adding for each vertex the calculated offset
3. In the vshader, according to the resolution i'm offsetting the the vertices.

The green is my polyline, and the blue are the offsets values in pixels

After the shader processing expands the vertices it creates my triangles.

Now for my problem

I'm trying to repeat my texture over those triangles along the X axis.

My texture is

and my wanted result is

What i've manage to do is this result, and i understand why it is happening.. I just don't know how to solve it

Basically what i'm doing is calculating each segment distance in my world units, in this case GIS coordinates, and divide it by the texture width in pixels = and then i get the repeat count. and attaching as vertex attributes accordingly. the next segment will start with whatever left from the repeat and calculate its own repeat value. I am aware that the distance and the texture width are different units but i'm assuming they are the same means resolution=1, and in the shader i'm dividing it again with my real pixel to coordinate scale. this way i'm handling also zooming in and out, more repeats or less.

This is my vexel position calculation:

// 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));

My solution for now is not to use triangles strip, but triangles. each segment will be separate two triangles as the following picture.

but my clients didn't like it.

Answer 1

Incomplete answer, see edit bellow

To achieve the effect you want, points 2 and 3 should have different texture coordinates when part of triangles (132) and (234). To do that, you need to duplicate these points as in the picture bellow.

This way 2 and 2', and 3 and 3' don't share the same texture coordinates and you can achieve the effect you are looking for.

If you want to stick to triangle strips, although considering how many triangles you have it might not be worth the effort, you can use an ordering such as 01232'3'45 .

Edit

My answer was indeed incomplete. But your remark made me find a possible solution. Your tiling is symetric with respect to the (23) axis. So you don't even need to duplicate points 2 and 3.

vTexCoords.s should be different for segments [02] and [13]. This will give you 2 and 3 vexel coordinates with the exact same equation you have. Then as before, to compute 4 and 5 you start from where you were at 2 and 3 in the texel space. The difference is that you need to substract le repeat count (because of the symetry) and not add it. For the vertical part, it results in something like this :

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

2nd edit

If it does not make sense to mirror your texture, then I don't think it is mathematically possible to have a mapping that makes the angle fit. You will probably have to create a special texture just for the angle.

On the other hand if you only need to have a fit on point 2 and not necessarily on point 3, then just go back to the duplicate points : 2' and 3' idea. Then give texture coordinates with respect to the length of each segments as explained in my 1st edit.