波函数坍缩 地图生成-算法过程可视化（2D）

波函数坍缩（Wave Function Collapse）生成 ，是一个随机程序化的生成算法，比较经典的是用在游戏场景的地图生成。想要了解详细的解读可以参考《波函数坍缩算法》的无限城市... ，当前文章是WFC 2D版本的实现。

点击 查看可视化样例
这有一个可视化的程序，它可以 逐步、暂停 、回放 整个计算过程 ，以便于你理解 wfc 算法。

演示

基本概念

• Slot （孔位）

每个都对应地图上的一个确定坐标位置，初始状态，每个Slot 都包含成为任何一种图案（Model）可能性，这种可能性用"熵"来表示，经过坍缩最终成为一个确定的图案。

多种图案

• entropy （熵）

这里指的是信息熵，当值越大时，图案的可能性就越多，演示程序为了方便将展示"熵"值进行了单位化（范围 0-1）。

单位化 熵 值

• Model （图案模型）

具体的图案，包含有：图片资源、旋转角度、权重值（概率）、四条边信息。

model 信息

• EdgeInfo （边信息）

每条边都有connectId ，用于判断两条边是否能够相互连接。

边连接

伪代码

一.坐标区域中 获取当前熵最小(多个则随机)且还没坍缩完成的Slot;
二.如果无法获取有效的slot，表明所有slot坍缩完毕，则计算完成，退出计算;
三.将得到的Slot坍缩成具体的对象;
四.将以坍缩过的Slot开始，对周围邻居删除与Slot不可连接（边 连接ID 不匹配）的Model，邻居的熵值会降低，将以降熵了的Slot开始，再次重复;
五.传播计算过程出错，则进行状态回退;  //wfc 算法不是每次都成功的，需要进行回退（上一次缓存的状态），保障最终的成功;
六.传播完成后，缓存当前状态;
七.再从 步骤"一" 开始循环;

数据编辑器

• 编辑工具文档 : https://github.com/anseyuyin/wfc2D/blob/main/demos/2DMapEditor/README.md
• 素材编辑工具

WFC2D项目

波函数坍缩算法 2D 版本的实现。
github 链接 : https://github.com/anseyuyin/wfc2D
语言环境： typescript 、 javascript
项目包含了

• 素材编辑工具
• 资源查看样例
• 算法可视化样例