跳到正文
网页珍奇柜Web Curio

高斯泼溅查看器

splat (WebGL Gaussian Splat Viewer),Kevin Kwok (antimatter15),2023 年

正在布展…

原作直展:这是 Kevin Kwok (antimatter15) 的原始作品,按 MIT(自带的程序化场景 scene.splat 由本柜生成,CC0) 许可证收录(版本 ba182b5)。查看器代码原样收录;原版默认从 huggingface 流式加载约 30 MB 的真实拍摄场景,这里换成本柜用脚本生成的浮空小岛(樱花树、水潭、瀑布),并修补了缺少 content-length 时的加载。拖动旋转,方向键/WASD 漫游,也可拖入自己的 .splat 文件。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步每个高斯点存储位置、缩放、旋转四元数、颜色和不透明度,压缩成紧凑二进制
  2. 第 2 步Web Worker 根据相机视线方向对所有点做深度计数排序
  3. 第 3 步每个点以实例化四边形绘制,顶点着色器把 3D 协方差投影成屏幕上的 2D 椭圆
  4. 第 4 步片元着色器按高斯衰减计算 alpha,从后往前混合
  5. 第 5 步文件通过流式 fetch 分块读取,边加载边渲染

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Load a binary array of splats where each entry stores position, scale, rotation quaternion, RGBA colour. In a worker, compute each splat's 3D covariance from scale and rotation, and on every camera change sort splat indices by view depth with a 16-bit counting sort, then post the order back. Render one instanced quad per splat; in the vertex shader project the covariance with the Jacobian of the perspective projection to get a 2D ellipse and size the quad to about three sigma. In the fragment shader compute alpha as opacity times exp(-0.5 d^T Σ^-1 d) and blend back to front with premultiplied alpha.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Opened https://antimatter15.com/splat/ (200, title 'WebGL Gaussian Splat Viewer'); repo antimatter15/splat exists, licence MIT via GitHub API.