1

我正在创建一个 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

提前致谢！

4

1 回答 1

1

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

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

于 2012-07-29T04:36:33.323 回答