javascript - 应用透视矩阵顺序

Question

我实际上正在编写一个脚本domvertices，它计算任何 DOM 元素的 4 个顶点 3d 坐标:http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e

var el = document.getElementById('foo');
var vertices = domvertices(el);
console.log(vertices);

输出:

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

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

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

--

实际上效果很好!

我唯一的问题是关于透视...目前，在计算元素的矩阵时，我不考虑perspective和perspective-origin。

因此，不考虑透视变形(作为绘制顶点时的解决方法，我将它们附加到受透视影响的元素中，以便它们正确定位)。

我想在计算元素矩阵时采用perspective和perspective-origin。

我可以轻松制作透视矩阵，我的问题是何时将 perspective 和 perspectiveOrigin 矩阵应用到 1 ？

嵌套多视角怎么样？

1:元素矩阵的组成如下(从右到左阅读):

transformOrigin^-1 * transform * transformOrigin * relativePosition * Identity

感谢任何帮助。

Answer 1

您的透视矩阵需要相当于应用矩阵序列中最左边的矩阵。

例如取自几乎所有 WebGL 片段着色器

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

投影矩阵位于左侧。