html - html5画布中的重叠多边形

Question

我正在尝试在 html5 画布中渲染简单的 3d 形状（在这种特殊情况下为立方体）。将 3d 点转换为 2d 平面很容易，所以我继续开始为多边形着色。它们以错误的顺序重叠。所以我只是计算每个多边形的距离（基于 4 个角的平均值）并据此对它们进行排序。

除非那真的行不通。那么你如何决定首先绘制哪些多边形呢？

PS我正在尝试学习如何制作这个，所以使用现有的库或其他东西并不能真正起作用。

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 位置的数组。

这仅在您对多边形中的点有订单时才有效（在我的情况下，当面向相机时，位置是顺时针方向的）