【发布时间】：2016-11-13 15:54:58
【问题描述】：
我正在 HTML5 画布中创建一个 2d 游戏。这是一个等距的世界，所以实际上它也是 3d 的。 你总是看到等距游戏使用图块，我认为原因只是深度逻辑。 我的目标是在不使用图块系统的情况下创建游戏。每个物品都可以由用户放置，因此墙壁、树木等物品的位置具有可变的位置。这些位置是等轴测 x、y、z 坐标。 如果游戏只是平铺，您可以为每个项目确定一个固定的平铺区域。 （我的意思是：一个单格物品，或一堵 10 格长的墙）。 但在我的游戏中，我使用 areaX 和 areaY 来表示物品在地面上使用的空间。我使用 height 来存储项目的高度，即 z 值。 （我的世界中的 z 轴，是屏幕上的 y 轴）。
这个问题很难解释。这是关于深度排序的。 见下图：
另一个条顶部的棕色条应位于灰色杆之后。 我现在使用最简单的画家算法形式，它只比较每个项目的 x、y、z 坐标。 我知道这个不正确的渲染是画家算法的一个著名问题。 如果这是一个平铺游戏，则可以将这些条分成 2 个并排的板块。然后可以按照深度的顺序绘制瓷砖。
但由于我试图在没有瓷砖的情况下创建它，我正在寻找一个非常具有挑战性的逻辑。
项目应该像 3D 对象一样呈现。我什至希望有以下行为：如果多个项目相交，则应绘制每个项目的可见像素，如下图所示：
主要问题是没有信息可以确定图像的哪些部分应该可见，以及必须如何切割它们。 我可以为每个图像创建一个深度蒙版，例如：
但由于画布的性能，这是不可能的，因为您必须逐字迭代地图中每个图像的每个像素。 第二个大缺点是你必须从服务器加载两倍的资源......
另一种解决方案可能是将所有图像切割成 1 像素宽的垂直条带。然后将每个条带处理为 1x1 像素的图块。然后我仍然在创建一个瓷砖游戏，购买瓷砖会很小，我仍然可以达到我的目标。但是这个解决方案也有缺点性能......因为每个图像都会被分成数百条，这些条是新的单独图像。
所以我正在寻找一个具有挑战性的解决方案。谁能帮我找到一种方法来定义图像的深度（或深度区域），以使画布的性能可以正确渲染？
【问题讨论】：
-
使用 THREE.js 或 WebGL 的树
-
我必须同意。试试threex.colliders。示例：jeromeetienne.github.io/threex.colliders/examples/basic.html
-
您可以从 2D 画布中获得合理的性能以实现真正的 3D 等距，但您会被深度排序所困扰，这可能会很痛苦。如果您在如何排列对象（排序多边形的排序组）方面比较清楚，则 javascript 标准数组排序可以进行合理的排序。要解决重叠的多边形，您需要在它们截取的地方对多边形进行切片。这个测试可能很慢，但同样，分组区域会有所帮助。如果您的多边形是轴对齐的，您将获得实时。一旦你离开轴，它就会减速。我支持 webGL，这就是 3D 的意义
-
但是如果我使用 Three.js / webGL，这意味着我的项目不再是单个图像，因为我必须为它们创建（纹理）3d 对象？
-
使用 webGL 时，您不必在 3D 中工作。 WebGL 绘制多边形并且非常快速地将 2D 图像绘制为 4 个顶点，从而形成一个小的三角形扇形。您仍然可以使用 zbuffer 并将角（顶点）设置为 z 距离。大多数 2D 游戏库使用 webGL 来渲染 2D 并在没有 webGL 时回退到画布。 github 上还有一个画布 API 的 webGL 实现，您可以对其进行修改以满足您的需求。
标签： javascript performance canvas rendering game-physics