没有瓷砖的等距渲染，目标是否可达？

Question

我在HTML5画布中创建了一个2D游戏。这是一个等距的世界，所以它实际上也是3D。 你总是看到等距游戏使用了瓷砖，我认为原因只是深度逻辑。 我的目标是在不使用磁贴系统的情况下创建游戏。每个项目都可以由用户放置，因此诸如墙壁，树木等项目位置具有可变位置。位置是等距的x，y，z坐标。 如果游戏只是平铺，您可以确定每个项目的固定平铺区域。 （我的意思是：一个瓷砖项目，或10个瓷砖长的墙）。 但是在我的游戏中，我使用 areaX 和 areaY 作为物品在地面上使用的空间。我使用 height 来存储项目的高度，这是z值。 （在我的世界中，z axiz，屏幕上是y轴）。

问题很难解释。它涉及深度排序。 见下图：

另一根酒吧顶部的棕色条应位于灰色杆之后。 我现在使用最简单的画家算法，只比较每个项目的x，y，z坐标。 我知道这种不正确的渲染是画家算法的一个着名问题。 如果这是平铺游戏，则可以将条形图分成彼此相邻的2个图块。然后可以按照深度的顺序绘制图块。

但是，由于我试图在没有瓷砖的情况下创建它，我正在寻找一个非常具有挑战性的逻辑。

应该将项目渲染为3D对象。我甚至想要有以下行为：如果多个项目相交，则应绘制每个项目的可见像素，如下图所示：

主要问题是没有信息可以确定图像的哪些部分应该可见，以及必须如何剪切它们。 我可以为每个图像创建一个深度蒙版，例如：

它有点像z缓冲区。

但由于画布的性能，这是不可能的，因为你必须在地图上的每个图像的每个像素上逐字迭代。 第二大缺点是你必须从服务器加载两倍的资源......

另一种解决方案可能是将所有图像切割成1像素宽的垂直条带。然后处理每个条带，好像它是1x1像素的图块。然后我还在创建一个平铺游戏，购买瓷砖会很小，我仍然可以达到我的目标。但是这个解决方案也有不利的性能...因为每个图像都会分成数百个条带，这是新的单独图像。

所以我正在寻找具有挑战性的解决方案。谁能帮我找到一种方法来定义图像的深度（或深度区域），以便能够正确渲染画布的性能？

Answer 1

这个问题实际上是asked again和answered over here

简短的回答是你可以使用深度精灵和WebGL