【问题标题】：overlapping polygons in html5 canvashtml5画布中的重叠多边形
【发布时间】：2011-10-14 03:30:55
【问题描述】：
我正在尝试在 html5 画布中呈现简单的 3d 形状（在本例中为立方体）。将 3d 点转换为 2d 平面很容易，所以我继续开始为多边形着色。它们以错误的顺序重叠。所以我只是计算每个多边形的距离（基于 4 个角的平均值）并以此为基础对其进行排序。
除非那真的不起作用。那么如何决定先绘制哪些多边形呢？
附：我正在尝试学习如何制作它，因此使用现有的库或其他东西并不能真正奏效。
【问题讨论】：
标签：
html
3d
2d
overlapping
polygons
【解决方案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 位置的数组。
这仅在您对多边形中的点有顺序时才有效（在我的情况下，当面向相机时，位置是顺时针方向）