How to control UV mapping distortion

Question

The illustration below shows how I expect the UV mapping to be applying the texture and how it is really being applied. This was a big surprise to me, my conclusion was if I could draw faces with four vertices this wouldn't be an issue, but I am using WebGL where I have to stick with triangles...

• Is there a name for this phenomenon? (EDIT: I found out that this phenomenon is called affine texture mapping, as opposed to perspective texture mapping https://mtrebi.github.io/2017/03/15/texture-mapping-affine-perspective.html)
• What could be a possible solution to achieve the expected result with WebGL?

EDIT:

I fixed my visualisation of the "expected distortion" and added another visualization below for a use case to make it more clear. What trips me up is the diagonal triangle edges being curved. Sure that this cannot be represented with polygon triangles. So how could I achieve this mapping?

EDIT 2:

I had a hard time with this, got it so far that I was able to distort the projection that it (kind of?) fits the pseudo perspective distortion of each face. It's close, but not right yet. The distortion is almost right. I think I am missing a little math lesson here to interpolate the right way. I'm fine with the overall look, I just need the texture to be seamless.

My fragment shader looks like this:

#version 300 es
precision mediump float;

uniform sampler2D uSampler;
in vec2 vUv;
in float vRailsRatio;
in float vLastUPosition;

out vec4 fragColor;

void main() {

  float uDifference = vUv.x - vLastUPosition;
  float step = vUv.y;
  if (vRailsRatio < 1.) {
    step = 1. - vUv.y;
  }
  float newU = vLastUPosition + uDifference * mix( 1. , 1./vRailsRatio  , step) ;

  fragColor = texture(uSampler, vec2(newU, vUv.y));

}