How to implement pattern filling in 2D polygons, that is, small textures are uniformly and continuously tiled (not stretched and truncated)

I know that if the texture is large, you can adjust the texture coordinates based on the vertex position to ensure that the texture is not stretched.

But for small texture tile, if the vertex is in the shape of irregular polygon (non-standard rectangle), except the first triangular surface texture display the proper size, the other textures on the surface of the triangular are stretched.

How to implement pattern filling in 2D irregular polygon? Is there a better way to implement this?


fragment shader

fragment float4 fragment_func(Vertex in [[stage_in]],
                   texture2d<float> colorTexture [[ texture(0) ]])
{
    constexpr sampler textureSampler (address::repeat,filter::linear);
    const float4 colorSample = colorTexture.sample (textureSampler, in.textureCoordinate);
    return float4(colorSample);
}

Replies

The sample playground is here

h t t p s://s3-ap-southeast-1.amazonaws.com/cgwang/instanceDraw.playground.zip