ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Fantasy-Map-Generator 预定义高度图(Pre-defined Heightmaps)完全指南:内置真实世界地形、使用与自定义扩展

Fantasy-Map-Generator 预定义高度图(Pre-defined Heightmaps)完全指南:内置真实世界地形、使用与自定义扩展 前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载本文围绕 Azgaars Fantasy Map Generator v1.73.2 引入的**预定义高度图Pre-defined Heightmaps**功能展开它让用户可以像选择模板一样直接挑选基于真实世界数据制作的高度图如地球、欧亚大陆、地中海等一键生成形态贴近真实地理的新地图。读完本文你将掌握内置高度图库的完整清单、在界面中的操作入口、底层图像转高度图的实现原理、与高度图模板机制的区别以及如何按官方规则自建高度图并入自己的地图。功能由来为什么需要内置高度图在 v1.73.2 之前社区里经常有人问去哪里找一个能生成地球或指定区域地图的 seed。虽然项目一直支持导入图片并转换为高度图Import Heightmap但导入 → 转换 → 生成这条链路对新用户并不直观很多人根本不知道存在这个功能。开发者因此在生成器内部直接内置了一批预定义高度图其使用方式与已有的高度图模板heightmap templates完全一致选择高度图 → 创建新地图。这批图片由作者基于公开的真实世界地理数据制作数据源为 tangrams.github.io即tangrams/heightmapper在线地形渲染工具因此每一张都是可考证的真实地貌而非随机噪声。从当前仓库的代码结构看这一功能的数据层、UI 层与生成层是分离的数据清单src/data/precreated-heightmaps.ts图片资源public/heightmaps/选择对话框src/controllers/heightmap-selection.ts核心转换逻辑src/generators/heightmap-generator.ts内置高度图库23 张真实世界地形一览precreatedHeightmaps是一个以资源文件名key为键的注册表每个 key 精确对应public/heightmaps/key.png这张灰度高度图并附带一个用于 UI 展示的namekey显示名称nameidafrica-centricAfrica Centric0arabiaArabia1atlanticsAtlantics2britainBritain3caribbeanCaribbean4east-asiaEast Asia5eurasiaEurasia6europeEurope7europe-accentedEurope Accented8europe-and-central-asiaEurope and Central Asia9europe-centralEurope Central10europe-northEurope North11greenlandGreenland12hellenicaHellenica13icelandIceland14indian-oceanIndian Ocean15mediterranean-seaMediterranean Sea16middle-eastMiddle East17north-americaNorth America18us-centricUS-centric19us-mainlandUS Mainland20worldWorld21world-from-pacificWorld from Pacific22注册表末尾还通过window.precreatedHeightmaps precreatedHeightmaps暴露到全局这是为兼容旧版 JS 调用保留的桥接见 src/data/precreated-heightmaps.ts。以world为例这张基于真实地球数据制作的全景高度图直观展示了功能的核心产出——真实大陆轮廓与海拔分布europe则体现了同一机制在区域尺度上的效果适合生成欧陆风格奇幻世界图片为public/heightmaps/目录下的原始灰度数据文件生成地图时即由渲染管线按此灰度采样海拔。宽高比的现实约束v1.73.2 更新说明中特别强调了一个限制这些高度图是按常见屏幕比例约 2:1制作的。当时作者的原话是目前我们只能假设大多数屏幕是 2:1 或类似比例否则高度图会被扭曲heightmaps will be screwed。这个约束在代码中得到了印证转换时图片会被强制拉伸到与目标网格完全一致的尺寸见下文图像转高度图的实现原理因此如果新建地图的长宽比与源图差异过大大陆形态就会在水平或垂直方向被明显拉伸变形。建议做法在选项面板中保持地图比例为 2:1例如默认的 960×540或选择与目标比例相近的高度图。使用指南三步选好高度图并生成新地图预定义高度图与高度图模板共用同一个选择入口位置在Options选项面板 → Heightmap高度图行。该行的下拉框默认是pointer-events: none不可直接操作点击该行任意位置会打开完整的选择对话框相关绑定见 src/components/options/tabs/options-tab.ts 中templateInputContainer的点击监听。高度图选择对话框Select Heightmap对话框由 src/controllers/heightmap-selection.ts 中的HeightmapSelection.open()渲染包含两个并排的网格区与一组预览选项Heightmap templates高度图模板每个模板用固定种子渲染一张预览图模板特性是每次生成结果不同但风格相似见data-tiptemplate provides unique, but similar-looking maps on generation。Precreated heightmaps预定义高度图按precreatedHeightmaps注册表顺序渲染 23 张缩略图其特性是每张地图的形态完全一致it will be the same for each map——因为它直接来自真实数据的采样结果不随种子变化。Options预览选项Redraw preview重绘全部预览缩略图Render ocean heights是否绘制水体单元的海拔默认关闭Color scheme预览使用的配色方案来自heightmapColorSchemesEdit Templates打开模板编辑器会清空当前地图需二次确认Import Heightmap打开图片转换器同样会清空当前地图。对话框底部有三个动作按钮Cancel关闭对话框不做任何修改Select把所选高度图的 key 写入options.generation.template并通过Pins.set(template, …)记录供下一次生成使用New Map在 Select 的基础上用当前种子立即触发regeneratePrompt({ seed, graph, ...config })即马上用所选高度图生成一张新地图。交互细节点击任意缩略图即选中setSelected高亮该卡片模板卡片右上角的旋转图标可单独重新生成该模板的预览regeneratePreview会更换该卡片的种子。关键调用链Options 面板点击 Heightmap 行 └─ Controllers.HeightmapSelection.open() ├─ 读 options.generation.template 同步选中态 ├─ 按 graphConfig 设置预览宽高比 --preview-aspect-ratio ├─ 模板区: HeightmapGenerator.fromTemplate(graph, key, config) → drawHeights() 渲染预览 └─ 预定义区: HeightmapGenerator.fromPrecreated(graph, key, config) → drawHeights() 渲染预览 └─ 点击 New Map └─ Options.set(generation.template id) Pins.set(template) └─ regeneratePrompt({ seed, graph, ...config }) → 生成新地图测试用例 src/controllers/heightmap-selection.test.ts 验证了预览高度与最终生成高度完全一致选择 1600×900 / 800×600 等不同尺寸与点数后对话框内drawHeights收到的最后一份预览高度数组与generate()之后grid.cells.h的逐元素结果相等expect(Array.from(generated)).toEqual(previewHeights)保证所见即所得。图像转高度图的实现原理从 PNG 灰度到海拔数组预定义高度图的核心转换发生在 src/generators/heightmap-generator.ts 的HeightmapModule.fromPrecreated()第 592-623 行流程如下建 Canvas1 像素对应 1 个网格单元以目标网格cellsX × cellsY为画布尺寸创建 canvas加载图片并强制重采样ctx.drawImage(img, 0, 0, cellsX, cellsY)把源 PNG无论原始分辨率拉伸到网格尺寸随后getImageData逐像素读出 RGBA灰度转海拔调用私有方法getHeightsFromImageData()第 583-590 行对每个单元取红色通道作为亮度lightness imageData[i * 4] / 255再套用非线性功率曲线提升暗部对比度const powered lightness 0.2 ? lightness : 0.2 (lightness - 0.2) ** 0.8; this.heights[i] minmax(Math.floor(powered * 100), 0, 100);即亮度低于 0.2海洋/近海保持线性映射高于 0.2陆地则按 0.8 次幂压缩使中等海拔的陆地获得更丰富的细节层次最终归一到0–100的海拔范围。写回网格graph.cells.h heights即完成高度图落地后续生成管线气候、水系、生物群系等全部基于这套海拔工作。其中fromPrecreated返回 Promise图片异步加载并有onerror兜底报错Cannot load heightmap id。而generate()的统一入口第 557-565 行会先以Math.random Alea(options.map.seed)重置 PRNG再根据id in heightmapTemplates判定走模板脚本还是图片路径最后clearData()释放占用的预览网格。与高度图模板Templates的本质区别理解二者差异是正确选型的前提维度高度图模板Templates预定义高度图Precreated数据来源内置脚本语言描述的步骤序列Hill/Pit/Range/Trough 等 10 种工具真实世界灰度 PNG 图片生成结果同模板 不同种子 → 不同但风格相似同图 → 每张地图形态固定一致是否受种子影响受种子影响AleaPRNG 驱动不受种子影响纯图像采样实现函数fromTemplate()逐行解释脚本fromPrecreated()Canvas 采样可编辑性可在Edit Templates中直接改脚本需通过Import Heightmap导入自定义图片模板的脚本语法每个工具一行工具 参数定义在 src/data/heightmap-templates.ts例如volcano模板Hill 1 90-100 44-56 40-60 Multiply 0.8 50-100 0 0 Range 1.5 30-55 45-55 40-60 ...每种内置模板还带probability权重用于随机生成时按权重挑选14 个模板合计构成随机世界的多样性来源——而预定义高度图不参与随机挑选始终由用户显式指定。自建高度图官方制作流程与导入public/heightmaps/import-rules.txt给出了作者制作这批高度图时的完整操作规范按此流程可以做出海拔比例正确明暗对应真实地形的自定义高度图打开 https://tangrams.github.io/heightmapper关闭自动曝光Toggle off auto-exposure——避免亮暗被算法重映射设置最高海拔为 2000max elevation设置最低海拔为 -500min elevation框选目标区域渲染导出图片可选把图片缩放到较小尺寸如 500×300 px——高分辨率并不会被利用因为生成时会重采样到网格尺寸小图反而节省加载与处理开销。导出后即可在Select Heightmap 对话框 → Import Heightmap导入这张图片该入口会先弹出确认Opening the tool will erase the current map转换逻辑与内置图完全一致——这正是导入 → 转换 → 生成那条旧链路也是内置功能的实现基础。种子、模板与可复现性预定义高度图与种子机制配合时有一个值得注意的规律种子决定的是种子点分布、水系、国家与文化等随机内容而大陆轮廓完全由高度图锁定。因此同一张高度图 不同种子 → 共享同一套真实海岸线但国家、文化、城市各不相同高度图的 key 会作为template选项被写入地图历史与 URL 参数Pins机制见 src/components/pins.ts通过 src/components/seed.ts 的restoreSeed()可从Seed history对话框还原种子 尺寸 模板组合从而精确复现地图。在选项面板中Heightmap下拉框的显示名称由syncOptionInputs()统一处理heightmapTemplates[id]?.name || precreatedHeightmaps[id]?.name || idsrc/components/options/tabs/options-tab.ts即模板与预定义高度图共享同一选项槽位二者的 key 互不冲突模板 key 如volcano预定义 key 如world。小结与扩展阅读预定义高度图是 v1.73.2 对想生成真实世界地图需求的一站式回应数据侧内置 23 张真实地形灰度图交互侧与模板共用Select Heightmap对话框实现侧通过 Canvas 重采样 功率曲线映射把图片转化为 0–100 的海拔数组。它绕过了先找图再导入的隐性门槛也让固定地理形态的创作如复原地球、欧陆、地中海世界变得可复现、可分享。相关资源与源码索引高度图资源目录public/heightmaps/高度图注册表src/data/precreated-heightmaps.ts模板注册表脚本语法src/data/heightmap-templates.ts转换与生成实现src/generators/heightmap-generator.ts选择对话框 UIsrc/controllers/heightmap-selection.ts选择对话框测试src/controllers/heightmap-selection.test.ts自建高度图规范public/heightmaps/import-rules.txt高度图编辑器含模板编辑与图片转换src/controllers/heightmap-editor.ts种子与历史恢复src/components/seed.ts赞分享前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载相关推荐10个技巧快速掌握Fantasy-Map-Generator自定义地图样式终极指南10个技巧快速掌握Fantasy Map Generator自定义地图样式终极指南 Fantasy Map Generator是一款强大的开源Web应用程序前端图形学3D渲染Fantasy Map Generator Vignette 图层完整指南SVG 遮罩原理、六种官方预设与自定义实战v1.95.0Fantasy Map Generator Vignette 图层完整指南SVG 遮罩原理、六种官方预设与自定义实战v1.95.0 导读 Fantasy前端图形学3D渲染Fantasy Map Generator自定义模块开发终极指南如何创建个性化地图生成器Fantasy Map Generator自定义模块开发终极指南如何创建个性化地图生成器 Fantasy Map Generator是一款功能强大的Web应用前端图形学3D渲染上一篇Python开发者的MediaPipe神器从WebRTC视频流到手势识别全攻略下一篇Agent Substrate 中的 PostgreSQL 线协议底层构建深入解析 pgx v5 pgio 字节序编码包创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表