在html5畫布中重疊的多邊形

Question

我想在html5畫布中呈現簡單的3d形狀（在這種情況下，一個多維數據集）。將3d點轉換爲2D平面非常簡單，因此我繼續開始着色多邊形。它們以錯誤的順序重疊。所以我只是計算每個多邊形的距離（基於4個角的平均值）並根據它們進行排序。

除此之外沒有效果。那麼你如何決定你首先繪製哪些多邊形呢？

P.S.我試圖學習如何做到這一點，所以使用現有的庫或其他東西不會真的爲此工作。

Answer 1

搜索了一段時間後，我找到了一種方法來檢查這一點。這是通過「背面剔除」完成的，根據我的理解，首先計算多邊形的2d位置，然後取3個點，並比較它們以確定多邊形所面向的方向。

我使用的檢查是如下：

ifVisible = function(p1, p2, p3) 
{ 
    return ((p2[0]-p1[0])*(p3[1]-p1[1])>(p3[0]-p1[0])*(p2[1]-p1[1])); 
} 

其中，P1，P2和P3是包含x和點的y位置陣列。

這隻適用於如果你有多邊形點的訂單（在我的情況下，面向相機時位置是順時針）