Pixi.js 中的透视正确纹理映射

Question

我的目的是制作一个带有2D sprite的简单3d引擎（我这次选择Pixi.js因为我可以任意控制sprite的顶点），但是我不明白如何将纹理映射到投影的透视图正确四边形。
质地：https://imgur.com/Z5xDL8V
如果细分较低

，我将 PIXI.mesh.Plane 用于四边形

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

这将给出截图 01 的结果：https://imgur.com/a/m261h
您可以看到纹理映射不正确。

继续我在投影到屏幕顶点后将分割增加到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);

即4x4划分为每条边5个点，结果如截图02：https://imgur.com/a/6HREk，但每个划分的高度相同，透视错觉被打破

怎样才能达到截图的效果：https://imgur.com/a/ZEUHu
划分的高度分别与深度成比例
还是我解决问题的方向不对，请指教，谢谢。

PS。屏幕中的调试消息描述的是裁剪中地面上的场地的顶点坐标 space，而不是屏幕 space。

Answer 1

您需要应用透视并从 (x3, y3, z3) 3D space 点计算您的 (x2, y2) 坐标。

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

x2 = x3 / z3

y2 = y3 / z3

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

您可以在 https://en.wikipedia.org/wiki/Transformation_matrix#Perspective_projection and in https://en.wikipedia.org/wiki/3D_projection#Weak_perspective_projection

中阅读更多内容

要渲染一些东西，一个可见的四边形，你可以尝试这些 3D 点应该工作： (100, -100, 3), (100, -100, 5), (-100, -100, 5), (-100, -100, 3)

现在，在 3D 坐标中细分，而不是在 2D 坐标中细分，并为每个 3D 顶点计算 2D 投影位置。

您可能需要应用 3D 变换来移动和旋转相机和物体，请检查：https://en.wikipedia.org/wiki/Transformation_matrix#Examples_in_3D_computer_graphics

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

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

Pixi.js 中的透视正确纹理映射

Perspective correct texture mapping in Pixi.js

3d

texture-mapping

perspective

pixi.js