创建随机2D凹面多边形景观JavaScript

Question

我正在用JavaScript（http://www.isogenicengine.com/demos/1.1.0/lander/）编写一个简单的月球着陆器克隆，而不是只有高低的基本景观，我想要一种算法来生成随机洞穴般的空间。给定与[0,0,1920,1200]一起使用的矩形区域，算法应该能够生成如下图所示的内容。理想情况下，洞穴区域的任何“入口”都应该有一个设定的宽度，以便着陆器可以“进入”它。

我认为这可能是不可能的，我可以只绘制一堆像上面那样的图像并将像素数据转换为粗糙的多边形数据，但随机生成的水平会更酷！ / p>

对于超级铁杆奖励积分，能够指定有多少洞穴状结构的能力会更加出色。

算法的输出是一个点数组，每个点都是一个包含x和y属性{x：val，y：val}的对象，当你在当前点和下一个点之间依次绘制线条时，多边形。

如果某人有类似的JavaScript实现，那么也会有很多帮助！

Answer 1

首先了解气泡图在架构中使用的内容。它是一个空间的拓扑图，气泡作为空间和线条来代表通道。我没有找到任何一个很好的网页可以快速推荐，但进行图像搜索会产生很多例子。

气泡图可以被认为是以气泡为顶点的图形。在您的示例中，将“天空”（包括顶边的blob）建模为顶点。洞穴是另一个顶点，入口是边缘。从这个角度来看，很容易产生像你想要的那样洞穴般的复杂性。

接下来的技巧是将其变成几何体。从本质上讲，你想要从图形的骨架中推出并在玩家可以导航的地方留出空白。同时，你要确保这些空隙不会向外挤出太薄，否则会消除墙壁。因此，您还需要对实体区域进行建模，并使用dual graph完成。双重图形位于原始的“下方”，在这种意义上，边缘交叉代表冲突，而有利于空洞而不是固体。

总结：（1）制作具有所需功能的拓扑图。 （2）为图形创建几何体，为每个顶点指定位置以及为每条边指定路径。 （3）构造双图，并指定其几何。 （4）通过向外生长每个图形来填充与每个图形相关的空间，解决冲突，而不是堵塞。

您可能想要说服自己，最终几何体的周边列表可以通过图形的半边缘遍历生成，就像用一只手在墙上走迷宫一样。

Answer 2

如果您有兴趣，可以使用行进方块将标量值的2D字段（可能从Perlin或Simplex Noise获取）转换为一组边线。当然，最终看起来将取决于您如何获得2D场标量值（如何操纵Perlin或Simplex噪声）。

This是我能找到的最好的网站。 （它没有像Marching Cubes那样有详细记录，它是3D双胞胎）

实际上，它上面的Wiki页面非常好。