splat - WebGL驱动的实时3D高斯泼溅渲染器

这是一个基于 WebGL 的实时渲染器实现,用于 3D Gaussian Splatting for Real-Time Radiance Field Rendering。这是一种最近开发的从一系列照片生成可导航的逼真3D场景的技术。由于本质上是点云渲染的扩展,因此使用普通图形硬件进行渲染非常高效,与之前的类似技术如 NeRF 相比。

您可以在这里尝试使用。

控制

移动(方向键)

左/右方向键平移左右
上/下方向键前后移动
空格跳跃

镜头角度(WASD)

A/D 左右转动镜头
W/S 上下倾斜镜头
Q/E 顺/逆时针翻滚镜头
I/K 和 J/L 环绕

触控板

上下滚动环绕下
左右滚动环绕左右
捏合放大缩小
Ctrl + 上下滚动前后移动
Shift + 上下滚动上下移动
Shift + 左右滚动平移

鼠标

点击拖拽环绕
右击(或 Ctrl/Cmd)拖动上下前后移动
右击(或 Ctrl/Cmd)拖动左右平移

触摸(移动端)

单指环绕
双指捏合前后移动
双指旋转顺/逆时针旋转
双指平移左右上下移动

其他

按 0-9 切换预设相机视角
按 - 或 + 切换加载的相机
按 P 恢复默认动画
拖拽 .ply 文件转换为 .splat
拖拽 cameras.json 加载相机

其他功能

按 V 将当前视角保存到 URL
通过在 URL 中添加 url 参数打开自定义 .splat 文件(要求 CORS 可访问)
拖拽 .ply 文件(经过 3D 高斯溅射软件处理)到页面,会自动转换为 .splat 格式

示例

只要您的 .splat 文件托管在可访问的 CORS 服务器上,就可以通过 url 参数打开。

注释

使用 JavaScript 和 WebGL 1.0 编写,无需任何外部依赖,您可以查看未经压缩的源代码。WebGL 2.0 并没有增加任何 WebGL 1.0 及其扩展无法完成的新功能。WebGPU 看起来不错,但支持度还有待提高。
我们按照尺寸和不透明度的组合对 splat 进行排序,并支持渐进式加载,让您可以在所有 splat 加载完成之前就开始查看和交互。
目前不支持基于球谐的观察依赖着色效果,这主要是为了减小 splat 格式的文件大小,以便于在 Web 浏览器中加载。对于三阶球谐,我们需要 48 个系数,这意味着每个 splat 将近 200 字节!
splat 排序在 CPU 上的 Web Worker 中异步进行。在 GPU 上使用 bitonic 或基数排序可能会很有趣,不过让 GPU 专注于渲染,而不是分散精力进行排序,可能会更好。
早期的实验尝试使用了随机透明度和加权混合顺序无关透明度,但效果不太理想。

词语解释

高斯 splat 渲染非常高效,因为它的工作方式与点云非常相似 - 事实上,它们使用相同的文件格式(.ply)并使用相同的工具进行打开(不过要在 Meshlab 中看到颜色,您应该先将球谐零阶项转换为 RGB 颜色)。您可以将它们视为将单个点推广为半透明的 3D 模糊体(即著名的 splat)。

尽管推理过程与传统 3D 渲染非常相似,但参考实现并没有利用任何这种特性,因为对于训练它需要整个渲染管道是可微分的(即您需要能够运行渲染过程"反向",以找出如何微调每个模糊体的位置、大小和颜色,使某个相机的视图逐步接近参考照片)。这种基于梯度的优化是否可以算作神经网络,这在网上似乎存在一些争议。

