应用透视矩阵顺序答案

【问题标题】：Apply perspective matrix order应用透视矩阵顺序
【发布时间】：2015-04-15 14:58:10
【问题描述】：

我实际上正在编写一个脚本 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

任何帮助表示赞赏。

【问题讨论】：

另见developer.mozilla.org/en-US/docs/Web/API/WebGL_API/…

标签： javascript css matrix 3d three.js

【解决方案1】：

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

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

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

投影矩阵在左边。

【讨论】：

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

【解决方案2】：

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

//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);

在某些情况下，库对一个元素使用多个矩阵。如果元素在嵌套透视上下文中并且父元素不保留 3d（变换样式：平面）。你可以看看at this code。

【讨论】：