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：我不太关心重叠或相交的多边形......所以也许画家的algorthm确实可能是好的。但是：究竟是什么？我如何确定多边形的距离？多边形有很多点。

Answer 1

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

http://i54.tinypic.com/ju8umr.jpg

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

Answer 2

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

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

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

您已经提到了Z-buffering，这是实现此目的的一种方式。我不认为你可以在HTML画布上有效地实现它，但这是一般的想法：

您需要维护一个额外的画布，即“z-buffer”，其中每个像素的颜色代表主画布上相应像素的z深度。
要绘制多边形，您将遍历其表面上的每个点，并仅绘制比任何先前对象更靠近查看者的点，如z缓冲区所示。

Answer 3

我认为你会通过调查BSP树（二进制空间分区树）来获得一些想法，即使算法需要将一些多边形分成两部分。可以在此处找到一些示例http://www.devmaster.net/articles/bsp-trees/或谷歌搜索BSP树。在我看来，发布一些代码作为答复并不严肃，因为这是一个复杂的话题。

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

3 个答案: