使用表面法线的正交 3D 背面剔除

Question

我正在创建一个 HTML5 画布 3D 渲染器，我想说在没有 SO 的帮助下我已经取得了相当大的进展，但我遇到了各种各样的阻碍。我正在尝试借助一些法线计算在立方体上实现背面剔除。此外，我已将此标记为 WebGL，因为这是一个足够普遍的问题，它既适用于我的用例，也适用于 3D 加速的用例。

无论如何，当我旋转立方体时，我发现隐藏了错误的面孔。示例：

我正在使用以下顶点： https://developer.mozilla.org/en/WebGL/Creating_3D_objects_using_WebGL#Define_the_positions_of_the_cube%27s_vertices

我使用的一般程序是：

1. 创建一个用于变换立方体顶点的变换矩阵

2. 对于每个面和每个面上的每个点，我将它们转换为 vec3，然后将它们乘以在步骤 1 中生成的矩阵。

3. 然后我使用 Newell 方法获得面部的表面法线，然后从该法线和一些组成的 vec3 中获得点积，例如 [-1, 1, 1]，因为我不能想不出一个很好的价值来放在这里。我见过一些人为此使用相机的位置，但是......

4. 跳过使用相机矩阵的常规步骤，我从结果向量中提取 x 和 y 值以发送到我的线和面渲染器，但前提是它们的点积大于 0。我意识到我拉哪个是相当随意的，真的。

我想知道两件事；如果我在步骤 3 中的程序是正确的（很可能不是），并且我在脸上绘制的点的顺序不正确（很可能）。如果后者是真的，我不太确定如何可视化问题。我见过人们说法线无关紧要，它是画线的方向，但是......我很难理解这一点，或者这是否是我问题的根源。

可能没关系，不过我用的矩阵库是gl-matrix：

https://github.com/toji/gl-matrix

另外，我正在使用的开源代码库中的特定文件在这里：

http://code.google.com/p/nanoblok/source/browse/nb11/app/render.js

提前致谢！

Answer 1

我还没有审查过你们的整个系统，但是“编造的 vec3”不应该是任意的；它应该是“屏幕外”向量，它（因为你的投影是 ⟨x, y, z⟩ → ⟨x, y⟩) 是 ⟨0, 0, -1⟩ 或 ⟨0, 0, 1⟩，具体取决于您的坐标系的惯用手和屏幕轴。您没有明确的“相机矩阵”（通常称为视图矩阵），但您的相机（视图和投影）由您的第 4 步投影隐式定义！

但是，请注意，这种方法仅适用于正交投影，而不适用于透视投影（考虑屏幕左侧的面，面向右侧并与视图方向平行；点积将为 0，但它应该是可见的）。在实际 3D 硬件中使用的常用方法是首先进行所有变换（包括投影），然后检查生成的 2D 三角形是逆时针还是顺时针缠绕，并根据该条件保留或丢弃。