Three.js 中的头部耦合/离轴透视答案

【问题标题】：Head-coupled/Off-axis perspective in Three.jsThree.js 中的头部耦合/离轴透视
【发布时间】：2014-11-22 02:29:36
【问题描述】：

我正在尝试在不使用完整的 headtrackr 库的情况下实现永久的头部耦合视角。我的头不会动，但不会直接在屏幕前面。

我有一个小demo，你可以下载并使用python -m SimpleHTTPServer 8000运行

代码主要改编自this headtrackr example和部分the headtrackr source

我的期望基于此diagram:

在第三张图片中，我想像从上方逆时针稍微旋转我的显示器。这应该相当于减少 Z 并使 X 小于零。我希望我的显示器显示中间图像，但我看到的是这样的：

我认为我正在查看的“窗口”是 XY 平面，但它不应该像第一个图中的中间橙色矩形一样伸展吗？这是另一个固定的窗口：http://kode80.com/2012/04/09/holotoy-perspective-in-webgl/ 看看我所说的“窗口”是什么意思。

离轴透视和头部跟踪无关吗？如何在 THREE.js 中获得令人信服的离轴透视错觉？

【问题讨论】：

标签： javascript camera three.js perspective

【解决方案1】：

我认为您可以使用setViewOffset 完成您的目标。你的图表在我看来有点不对劲。也许是因为在离轴投影中没有 qube，但我认为关键是平截头体应该保持在一个固定点上，而不需要旋转会引入透视失真的相机。

要使用setViewOffset 完成此操作，我会将fullWidth 和fullHeight 设置为更大的尺寸。视图偏移量将是该超大视图中的一个窗口。随着用户移动，该窗口将在查看器的相反方向上偏移。

http://threejs.org/docs/#Reference/Cameras/PerspectiveCamera

【讨论】：

【解决方案2】：

您需要调整透视矩阵。它是用 -left +right -bottom +top 构建的。更改这些将产生您正在寻找的效果。

【讨论】：

透视矩阵不是这样定义的。
您能否详细说明您的评论是什么意思？ 5 年前矩阵的定义可能不同。
我很抱歉简短的评论和快速的否决。这不是很有礼貌。正交投影需要左、右、下、上、近、远。该规范对于透视投影没有多大意义。中心透视可以用四个参数FOV、aspect、near、far来定义。如果它偏离中心，则至少需要多两个参数。现代 THREE.js 有一个 PerspectiveCamera 方法 setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : null。如果您更正答案，我很乐意删除反对票。 :-)
授予它可能不再有效，但我指的是“基本”openGL 透视投影矩阵。 scratchapixel.com/lessons/3d-basic-rendering/…。在文献中，都提到了左右上下。在 threejs 世界中，这是从 FOV 或纵横比之类的东西派生出来的，但它仍然必须映射到左、右、上、下以及近和远。
我认为这个答案仍然有效，因为在内部 three.js 仍然使用左、右、上和下。 It's built with... 因此不是无效的。 github.com/mrdoob/three.js/blob/dev/src/cameras/… 另外，“调整”透视矩阵需要发生，无论您是使用 API 还是直接操作它。所以这个说法也是有效的。虽然它可能不是最好的答案，也不是最好的答案（更容易使用 API），但我认为最好的办法是在此处发布您自己的答案或投票赞成第一个答案:)

【解决方案3】：

3D 投影映射可以分为角落固定纹理步骤和透视调整步骤。我认为它们有些无关。

在 Three.js 中，您可以制作一个四边形曲面（由两个三角形 Face3 组成）并将纹理映射到曲面上。然后在 XY（不是 Z）中移动四边形的角。除了四边形纹理中的微小变形所必需的之外，我认为此步骤不会引入透视伪影。我想我说的是条带问题和最近邻伪影，而不是 3d 透视错误。这些伪影的大小取决于投影仪在物体上的照射方式。如果投影仪很好地垂直于表面，则需要很少的角映射。如果您使用的是显示器而不是投影仪，则无需固定角。

接下来是透视调整步骤。您必须根据用户相对于现实生活表面的位置来调整纹理的内容。我相信您可以通过从物理查看器到屏幕表面中心的 XYZ 距离、像素与实际尺寸之间的比例因子以及表面的像素尺寸来做到这一点。

在我的演示中，立方体的蓝色面指向正 Z 方向。当我在现实世界中旋转显示器时，它们继续指向显示器世界的正 Z 方向。我发布的图表有点误导，因为中间图片中的橙色框是局部旋转的，以补偿现实监视器世界的旋转。那个橙色盒子的正面不再完全指向其监视器世界的正 Z 方向。

在 Three.js 之外，在 Processing 中还有一些投影映射技术。

这个可能是最简单的，虽然我自己没试过：http://blogs.bl0rg.net/netzstaub/2008/08/24/wiimote-headtracking-in-processing/

SurfaceMapper for Processing 支持现实生活中的曲面（不仅仅是平面矩形），但它仅适用于 Processing 2.0 之前的 Processing。

如果有人为 Three.js 开发 SurfaceMapper 库，那将是非常酷的！我很想设计一个虚拟世界，在世界中放置摄像头，让每个摄像头考虑现实生活中的观察者视角，然后将这些渲染纹理放在现实生活中的显示器上。

【讨论】：

我不确定我是否理解什么是“角固定”，但如果你的意思是渲染默认的投影矩阵/截锥体，然后变形纹理，你会遇到很多麻烦.首先，我认为两个三角形不会切割它，你必须对这个表面进行镶嵌。其次，当它可以通过调整矩阵来实现时，为什么要拉伸图像/做额外的工作等。链接有代码，-left + offset right + offset。
我同意。正如您所说，无需渲染纹理然后使纹理变形。为获得最佳质量，角固定应通过投影矩阵完成，无需任何最终纹理通道。