跳到正文
网页珍奇柜Web Curio

手绘地形生成器

Mapgen4,Amit Patel (Red Blob Games),2018 年

正在布展…

原作直展:这是 Amit Patel (Red Blob Games) 的原始作品,按 Apache-2.0(打包内 delaunator/flatqueue 为 ISC,其余依赖为 MIT) 许可证收录(版本 c1d8cb0)。按仓库 build.sh 从源码构建(不含 source map),原版只是嵌入文章的片段,这里套了一个最小的 HTML 外壳,代码未改。右侧选笔刷大小和海洋/水域/山谷/山脉,在地图上拖动作画,滑块调风向、降雨等。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步地图基于 Delaunay 三角网与其对偶 Voronoi 网格(dual-mesh)
  2. 第 2 步用户画笔修改高程约束,噪声叠加生成山脉细节
  3. 第 3 步按风向模拟水汽传输与降雨,再按坡度汇流生成河流
  4. 第 4 步WebGL 用斜投影渲染地形,并用屏幕空间轮廓线和色带模仿手绘风格
  5. 第 5 步繁重计算在 Web Worker 中进行,保证涂抹时的流畅

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Generate a jittered point set and build a Delaunay triangulation with its dual cells. Let a brush paint elevation targets into a low-resolution constraint texture, sample it per triangle and add noise for ridges. Sort cells along the wind direction to carry humidity, dropping rainfall on upslopes, then route water downhill to accumulate flow and draw rivers whose width follows flow. Render in WebGL with an oblique projection that offsets y by elevation, colour by elevation and moisture, and add outline and hatching passes for a hand-drawn look. Keep simulation in a worker.

档案

能不能拿来用

原作以 Apache-2.0 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Opened https://www.redblobgames.com/maps/mapgen4/ (200, title 'Mapgen4 Procedural Map Generator'); repo redblobgames/mapgen4 exists, licence Apache-2.0 via GitHub API.