由于这个实现只是一个查看器,我们不需要进行任何可微分渲染。我们的一般方法是将每个 splat 馈送到顶点着色器。我们获取 splat 的 xyz 位置并使用投影矩阵将其投影到屏幕坐标,然后获取 splat 的缩放和四元数旋转参数,以确定投影的特征向量,从而可以绘制一个边界四边形。然后,这些四边形使用片段着色器单独着色。片元着色器是一个程序,它本质上是为每个片元(即顶点着色器生成的四边形)运行,并输出一种颜色。它获取片元的位置,计算其与splat中心的距离,并使用该距离来确定splat颜色的不透明度通道。目前,这种实现仅存储splat的3个(红、蓝、绿)颜色通道,但完整的实现本质上使用48个通道来编码任意依赖视角的光照。

让这些片元组合起来创建一个实际的图像是最烦人的问题。事实证明,在计算机图形学中,渲染半透明物体是一个未解决的问题,这最终源于合成半透明物体是不可交换的,即半透明物体的堆栈外观取决于它们绘制的顺序。

一种简单的解决方案是称为推测性透明度的方法,其基本思想是假装根本没有半透明性 - 物体只是具有不同级别的随机瑞士奶酪。图形卡跟踪深度缓冲区,丢弃所有非最上层的像素,并在每个像素生成一个随机数,如果它90%的时间是90%透明的,则丢弃它。这种方法可以工作,但会给一切带来噪点和点杂的外观。

另一种简单的方法是使用画家算法,它基本上涉及在渲染之前对所有对象进行预排序。在CPU上执行此操作可能相当昂贵,在演示页面上使用大约100万个splat,在我的计算机上对它们进行排序需要大约150毫秒。

参考实现和大多数其他高斯splat实现采用的方法是在GPU上进行排序。在GPU上进行排序的一种常见算法是称为"比特钻石排序"的算法,因为它非常易于并行化。像快速排序/归并排序这样的正常CPU比较排序算法可以在O(nlogn)时间内运行,而比特钩排序稍慢,需要O(nlog²n)时间,但n因子可以并行完成,因此整体延迟为O(log²n),这比O(nlogn)更快。参考实现使用基于"onesweep"的基数排序,可以在O(n)时间内完成,因为可以利用您正在对数字进行排序的事实来在每个周期获得比单个比较更多的信息。

Chrome最近发布了WebGPU,这是一个全新的干净API,据称可以像CUDA一样编写计算着色器,可在浏览器中运行。但是,WebGPU目前还没有被Firefox和Safari支持。这意味着,如果我们想构建一个广泛可用的东西,我们必须坚持使用旧的WebGL(甚至可能是WebGL 1.0,因为有报告称WebGL 2.0在新的M1芯片上对Safari来说会有bug或较慢)。在WebGL上实现比特钻石排序仍然是可能的,但需要大约200次迭代才能对100万个数字进行排序,因此可能仍然太慢。

渲染半透明物体的另一种方法是深度剥离,其中启用深度缓冲区并仅渲染位于顶层的半透明对象,然后将该深度缓冲区反馈到渲染过程中,以"剥离"顶层并仅渲染下层,然后将这些半透明层叠加在一起以形成最终图像。我没能让这个方法工作,但它可能仍然会很慢。

另一种有趣的方法是称为"加权混合无序不透明度"的方法,它将一个额外的数字保存到一个不同的渲染缓冲区中,该数字用作近似半透明度的权重,这种方法是可交换的。在我的实验中,它并没有奏效,这在某种程度上是意料之中的,因为在某些splat彼此具有高不透明度的情况下。

我最终采用的方法是在CPU上的一个Web Worker中运行排序过程,这需要更长的时间(大约4fps,而主渲染为60fps),但这没关系,因为大多数时候当你移动时,z顺序实际上变化并不快(这会导致在完全相反的相机取向之间直接跳跃时出现暂时的伪像)。

人工智能编写WebGL样板代码的努力以及Otavio Good关于不同无序不透明度方法的讨论、Mikola Lysenko的regl以及对WebGL和WebGPU的有益建议、Ethan Weber关于NeRFs如何工作以及告诉我排序是很难的讨论、Gray Crawford关于颜色渲染和相机控制问题的识别,以及Anna Brewer在实现动画方面的帮助,在此表示感谢。