2025 - 2026 年 PlayCanvas 博客汇总：揭秘将高斯模糊图转化为电子游戏的详细实践

近期文章2026 年文章有《将高斯模糊图转化为电子游戏》《SuperSplat 新特性可下载的模糊图、许可证和社交链接》《SuperSplat 新特性行走模式、流式细节层次和便捷上传》《使用 SuperSplat Studio 构建高斯模糊图体验》《人工智能驱动的 3DGS 产品可视化——Voxelo 开发者聚焦》2025 年文章有《全新 PlayCanvas Visual Studio 扩展》《PlayCanvas 开源高斯模糊图的 SOG 格式》《用于电子商务的高斯模糊图——Reflct 开发者聚焦》《PlayCanvas 编辑器前端现已开源》《推出 SplatTransform3D 高斯模糊图的终极命令行工具》《PlayCanvas 引入 ESM 脚本》《PlayCanvas 采用 SOGS 实现 20 倍 3DGS 压缩》《SuperSplat 3DGS 查看器现已开源》《使用 SuperSplat 2.2 将高斯模糊图渲染为视频》《使用 SuperSplat 2.0 发布你的高斯模糊图》。将高斯模糊图转化为电子游戏2026 年 4 月 22 日阅读时长 12 分钟作者 Iakov Sumygin 是软件工程师。高斯模糊图能免费提供 “照片级真实感” 环境但模糊图只是有方向的斑点云无三角形、碰撞器、导航网格和灯光角色放进去会直接穿过墙壁。本文介绍解决这些问题构建的演示项目可 在浏览器中体验使用 WASD 移动鼠标瞄准左键射击可 查看项目完整的 PlayCanvas 项目公开文中提到的脚本都在其中可阅读、分叉或重新混合。该场景由 Christoph Schindelar 对真实废弃场所进行精美室内扫描。在其模糊图基础上添加了物理碰撞器、烘焙照明探针网格、Recast 导航网格、八个不同个性的 NPC 以及经典第一人称射击游戏循环且都能在浏览器标签页运行。构建过程步骤 1从 SuperSplat 下载模糊图编写代码前需场景SuperSplat 上标记 “可下载” 的模糊图作者按知识共享许可发布可将 .ply 或 .sog 文件下载到 PlayCanvas 项目。所选扫描场景光照、杂物和比例有电影感无需额外艺术指导。可前往 预筛选的可下载视图 挑选模糊图。步骤 2将模糊图转换为流式 SOG 格式后续操作依赖 splat-transform 这个 PlayCanvas 开源的转换模糊图的命令行工具利用它实现流式细节层次后续还用于生成碰撞网格。场景含数百万个高斯模糊图若作为单个 .sog 资产传输对手机或网络慢的用户不友好。解决办法是 **流式细节层次**SuperSplat 和 splat-transform 输出含多个 SOG 块的文件夹及清单文件运行时按需加载。Scripts/streaming-lod.mjs 与相机挂钩游戏开始前让运行时加载玩家周围块避免战斗中画面突然加载。若模糊图含数百万个高斯模糊图可将其导出为流式细节层次让查看器流式加载可通过 SuperSplat 导出对话框操作参考 流式细节层次文档。还可执行 npm install -g playcanvas/splat-transform。步骤 3生成碰撞网格模糊图无表面物理引擎对其无视无法在上面行走等。此时用 splat-transform使用 -K 或 --collision-mesh 标志对模糊图体素化处理从种子位置填充可导航内部区域输出密封的 .collision.glb 文件可作为 mesh 碰撞器导入 PlayCanvas。splat-transform scene.ply \ --seed-pos 0,1,0 \ --voxel-params 0.05,0.1 \ --voxel-carve 1.6,0.2 \ -K \ scene.sog此命令产生两个输出scene.sog 是单文件压缩的模糊图便于快速迭代最终发布用步骤 2 的流式文件夹scene.collision.glb 是基于体素的网格贴合真实几何形状。将两文件导入 PlayCanvas 项目把 GLB 文件附加到带 **Collision** 组件网格和 **Rigid Body** 组件静态的不可见实体上玩家有地面子弹可与墙壁碰撞NPC 有行走地面无需建模和清理。可运行 splat-transform scene.ply -K scene.sog将生成的 .collision.glb 文件作为静态网格刚体导入项目。步骤 4从模糊图烘焙亮度网格模糊图的高斯模糊点含烘焙好的光照信息场景光照固定且效果好。但玩家武器模型、NPC 士兵和拾取物品是普通基于物理渲染PBR网格不继承模糊图光照会格格不入。不想重新光照处理希望运行时能随时询问地图任意点亮度应用到常规网格。Scripts/probes.js 工作原理获取指定地面实体的轴对齐边界框AABB在地面上方 1 米处构建 1 米间隔的探针位置网格创建 16×16 的小离屏 RenderTarget 和 90° 视场角FOV的相机相机只渲染 World 层模糊图不包括角色、 HUD 和武器模型每个探针渲染立方体 6 个面X、-X、Y、-Y、Z、-Z用 readPixels 读取 16×16 的 RGBA 输出按标准的 Rec. 601 权重计算亮度将亮度值存于 gridDepth × gridWidth 的二维数组在探针位置生成小调试球体发光强度等于亮度值可看到场景光照场所有探针处理完用 console.log(JSON.stringify(this.probeJSON)) 输出结果复制保存为 lightness.json作为 JSON 资产附加到项目删除探针实体。烘焙时调试球体在对应面立方体渲染完成并算出平均亮度后出现明亮球体表示光照好区域暗淡球体在角落或遮蔽处。写入 JSON 数据前可通过球体热力图了解场景光照。运行时动态角色脚本武器、NPC、拾取物品加载 lightness.json在世界位置对网格双线性采样映射到合适曝光范围调用 meshInstance.setParameter(exposure, value)从明亮中庭走进昏暗走廊手部会自然变暗开火时泛光灯照亮周围模糊图。─── Probes: baking 392 probes (28 x 14) ─── Probe 1/392 lightness: 0.4821 Probe 2/392 lightness: 0.4733 ...整个烘焙过程约 15 秒生成的 JSON 文件约 40 KB无需昂贵运行时探针或延迟重光照只需查找表。步骤 5使用 PlayCanvas VS Code 扩展编写代码未在 PlayCanvas 网页编辑器代码面板编写代码而是用 **PlayCanvas VS Code 扩展**该扩展也可在 Cursor 中使用编辑代码时可与 Claude 结对编程。保存文件编辑器检测更改重新加载启动标签页测试整个过程只需几秒。演示项目中大部分游戏逻辑脚本如 character-controller.js、anim-states.js、npc-ai.js、probes.js在 Cursor 中迭代完成。可安装 PlayCanvas VS Code 扩展若常用 VS Code 或 Cursor它会让 PlayCanvas 成普通开发环境。步骤 6使用 PlayCanvas GitHub 管理项目版本PlayCanvas 提供官方 **版本控制** 功能可解决 “昨天做了哪些更改如何回滚” 的问题。也可在本地同步的 PlayCanvas 项目根目录用 GitHub通过 VS Code 扩展别忘了添加 .pcignore 文件以免 .git 文件夹同步到云端。结合 VS Code 扩展像使用普通代码仓库。若不小心破坏 NPC 的 AI执行 git revert 可恢复到昨晚正常运行的版本。开始项目前将 GitHub 仓库与 PlayCanvas 项目关联遇到 AI 编码工具提交糟糕重构时会有用。步骤 7从碰撞网格生成导航网格NPC 无法在模糊图上路径规划需要导航网格。运行时用 **recast-navigation**通过动态导入直接从 esm.sh 加载无需打包工具代码如下const recast await import(https://esm.sh/recast-navigation); await recast.init(); const imported recast.importNavMesh(new Uint8Array(navmeshBuffer));为生成 navmesh.bin 二进制文件将步骤 3 生成的 scene.collision.glb 文件输入基于 Recast 的离线生成器。碰撞网格代表 “可以行走的坚实地面”Recast 对其光栅化处理过滤可行走区域并构建导航多边形只需几秒。正在将生成器整理成独立库很快在 GitHub 发布方便 PlayCanvas 项目将碰撞 GLB 文件转换为导航网格二进制文件。想获取信息可关注 X 账号。在演示项目中按 **N** 键可切换调试覆盖层显示可行走多边形、代理位置和当前路径。即将推出库发布后只需一行命令完成转换npx glb-to-navmesh scene.collision.glb navmesh.bin步骤 8使用行为树和个性赋予 NPC 智能NPC 是项目中最感兴趣的部分。演示中每个士兵由经典 **行为树** 驱动这种概念二十年前在《光环 2》流行2026 年仍是 AAA 级游戏 AI 默认选择。Scripts/npc-ai.js 提供四个基本原语sequence(...children) // 所有子节点必须成功 selector(...children) // 第一个非失败的子节点获胜 condition(pred) // 叶子节点返回 true 或 false action(fn) // 叶子节点返回 success | failure | running每个 NPC 的智能通过组合原语根据 **个性** 参数化构建return selector( sequence(isDead, autoRespawn), sequence( isAlive, selector( sequence(isReloading, stopShooting), sequence(ammoEmpty, doReload), ...(traits.healPriority 0.4 ? [sequence(hpBelow(retreat), hasPickupsNearby, goToPickup)] : []), ...(traits.lootPriority 0.7 ? [sequence(hasPickupsNearby, goToPickup)] : []), ...(traits.retreatThreshold 0.3 ? [sequence(hpBelow(retreat), retreat)] : []), ...(traits.aggression 0.2 ? [sequence(hasEnemiesInRange(range), engageEnemy)] : []), guard ) ) );生成八个不同个性的 NPC如 **Sgt. Havoc**激进主动进攻、**Ghost**谨慎注重治疗、**Captain Valor**英勇、**Strategist**战术型、**Chaos**随机性为 0.8难以预测。