Javascript 应用透视矩阵顺序

我实际上正在编写一个脚本

domvertices

，它计算任意DOM元素的4个顶点的3d坐标：

产出：

{
  a: {x: , y: , z: },
  b: {x: , y: , z: },
  c: {x: , y: , z: },
  d: {x: , y: , z: }
}

为了实现这一点，我向上遍历dom，并为每个元素存储应用于它的矩阵（参见ª）

最后，我以相反的顺序将矩阵应用回目标元素

--

实际上它工作得很好

我唯一的问题是关于透视。。。目前，在计算元素的矩阵时，我既不考虑透视图，也不考虑透视原点

因此，不考虑透视变形（作为绘制顶点时的一种解决方法，我将它们附加到透视元素中，以便正确定位它们）

在计算元素的矩阵时，我想采用

透视图

和

透视原点

我可以很容易地制作透视矩阵，我的问题是何时将

透视

和

透视原点

矩阵应用于\

嵌套多重透视图呢

1：元素的矩阵由以下内容组成（从右到左阅读）：

---

感谢您的帮助。

您的透视矩阵需要等同于应用矩阵序列中最左边的矩阵

e、 g.取自几乎所有WebGL片段着色器

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

---

投影矩阵在左边。

您可以在github上找到一个TypeScript库，它支持透视变换和一些常见的变换方法，如GlobalTopolocal、localToGlobal和localToLocal： jsidea核心库。 您可以在函数中找到矩阵提取。看起来是这样的：

//subtract transform-origin
matrix.appendPosition(-originX, -originY, -originZ);
//append transform-matrix
matrix.appendCSS(style.transform);
//add transform-origin
matrix.appendPosition(originX, originY, originZ);
//add local position 
//Difficult to calc the local position, 
//because the offsetParent, offsetLeft and offsetTop are not reliable.
matrix.appendPosition(position.x, position.y, 0);
//subtract the perspective-origin
matrix.appendPosition(-perspectiveOriginX, -perspectiveOriginY, 0);
//apply the perspective (aka focalLength)
matrix.appendPerspective(perspective);
//add perspective-origin
matrix.appendPosition(perspectiveOriginX, perspectiveOriginY, 0);

在某些情况下，库对一个元素使用多个矩阵。

---

如果元素位于嵌套透视上下文中且父元素未保留三维（变换样式：平面）。您可以查看。

谢谢您的回答，但它有点通用，在这里没有真正的帮助。。。但是thx，可能是一个线索；）

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

//subtract transform-origin
matrix.appendPosition(-originX, -originY, -originZ);
//append transform-matrix
matrix.appendCSS(style.transform);
//add transform-origin
matrix.appendPosition(originX, originY, originZ);
//add local position 
//Difficult to calc the local position, 
//because the offsetParent, offsetLeft and offsetTop are not reliable.
matrix.appendPosition(position.x, position.y, 0);
//subtract the perspective-origin
matrix.appendPosition(-perspectiveOriginX, -perspectiveOriginY, 0);
//apply the perspective (aka focalLength)
matrix.appendPerspective(perspective);
//add perspective-origin
matrix.appendPosition(perspectiveOriginX, perspectiveOriginY, 0);