如何“排序”多边形 3d？

Question

我仍在研究我的“javascript 3d 引擎”(link inside stackoverflow)。 起初，我所有的多边形都是立方体的面，所以按平均 Z 对它们进行排序工作正常。 但现在我已经“进化”了，我想绘制我的多边形（可能包含超过 4 个顶点） 以正确的顺序，即那些靠近相机的将被最后绘制。

基本上， 我知道如何旋转它们并将它们“透视”化为 2D， 但不知道如何按正确的顺序绘制它们。

只是为了澄清：

//my 3d shape = array of polygons
//polygon = array of vertices
//vertex = point with x,y,z
//rotation is around (0,0,0) and my view point is (0,0,something) I guess.

谁能帮忙？

ps：我想出了一些“流行语”，正在寻找解决方案：z 缓冲、射线投射（？！）、平面方程、视图矢量等等——我想我需要一个简单易懂的答案，所以这就是我问这个的原因。谢谢。

p.s2：我不太介意重叠或相交多边形......所以也许画家的算法确实可能很好。但是：到底是什么？如何确定多边形的距离？一个多边形有很多点。

Answer 1

排序多边形然后从下到上绘制它们的方法称为“画家算法”。不幸的是，排序步骤通常是一个无法解决的问题，因为 3 个多边形可能相互重叠：

因此，不一定有任何“在顶部”的多边形。使用 Z 缓冲区或 BSP 树（涉及分割多边形）等替代方法不会遇到此问题。

Answer 2

我认为通过研究 BSP 树（二进制空间分区树）你会有一些想法，即使算法需要将你的一些多边形一分为二。 一些示例可以在这里找到http://www.devmaster.net/articles/bsp-trees/ 或通过谷歌找到 BSP 树。在我看来，发布一些代码作为回复并不严重，因为这是一个复杂的话题。

Answer 3

如何确定多边形的距离？一个多边形有很多点。

Painter 的算法实现起来最简单，但它只适用于非常简单的情况，因为它假设每个多边形只有一个“距离”或 z 值（您可以近似为 z 的平均值）多边形中所有点的值）。当然，如果两个多边形相交会产生错误的结果。

实际上，多边形没有单一的距离值 - 多边形表面上的每个点与观察者的距离可能不同，因此每个点都有自己的“距离”或深度。

您已经提到了Z-buffering，这是这样做的一种方式。我认为您不能在 HTML 画布上有效地实现这一点，但总体思路如下：

1. 您需要维护一个额外的画布，即“z 缓冲区”，其中每个像素的颜色代表主画布上相应像素的 z 深度。

2. 要绘制多边形，您需要遍历其表面上的每个点，并仅绘制比任何先前对象更靠近观察者的点，如 z 缓冲区所示。