空间产品工程商业项目· MindCloudX AI 一代产品系
Explorer 多引擎渲染 SDK 与沉浸式浏览
沉浸式 3DGS 场景浏览端，内置渲染 SDK 采用严格分层，业务代码不接触引擎对象，PlayCanvas、Three.js、Babylon.js 可按需切换。
- React 19
- TypeScript
- Vite 6
- Zustand
- PlayCanvas
- Three.js
- Babylon.js
- 我的角色
- 渲染 SDK 分层设计，PlayCanvas 适配层与 viewer 改造，导航与碰撞能力
- 材料说明
- 项目资料与交付记录
- 渲染解耦层级（业务 → 控制器 → core → 适配层 → viewer）
- 5
- 渲染适配（PlayCanvas / Three.js / Babylon.js）
- 3
- 碰撞格式自适应（voxel.json / glb）
- 2
其余 1 项指标与口径
- 碰撞格式自适应（voxel.json / glb）
- 2
背景问题
3DGS 场景浏览需要漫游、热点导览、运镜回放与空间量测，并且要在多种渲染引擎之间做对比与备选。如果业务代码直接调用引擎 API，换引擎或升级引擎的成本会迅速放大。
约束
- 引擎能力随版本变化快，必须能在单点替换适配层。
- 同一套 UI 需要兼容 WebGL 与 WebGPU。
- 需要支持独立访问与嵌入宿主两种形态。
架构
React 业务模块
└─ RendererController（命令 / 事件）
└─ core（Viewer 契约、CollisionWorld、导航状态机 Orbit / Fly / Walk）
└─ 适配层（playcanvas 源码引用 · three · babylon）
└─ supersplat-viewer（PlayCanvas 渲染内核）
关键决策与取舍
- 严格分层：UI 只能通过控制器发出
setNavigationMode这类命令并监听事件，导航、碰撞与量测全部在 viewer 层实现，业务层无引擎依赖。 - 管线级 HDR：浮点渲染目标配合线性空间色彩分级与 ToneMapping 输出 SDR，不依赖物理 HDR 屏幕；WebXR 不可用时自动降级。
- 碰撞格式自适应：PlayCanvas 适配器读取 voxel 数据，Three 适配器读取 GLB 碰撞网格，由 URL 参数选择。
- 类型隔离：子模块以 composite 项目参与编译，类型检查使用缓存声明文件，避免上游宽松类型污染主工程。
- 供应链约束：依赖设置发布观察期，并使用冻结锁文件安装。
结果
- 渲染后端可以按参数切换，Benchmark 与备选方案共用同一套业务代码。
- 业务层对引擎版本升级基本无感，升级主要集中在适配层。
我的职责
- 渲染 SDK 的分层与 Viewer 契约设计。
- PlayCanvas 适配层、碰撞与导航能力的实现。
- 与平台宿主的协议对接。