🎮 引言：当卡卡颂遇见算法
想象一下，如果你想自动生成一个像《卡卡颂》一样逻辑严密的六边形地图，但规模要大得多、逻辑要更复杂——不仅有道路和城镇，还有 5 层海拔高度、河流、森林和悬崖。传统的噪声算法（如 Perlin Noise）往往难以处理这种严苛的逻辑边界。本文将带你走进 Wave Function Collapse (WFC) 的世界，看看开发者 Felix Turner 是如何解决这一挑战的。
—
🧩 核心机制：什么是波函数折叠？
WFC 并非真的量子物理，而是一个基于约束的瓦片放置算法。其核心流程如下：
- 混沌状态：每个网格单元初始都处于“叠加态”，包含所有可能的瓦片（30种类型、6个旋转方向、5个海拔）。
- 观察与塌缩：选择熵值最低（约束最多、可选余地最小）的单元格，随机确定一个合法状态。
- 约束传播：一旦某个格子确定，它会立即影响邻居，剔除不兼容的选项。这个过程像多米诺骨牌一样传播。
- 迭代：重复上述过程，直到整张地图“塌缩”成唯一确定的状态。
🏔️ 进阶挑战：多层海拔与逻辑约束
不同于普通的 2D 贴图，本项目引入了 5 层海拔系统：
- 海洋与陆地：处于海拔 0。
- 坡度与悬崖：用于连接不同海拔。低坡上升 1 级，高坡上升 2 级。
- 逻辑连贯性：3 级海拔的道路必须连接 3 级海拔的道路或相应的坡道。WFC 完美解决了这种“边缘匹配”的图论问题。
🏗️ 技术架构：从模块化到高性能渲染
1. 分治法解决“大地图崩溃”
单次运行 WFC 处理大型网格（如 4000+ 单元）极易陷入矛盾导致生成失败。作者采用了 模块化网格 (Multi-grid) 方案：
- 将地图拆分为 19 个小型六边形网格。
- 按环形顺序逐个求解，前一个网格的边缘成为后一个网格的固定约束。
- 数据亮点：500 次运行测试中达到 100% 的生成成功率。
2. WebGPU 与渲染优化
- BatchedMesh：利用 Three.js 的批处理技术，将 4100 多个单元格的渲染压缩至约 38 个 Draw Call，确保在移动端也能流畅运行。
- 视觉特效：集成了 GTAO 环境光遮蔽、景深、动态阴影以及基于着色器的动画水面。
📊 项目数据一览
| 指标 | 数值 |
|---|
| 瓦片种类 | 30 种 |
| 网格总数 | 19 个子网格 |
| 总单元格 | 约 4,100 个 |
| 生成耗时 | 约 20 秒 |
| 技术栈 | WebGPU / Three.js / TSL |
—
💡 结语
WFC 不仅仅是一个生成图片的工具，它为程序化地貌设计提供了一种具备“逻辑感”的解决方案。通过将大型复杂问题拆解为小型约束求解，我们可以创造出既宏大又精致的游戏世界。
🔗 项目演示与源码：hex-map-wfc