javascript - 软件 3d 引擎中的投影数学

Question

我正在用 Javascript 编写一个软件 3d 引擎，渲染到 2d Canvas 。我完全陷入了与从 3d 世界到 2d 屏幕坐标的投影相关的问题。

到目前为止，我已经:

• 相机投影和 View 矩阵。
• 转换后的模型顶点 (v x ModelViewProj)。
• 获取结果并将 x 和 y 除以 z(透视)坐标，形成视口(viewport)坐标。
• 按视口(viewport)大小缩放生成的二维矢量。

我正在绘制一个平面，当所有 4 个顶点(2 个三 Angular 形)都在屏幕上时，一切正常。当我将相机飞过飞机时，在某个时刻，屏幕外的顶点会变换到屏幕的顶部。该点似乎与透视坐标高于 1 时一致。我这里有一个示例来说明我的意思 - 向前按可看到它翻转:

http://davidgoemans.com/phaser3d/

代码未缩小，因此网络开发工具可以轻松检查，但我也将源代码放在这里:

https://github.com/dgoemans/phaser3dtest/tree/fixcanvas

提前致谢!

<小时/>

注意:我正在使用 Phaser，目前并没有真正做任何事情，但我的计划是混合 2d 和 3d。它不应该对 3d 数学产生任何影响。

Answer 1

当投影点位于虚拟相机后面时，结果将投影在虚拟相机前面，进行镜像。 x/z 与 -x/-z 相同。

在渲染管道中，这个问题是通过裁剪算法解决的，该算法通过裁剪平面与图元相交。在您的情况下，位于相机前面某处的单个剪裁平面就足够了(在渲染管道中，通常使用 6 个剪裁平面来描述完整的观看体积)。您必须防止出现以下情况:单个图元至少有一个点位于相机前面，而至少有另一个点在其后面(并且您必须丢弃完全位于后面的图元，但这是相当微不足道的)。裁剪必须在透视分割之前进行，这也是投影矩阵变换到的空间被称为裁剪空间的原因。