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

【问题标题】：Perspective correct texture mapping in Pixi.jsPixi.js 中的透视正确纹理映射
【发布时间】：2017-11-17 03:35:38
【问题描述】：

我的目的是用 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 );

这将给出screenshot01的结果：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。屏幕中的调试消息描述的是在裁剪空间中放置在地面上的字段的顶点坐标，而不是屏幕空间。

【问题讨论】：

标签： 3d texture-mapping perspective pixi.js

【解决方案1】：

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

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

x2 = x3 / z3

y2 = y3 / z3

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

您可以在https://en.wikipedia.org/wiki/Transformation_matrix#Perspective_projection 和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库会更好。

【讨论】：