前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载本文基于开源仓库 Fantasy-Map-Generator下称 FMG的官方版本更新文档 v1.5.0 Emblems Update深入讲解 v1.5.0 版本引入的三大核心能力为所有国家State、行省Province和城镇Burg自动生成纹章与旗帜的纹章生成系统、与独立纹章编辑器Armoria的双向集成流程以及配套的Burg 编辑界面与Speak Name 语音朗读功能。读完本文你将掌握纹章自动生成的智能逻辑文化选盾形、地域关联选图案、FMG 内纹章的重新生成/上传/下载/导出全流程以及浏览器语音合成在项目中的落地实现。一、更新背景从 8 个月沉寂到全新纹章系统v1.5.0 是 FMG 时隔 8 个月后发布的大型更新。这 8 个月的主要工作集中在一个全新工具上——独立的纹章生成与编辑工具Armoria。Armoria 的基础工作完成后其核心能力纹章生成引擎被反向整合进 FMG形成了本次更新的主体Emblems Update。在 FMG 的语境中Emblems纹章指 coat of arms盾形纹章即 coa以及部分旗帜。更新后地图上所有国家、行省和城镇都会自动生成专属纹章。这一功能并非随机拼凑而是具备一定的智能性详见第三节源码解析系统会为相邻地域生成相似纹章体现血缘与隶属关系、根据文化选择盾牌形状、识别港口与山地聚落以挑选更贴切的图案。作者也在原文档中坦承算法仍相当简单可能会生成不合适的纹章但整体效果令人满意。从当前仓库源码看纹章相关代码经过持续演进已相当完整核心渲染在 src/renderers/emblems/ 与 src/renderers/draw-emblems.ts生成逻辑在 src/generators/emblems-generator.ts交互编辑界面在 src/controllers/emblems-editor.ts。二、FMG 与 Armoria相互连接但各有分工原文档明确指出FMG 与 Armoria 两个工具相互连接但因性质不同并非无缝集成使用起来仍然很方便。二者的分工边界是FMG 中只能重新生成Regenerate不能编辑纹章FMG 提供一个按钮可将当前纹章原样打开到 Armoria中进行深度编辑或利用 Armoria 内置/自定义的 charges纹章图案创作新纹章在 Armoria 中编辑完成后需要下载 SVG 图片再上传回 FMG通用性方面FMG允许上传任意图片作为纹章使用。这种生成在 FMG、精修在 Armoria、成品回流 FMG的工作流源码中对应openInArmoria()函数src/controllers/emblems-editor.tsfunction openInArmoria(): void { const coa currentEl.coa !currentEl.coa.custom ? currentEl.coa : { t1: sable }; const json JSON.stringify(coa).replaceAll(#, %23); const url https://azgaar.github.io/Armoria/?coa${json}fromFMG; openURL(url); }实现要点若当前纹章不是自定义图片custom标记则把完整纹章对象序列化为 JSON经 URL 编码后拼接到 Armoria 地址的coa参数中Armoria 打开后即可加载完全相同的纹章若纹章是用户上传的自定义图片则回退到默认底色{ t1: sable }黑色底色避免数据无法表达URL 中的fromFMG标记来源。同时原文档预告了一个持续获益机制每当 Armoria 新增 charges纹章图案FMG 也会同步补充从而让纹章生成不断变得更有趣、更多样。三、纹章自动生成的核心逻辑源码级解析3.1 生成入口与血缘/隶属参数自动生成的核心实现在EmblemsGenerator.generate()src/generators/emblems-generator.ts其签名如下generate( parent: Emblem | null | undefined, // 父级纹章隶属的上级实体 kinship: number | null, // 血缘相似度 0~1 dominion: number | null, // 从属影响度 0~1 type?: string // 实体类型标签如港口、山地聚落等 ): HeraldicEmblem该设计正是原文档所述智能性的代码体现相邻/隶属区域纹章相似当传入父级纹章如行省隶属于国家且kinship概率命中时生成器会直接复用父级的底色t1、division分域乃至普通图形ordinaries与 charges 图案实现子承父业的视觉血缘类型标签影响图案type参数配合 src/data/emblems/typeMapping.ts 的映射表在 30% 概率下从与类型关联的图案集中挑选——这正是知道港口和山地聚落位置以选择更贴切纹章的实现机制。3.2 生成步骤底色 → 分域 → 普通图形 → 图案从源码可见一次生成的完整组合流程底色tincturegetTincture(field, ...)从字段色中选取若命中血缘则沿用父级底色普通图形ordinary约 93% 概率添加 charges约 36% 概率使用直线型普通图形ordinaries.straight并有 lined线条化变体分域division概率递进——无图形时几乎必然分域P(0.995)有图形时降为P(0.3)同时继承父级分域的概率为P(kinship - 0.1)图案charge先尝试继承父级图案P(kinship - 0.1)再尝试按类型映射30%最后从通用图案库中随机src/generators/emblems-generator.ts位置position依据普通图形数据positionsOn/positionsOff、分域产生的区域positions.divisions或图案自身建议位置综合确定并遵循纹章学惯例conventional vs complex positions自然色修正对天鹅、狮子等自然色图案natural强制使用其天然颜色避免出现紫色天鹅这类不合理配色。3.3 盾形选择与文化绑定纹章形状shield shape的选择与文化相关。生成器维护一个emblemShape属性且支持culture、random、state三种按实体解析的多样形制DIVERSIFORM_SHAPES见 src/generators/emblems-generator.ts。在编辑器重新生成时代码会取实体文化或其父级的文化调用Emblems.getShield(culture, state)来确定盾形src/controllers/emblems-editor.ts。这意味着同一张地图上不同文化圈的国家可以呈现不同风格的盾牌外形。四、FMG 内的纹章编辑器Emblems Editor实操4.1 打开方式与基本布局纹章编辑界面由 src/controllers/emblems-editor.ts 实现。通过点击地图上的纹章state/province/burg 三类按父元素id判断类型即可打开Edit Emblem对话框open()与defineEmblemData()。对话框包含预览区以svg viewBox0 0 200 200内嵌use引用渲染当前纹章实体选择器State / Province / Burg 三个联动下拉框可跨实体快速切换updateElementSelectors()负责联动刷新首都城镇以 标记Shape盾形选择器覆盖 8 大分组数十种盾形与旗帜外形。4.2 盾形Shape可选清单盾形选择器完整清单源码 src/controllers/emblems-editor.ts分组可选盾形BasicHeater、Spanish、FrenchRegionalHorsehead、Horsehead Edgy、Polish、Hessen、SwissHistoricalBoeotian、Roman、Kite、Old French、Renaissance、BaroqueSpecificTarge、Targe2、Pavise、WedgedBanner旗帜Flag、Pennon、Guidon、Banner、Dovetail、Gonfalon、PennantSimpleRound、Oval、Vesica Piscis、Square、DiamondFantasyFantasy1 ~ Fantasy5Middle EarthNoldor、Gondor、Easterling、Erebor、Iron Hills、UrukHai、Moria Orc注意若纹章为自定义上传图片盾形选择器会被禁用el.coa.custom判断见 src/controllers/emblems-editor.ts。4.3 尺寸与位置调整Size滑杆与数字输入双控件联动changeSize()范围 05、步长 0.1设为 0 可隐藏该纹章。单个纹章的尺寸存在coa.size字段覆盖类别的全局尺寸在菜单 Style ⭢ Emblems 中设置位置拖拽纹章在 SVG 图层上可拖拽定位makeEmblemsDraggable()与dragEmblem()拖拽结束会把偏移写入entity.coa.x/coa.y并重绘src/controllers/emblems-editor.ts。4.4 重新生成Regenerate点击随机图标按钮触发regenerate()基于父级纹章调用Emblems.generate(parent.coa, 0.3, 0.1, undefined)即血缘相似度 0.3、从属影响 0.1的保守参数——既保持与上级的隐约联系又给予足够变化随后保留原盾形、尺寸与坐标src/controllers/emblems-editor.ts。4.5 下载纹章Download下载面板toggleDownload()支持尺寸emblemsDownloadSize默认 500px范围 10010000px、步长 100三种格式src/controllers/emblems-editor.tsSVG无损矢量图可在浏览器或 Inkscape 打开质量最佳PNG无损位图透明背景JPG有损压缩位图白色实底。实现上先将 SVG 克隆并写入宽高尺寸getSVG()再经 Blob 生成 URL 下载位图则绘制到 canvas 后toDataURL(image/png|jpeg, 0.92)输出downloadRaster()src/controllers/emblems-editor.ts。4.6 上传任意图片Upload上传面板提供两个入口Any image任意图片createFileInput(image/*)以 data URL 方式内嵌Prepared SVG仅限.svg文件专门用于接收 Armoria 导出或经Optimize vector工具处理的 SVG。上传时会自动清理 Adobe Illustrator 内嵌数据、剥离 inkscape/sodipodi 命名空间属性再序列化为 base64 内嵌src/controllers/emblems-editor.ts。硬性限制文件大小不得超过500kBfile.size 500000会报错并提示推荐尺寸为 200×200px、体积 100kB 以内。界面中还提供了两个外部辅助工具链接用于压缩位图iloveimg与优化矢量图svgomg。上传后纹章被标记为{ custom: true }仅保留原尺寸/坐标字段盾形选择器随即禁用。4.7 导出纹章图库GallerydownloadGallery()会把当前地图所有国家、行省、城镇纹章渲染为一份独立 HTML 图库文档按国家 → 行省 → 城镇层级组织支持history.back()返回与锚点跳转#provinces_N/#burgs_N页脚注明由 FMG 生成且工具免费但图片可能有版权参见 Armoria 的 license。图库标题取地图世界名options.map.lore.namesrc/controllers/emblems-editor.ts。4.8 其他辅助功能Show area聚焦showArea()调用highlightEmblemElement()在地图上高亮该纹章对应的国家/行省/城镇数据同步编辑器订阅了subscribeToEmblemReconciliation当地图数据如文化、国家归属变更导致纹章重算时自动刷新拖拽状态src/controllers/emblems-editor.ts。五、新 Burg 编辑界面Burg Edit Screen本次更新的第二个重要变化是全新的Burg 编辑界面。原文档说明界面中大部分信息仅供查阅参考但看起来相当不错且对世界构建world-building很有帮助。该界面主要用于集中展示城镇的综合信息可从 src/controllers/burg-editor.ts 查看其实现适合在构建世界观时快速浏览聚落数据。注意它定位为参考型界面与可编辑的纹章编辑器性质不同。六、Speak Name浏览器语音朗读实现6.1 功能与用法v1.5.0 引入的另一个小功能是Speak Name一个小的喇叭图标点击后让浏览器朗读界面中显示的名称。原文档特别提示两点语言/嗓音voice可在Options选项中选择语音选项由操作系统与浏览器提供而非项目自身据作者观察Windows 上的 Chrome 提供最丰富的语音选项。6.2 源码实现核心实现为speak()工具函数src/utils/commonUtils.tsexport const speak (text: string): void { const speaker new SpeechSynthesisUtterance(text); const voices speechSynthesis.getVoices(); if (voices.length) { speaker.voice voices[Number(options.app.ui.speakerVoice)] ?? speaker.voice; } speechSynthesis.speak(speaker); };使用 Web Speech API 的SpeechSynthesisUtterance构造朗读任务通过speechSynthesis.getVoices()获取浏览器/系统提供的语音列表按下标索引选中用户配置的嗓音用户所选的语音下标存储在配置项options.app.ui.speakerVoice中其 Schema 定义为字符串类型the index into the browsers voice list, until one is picked见 src/components/options-schema.ts在用户选定前为空字符串语音选择界面在 Options 面板中动态加载系统语音列表src/components/options/tabs/options-tab.ts。七、总结本次更新的完整能力清单v1.5.0 Emblems Update 为 FMG 带来的能力可归纳如下全地图自动纹章国家、行省、城镇三类实体自动生成盾形纹章或旗帜生成算法兼顾文化盾形、血缘相似、类型贴切港口/山地等FMG Armoria 双工具工作流FMG 重新生成 → Armoria 深度编辑通过coaJSON 参数无缝跳转→ SVG 下载回流 FMG或直接上传任意图片≤500kB纹章编辑器盾形切换数十种可选、尺寸调整05、拖拽定位、按实体联动选择、图库 HTML 导出Burg 编辑界面面向世界构建的城镇信息参考面板Speak Name基于 Web Speech API 的名称朗读语音由系统与浏览器提供可在 Options 中配置。对于希望深入源码的读者可沿以下路径继续探索生成算法 src/generators/emblems-generator.ts、编辑器交互 src/controllers/emblems-editor.ts、渲染管线 src/renderers/emblems/renderer.ts 与 src/renderers/draw-emblems.ts、类型定义 src/types/emblems.ts、图案与盾形数据 src/data/emblems/以及本次更新官方说明 docs/updates/v1.5.0/v1.5.0 - Emblems Update.md。赞分享前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载相关推荐如何构建专业级纹章生成系统Fantasy-Map-Generator徽章渲染引擎技术实现深度解析如何构建专业级纹章生成系统Fantasy Map Generator徽章渲染引擎技术实现深度解析 Fantasy Map Generator是一款功能强大的W前端图形学3D渲染Fantasy-Map-Generator 徽章与纹章系统完全指南打造中世纪风格的完美纹章 ️Fantasy Map Generator 是一个强大的Web应用程序专门用于生成高度可定制的地图。这款工具最令人印象深刻的功能之一就是其完整的徽章与纹章系统前端图形学3D渲染Fantasy-Map-Generator v1.61.0 更新解析折线尺Polyline Ruler数据模型重构与 Kiwiroo 海洋纹理Fantasy Map Generator v1.61.0 更新解析折线尺Polyline Ruler数据模型重构与 Kiwiroo 海洋纹理 本篇基于前端图形学3D渲染上一篇fSpy-Blender 终极拆解一张照片如何在几分钟内重建出透视精准的 3D 场景下一篇IINA播放器完整上手指南macOS免费视频播放器的终极选择创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考