javascript - 单点透视绘图时如何确定Z-order？

Question

我正在尝试制作一个简单的 javascript，它在画布上绘制矩形，然后根据单点透视绘制侧面。问题是，矩形的数量和它们的位置是任意的，所以面往往会以一种在真正的 3D 透视图中不会发生的方式重叠。如何确定正确的绘图顺序，以免发生这种情况？

这里有一些截图来说明我的意思：

屏幕截图 1 - 错误的方式。在这一个中，红色、绿色和蓝色块的分组是按照它们应该如何绘制的相反顺序绘制的。

屏幕截图 2 - 正确的方式。这是它应该绘制的方式。

Answer 1

你正在寻找的是所谓的画家算法，只要你没有任何相交的多边形

Answer 2

由于您的屏幕截图不起作用，我将大胆猜测并假设您遇到的问题是从后到前绘制矩形会产生奇怪的重叠。

解决此问题的一种方法是使用简单的二进制空间分区。本质上，将每个正面矩形扩展到一个无限平面。然后，分割这些平面相交的所有边矩形。然后，从前到后的绘制不应再产生重叠，因为边矩形将在任何可能发生重叠问题的地方被分割。

编辑：啊，现在你的截图工作我不认为这是你的问题。啊，好吧，无论如何我都会留下答案。