使用曲面法線進行正視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. 對於每個面和每個f上的每個點ace，我將它們轉換爲vec3s，並將它們與步驟1中製作的矩陣相乘。

3. 然後，我使用Newell的方法獲取臉部的曲面法線，然後從該法線獲得點積， up vec3，例如[-1,1,1]，因爲我想不出有什麼價值。我見過一些人使用相機的位置，但是...

4. 跳過使用相機矩陣的常用步驟，我從結果向量中拉出x和y值以發送到我的行並面對渲染器，但只有當它們的點積大於0時，我纔會意識到這真的是我所拉動的那些東西。

我想知道兩件事;如果我在第3步中的過程是正確的（最可能不是），並且如果我在臉上繪製的點的順序不正確（很可能）。如果後者是真的，我不太確定如何看到問題。我曾經看到有人說法線不相關，它是線條被繪製的方向，但是......我很難圍繞這一點，或者如果這是我的問題的根源。

它可能並不重要，但我使用矩陣庫是GL-矩陣：

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

而且，我用我的開源代碼庫的特定文件是在這裏：

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

提前感謝！

Answer 1

我還沒有審查過你的整個系統，但「made-up vec3」不應該是任意的;它應該是「出屏幕的」載體，其中（因爲你的投影是⟨X，ÿ，ž⟩→⟨X，ÿ⟩）要麼是⟨0，0， - 1⟩或⟨0,0,1⟩，具體取決於您的座標系的旋向和屏幕軸。你沒有明確的「攝像機矩陣」（通常稱爲視圖矩陣），但是你的攝像機（視圖和投影）由第4步投影隱式定義！

但是，請注意，此方法僅適用於正投影投影，而不適用於透視投影（考慮屏幕左側的面朝右，並與視圖方向平行;點積應爲0，但應爲可見）。在實際的3D硬件中使用的通常方法是首先進行所有的變換（包括投影），然後檢查產​​生的二維三角形是逆時針還是順時針纏繞，並根據該條件保留或丟棄。