学习路径
Web 展示与交互
在浏览器里把高斯泼溅跑起来：渲染器、引擎、格式与产品化
难度
进阶
时长
约 3 小时
面向
希望把高斯模型嵌入网页或产品的前端工程师与互动设计师
前置准备
- 熟悉 JavaScript / TypeScript 与现代前端构建工具
- 对 Three.js 或同类 3D 引擎有基础认知
- 已有可加载的 .ply / .splat / .spz 资产或链接
学完之后你能
- 理解 Web 端高斯渲染器的演进谱系与各自定位
- 能在 Three.js 与 PlayCanvas 中独立完成场景嵌入与镜头控制
- 看懂 ply / splat / spz / sog 等格式的取舍并能做转换
- 为百万级高斯场景设计 LOD 与流式加载策略
- 掌握 SuperSplat 与 WebXR 路径下的产品化嵌入流程
模块
七个模块，循序渐进
- Module 01文章25 分钟
Web 渲染器全景：从 antimatter15 到 Spark
Web 端高斯渲染从一份个人 demo 起步，几年间分裂成多条路线。本模块梳理从 antimatter15 的极简实验，到 Spark、GaussianSplats3D 等社区主线渲染器的能力差异。
本模块要讲什么
- 01antimatter15 的极简单页 demo
- 02Spark：以可扩展架构对标的开源项目
- 03Three.js 生态里的 GaussianSplats3D
- 04选型框架：性能、生态与维护活跃度
- Module 02教程35 分钟
Three.js 集成实战：场景嵌入与控制
把高斯资产塞进 Three.js 远比加载一个 GLB 复杂。本模块以 GaussianSplats3D 与 gsplat 为底，演示从 Loader 选型、坐标系对齐到镜头控制的完整流程。
本模块要讲什么
- 01Loader 选型：原生还是社区扩展
- 02坐标系对齐：右手坐标的常见踩坑
- 03OrbitControls 与一阶相机控制
- 04调试技巧：可视化包围盒与帧率监视
- Module 03教程30 分钟
PlayCanvas 与 Babylon.js：引擎级支持
当渲染器升级成「引擎一等公民」，开发体验会发生质变。本模块对比 PlayCanvas 与 Babylon.js 对高斯泼溅的官方支持深度，以及它们在场景图、物理与编辑器上的差异化定位。
本模块要讲什么
- 01PlayCanvas 对 .ply / .splat 的原生支持
- 02Babylon.js 的 SPZ Loader 与 PBR 协同
- 03在引擎里组合高斯与传统网格
- 04选型决策：项目体量与团队既有栈
- Module 04文章30 分钟
文件格式与压缩：ply / splat / spz / sog
高斯模型的文件格式像快递盒：选错了一开始就是劣势。本模块比较 ply 的可读性、splat 的紧凑、spz 的压缩，以及实验性 sog 的取舍，并演示用 splat-transform 做无损互转。
本模块要讲什么
- 01ply：可读但庞大的元老格式
- 02splat：紧凑二进制的事实标准
- 03spz：Niantic 主推的压缩管线
- 04sog 实验：实时流式的下一站
- Module 05视频30 分钟
LOD 与流式加载：百万高斯实战调度
百万级高斯的真正挑战不是渲染，而是「让浏览器先打开再说」。本模块讲解 LOD 切片、视锥剔除、流式加载与 Scaffold-GS 等结构化方案如何把首屏拉到可接受的量级。
本模块要讲什么
- 01LOD 切片与按需加载的工程取舍
- 02视锥剔除与背面 culling 的常见实现
- 03Scaffold-GS 的锚点结构对加载的友好度
- 04Luma 的 Web Library 在大场景里的表现
- Module 06教程30 分钟
编辑器嵌入与产品化：SuperSplat / WebXR
把高斯做成产品，最后一公里在编辑器与跨设备分发。本模块演示如何用 SuperSplat 完成最终修订、把场景接入 WebXR，并借助 StorySplat 等模板做轻量产品化封装。
本模块要讲什么
- 01SuperSplat 编辑器的常用快捷与导出参数
- 02WebXR 集成：Quest / Vision Pro 的现实差距
- 03StorySplat：把场景包装成可分享链接
- 04嵌入网页 / 微信小程序的兼容性清单