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 向上移动，并为每个元素存储应用于它的矩阵(参见 ¹)。

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

--

实际上效果很好!

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

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

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

我可以很容易地制作一个透视矩阵，我的问题是什么时候应用 perspective 和 perspectiveOrigin 矩阵到 ¹？

嵌套多视角呢？

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

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

感谢任何帮助。

Answer 1

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

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

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

投影矩阵在左边。