使用曲面法线的正交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. 对于每个面，以及每个面上的每个点，我将它们转换为vec3s，然后将它们乘以步骤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三角形是逆时针还是顺时针缠绕，并根据该条件保持或丢弃。