如何解决WebGL中UV映射的仿射纹理映射失真问题

我原本以为用四边形面就能避免纹理映射的问题，但WebGL只支持三角形面，实际呈现的UV映射效果和预期差距很大，让我很意外。

问题列表 #

• 该现象是否有专业名称？

  编辑：已确认此现象为仿射纹理映射，区别于透视纹理映射

• 如何在WebGL中实现预期的UV映射效果？

编辑：
我修正了“预期失真效果”的可视化，补充了用例图来更清晰说明问题。现在困扰我的是，理想效果里三角形的对角线边缘呈曲线状，但多边形三角形做不到，请问怎么实现这类映射？

编辑2：
我在这个问题上花了不少精力，现在已经调整投影失真，让它大致匹配每个面的伪透视失真效果，但还没完全达标，只是失真效果接近预期。我觉得自己缺了正确插值的数学方法，目前整体效果还行，就差实现纹理无缝了。

我的片段着色器代码 #

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

}

内容的提问来源于stack exchange，提问作者Severin