Question

我的目的是制作一个带有2D精灵的简单3D引擎（这次我选择Pixi.js，因为我可以任意控制精灵的顶点），但我无法理解如何正确地将纹理映射到透视投影四边形。
纹理：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个点，结果显示为screenshot02：https://imgur.com/a/6HREk，但每个除法的高度相同，透视的错觉被打破

如何以屏幕截图的形式实现结果：https://imgur.com/a/ZEUHu
分割高度分别与深度成比例
或者我正朝着错误的方向解决问题，请建议我一些建议，谢谢。

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

Answer 1

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

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

x2 = x3 / z3

y2 = y3 / z3

被定义为（0，0，0）的（x3，y3，z3）空间是相机位置，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库。

Pixi.js

1 个答案: