3d Pixi.js中的透视校正纹理映射

我的目的是用2D sprite制作一个简单的3d引擎（这次我选择Pixi.js，因为我可以任意控制sprite的顶点），但我不知道如何将纹理正确映射到透视投影的四边形。
纹理：
如果细分较低，我将为四边形使用PIXI.mesh.Plane

var verticesX = 2, verticesY = 2;
this.field = new PIXI.mesh.Plane(resources['palette'].texture, verticesX , verticesY );

这将给出screenshot01的结果：
您可以看到纹理贴图不正确。

继续，在投影到屏幕顶点后，我将分割增加到4，并线性计算分割点

this.field = new PIXI.mesh.Plane(resources['palette'].texture, 5, 5);
var lt = [this.field.model.screenVertices[0], this.field.model.screenVertices[1]];
var rt = [this.field.model.screenVertices[2], this.field.model.screenVertices[3]];
var rb = [this.field.model.screenVertices[4], this.field.model.screenVertices[5]];
var lb = [this.field.model.screenVertices[6], this.field.model.screenVertices[7]];
var segX = this.field.verticesX - 1;
var segY = this.field.verticesY - 1;
var vertices = [];
for (var i = 0; i < (segY + 1); i++) {
  var l = (lb[0] - lt[0]) / segY * i + lt[0];
  var r = (rb[0] - rt[0]) / segY * i + rt[0];
  for (var j = 0; j < (segX + 1); j++) {
    var t = (rt[1] - lt[1]) / segX * j + lt[1];
    var b = (rb[1] - lb[1]) / segX * j + lb[1];
    vertices[(i * (segY + 1) + j) * 2] = (r - l) / segX * j + l;
    vertices[(i * (segY + 1) + j) * 2 + 1] = (b - t) / segY * i + t;
  }
}
this.field.vertices.set(vertices);

this.field=new PIXI.mesh.Plane（参考资料['palete'].texture，5,5）；
var lt=[this.field.model.screenVertices[0]，this.field.model.screenVertices[1]；
var rt=[this.field.model.screenVertices[2]，this.field.model.screenVertices[3]；
var rb=[this.field.model.screenVertices[4]，this.field.model.screenVertices[5]；
var lb=[this.field.model.screenVertices[6]，this.field.model.screenVertices[7]；
var segX=this.field.verticesX-1；
var segY=this.field.verticesY-1；
var顶点=[]；
对于（变量i=0；i<（segY+1）；i++）{
var l=（lb[0]-lt[0]）/segY*i+lt[0]；
var r=（rb[0]-rt[0]）/segY*i+rt[0]；
对于（var j=0；j<（segX+1）；j++）{
var t=（rt[1]-lt[1]）/segX*j+lt[1]；
var b=（rb[1]-lb[1]）/segX*j+lb[1]；
顶点[（i*（segY+1）+j）*2]=（r-l）/segX*j+l；
顶点[（i*（segY+1）+j）*2+1]=（b-t）/segY*i+t；
}
}
this.field.vertices.set（顶点）；

即4x4分割为每个边5个点，结果显示为screenshot02:，但每个分割的高度相同，透视错觉被打破

如何实现屏幕截图的效果：
分区的高度分别与深度成比例
还是我解决问题的方向错了，请给我一些建议，谢谢

---

另外，屏幕中的调试消息描述了剪切空间中位于地面上的场的顶点坐标，而不是屏幕空间。

您需要应用透视图并从（x3，y3，z3）三维空间点计算（x2，y2）坐标

最简单的透视变换方程为：

x2=x3/z3

y2=y3/z3

是（x3，y3，z3）空间，定义为（0，0，0）是相机位置，z是观察方向，x3是水平垂直轴，y3是垂直垂直轴。对于2D（x2，y2），屏幕的中心应该是（0，0）

你可以读更多的书

要获得渲染效果，可以使用可见的四边形，您可以尝试以下3D点： （100，-100,3），（100，-100,5），（-100，-100,5），（-100，-100,3）

现在，在三维坐标（而不是二维坐标）中细分，并为每个三维顶点计算二维投影位置

您可能需要应用3D变换来移动和旋转摄影机和对象，请选中以下选项：

但是，如果使用图像，纹理透视校正仍然会有问题。细分越多，问题就越少

---

我认为最好使用three.js或其他webgl库。

您需要应用透视图并从（x3，y3，z3）三维空间点计算（x2，y2）坐标

最简单的透视变换方程为：

x2=x3/z3

y2=y3/z3

是（x3，y3，z3）空间，定义为（0，0，0）是相机位置，z是观察方向，x3是水平垂直轴，y3是垂直垂直轴。对于2D（x2，y2），屏幕的中心应该是（0，0）

你可以读更多的书

要获得渲染效果，可以使用可见的四边形，您可以尝试以下3D点： （100，-100,3），（100，-100,5），（-100，-100,5），（-100，-100,3）

现在，在三维坐标（而不是二维坐标）中细分，并为每个三维顶点计算二维投影位置

您可能需要应用3D变换来移动和旋转摄影机和对象，请选中以下选项：

但是，如果使用图像，纹理透视校正仍然会有问题。细分越多，问题就越少

我认为最好使用three.js或其他webgl库