3D 高斯泼溅 可视化实验室

用交互式 SVG 呈现高斯属性、可微光栅化、球谐函数、自适应密度控制等 3DGS 核心技术。八个模块,纯原生实现。

zero-deps HTML / CSS / JS + SVG requestAnimationFrame prefers-reduced-motion
MODULE 01

高斯属性 G(x) = α·e^(-½(x-μ)ᵀΣ⁻¹(x-μ))

每个 3D 高斯由四组属性定义:位置 μ(中心)、协方差 Σ(形状与朝向)、颜色(球谐系数 SH)、不透明度 α。调节各属性观察椭球形态与渲染贡献的变化。

gaussian-attributes.svg
高斯椭球 位置 μ 协方差轴 Σ SH 颜色

3D 高斯属性

3D 高斯在空间中呈椭球分布。μ 决定中心位置;Σ = R·S·Sᵀ·Rᵀ 由旋转 R 与缩放 S 参数化,保证半正定;SH 系数编码视角相关颜色;α 控制不透明度。所有属性均可微,通过梯度下降优化。

不透明度 α
0.90
缩放 S
1.00
各向异性
1.00
旋转 θ
0°
MODULE 02

可微光栅化 (Tile-based α-Blending)

3DGS 将高斯按深度排序,投影到 2D 后在 tile 内做前向 α 混合:C = Σ c_i α_i T_i,T_i = Π(1-α_j)。整个过程可微,梯度回传至高斯属性。逐步观察混合累积过程。

rasterization.svg
高斯层 (按深度) 累积像素 tile 边界

α 混合公式

C = Σᵢ cᵢ · αᵢ · Tᵢ , Tᵢ = Πⱼ<ᵢ (1 - αⱼ)

高斯按深度从远到近排序。每个像素的最终颜色是各高斯贡献的加权和,权重为 αᵢ 乘以此前所有高斯的透射率 Tᵢ。tile-based 划分将屏幕分块并行处理,提升渲染效率。

高斯层数
5
已混合
0
透射率 T
1.00
tile 大小
16px
MODULE 03

球谐函数 (Spherical Harmonics)

球谐系数编码视角相关颜色:低阶捕捉漫反射,高阶捕捉镜面与高光。3DGS 默认用 3 阶 (16 系数/通道)。改变视角观察颜色随观察方向的变化。

spherical-harmonics.svg
SH 基函数 视角依赖颜色 观察方向

球谐阶数与视角依赖

SH 阶数 l=0 为常数项(视角无关漫反射);l=1 引入线性变化;l=2 二阶捕捉更复杂的角度依赖;l=3 三阶可表现高光。阶数越高颜色随视角变化越剧烈,但也更易过拟合。

SH 阶数
3
系数数
16
视角 θ
0°
当前颜色
—
MODULE 04

自适应密度控制

每 100 次迭代根据位置梯度调整高斯密度:梯度大的高斯 split(分裂为两个小高斯);大尺度高斯 clone(克隆到梯度大处);α 过小或过大的高斯 prune(剪枝)。观察密度随训练的演化。

density-control.svg
普通高斯 split (分裂) clone (克隆) prune (剪枝)

密度控制策略

当某高斯在视图空间的位置梯度超过阈值 τ_pos,且尺度较大则 clone,较小则 split。split 将一个高斯分为两个较小的高斯以细化区域。α < ε_α 的高斯被 prune。此机制使高斯数自适应场景复杂度。

高斯数
12
迭代
0
split/clone
0
prune
0
MODULE 05

优化训练过程

3DGS 用 photometric loss(L1 + D-SSIM)监督,对所有高斯属性做梯度下降。损失随迭代下降,PSNR 上升,高斯逐步贴合场景。播放动画观察收敛过程。

optimization.svg
损失 (左轴) PSNR (右轴) 高斯 (场景)

损失与收敛

总损失 L = (1-λ)·L1 + λ·D-SSIM,λ=0.2。Adam 优化器,位置学习率从 1.6e-4 余弦退火到 1.6e-6。前 1500 步冻结 SH 高阶系数。PSNR 从 ~20dB 升至 ~30dB,渲染质量持续提升。

迭代
0
损失
—
PSNR
—
高斯数
—
MODULE 06

SfM 初始化

3DGS 用 COLMAP 的 SfM 稀疏点云初始化高斯:每个点 → 一个高斯。初始 Σ 取最近 3 点平均距离,α=0.1,SH 由点颜色设定。逐步观察从图像到点云再到高斯的流程。

sfm-init.svg
输入图像 SfM 稀疏点 初始高斯

COLMAP → 高斯初始化

COLMAP 通过特征匹配与束调整恢复相机位姿与稀疏点云。3DGS 为每个点创建一个各向同性高斯:μ=点位置,Σ=I·d²(d 为到最近 3 点平均距离),α=0.1,SH 由点颜色初始化。从此起点开始优化。

阶段
0 / 3
图像数
5
SfM 点
—
初始高斯
—
MODULE 07

3DGS vs NeRF 对比

3DGS 用显式高斯实现实时渲染(>100 FPS),NeRF 用隐式 MLP 体积渲染(~0.1 FPS)。3DGS 训练更快但内存占用更大。切换指标查看两者在速度、训练时间、内存、质量上的权衡。

3dgs-vs-nerf.svg
3DGS NeRF

指标对比

3DGS 渲染速度 134 FPS(实时),NeRF 仅约 0.1 FPS;3DGS 训练约 41 分钟,NeRF 需数小时至数天;3DGS 显存占用更大(显式存储高斯);两者 PSNR 接近(3DGS 略优)。3DGS 牺牲内存换取速度与质量。

当前指标
渲染速度
3DGS
—
NeRF
—
优势
—
MODULE 08

场景编辑 (高斯变换)

显式高斯表示便于编辑:对每个高斯施加仿射变换 x' = R·S·x + t 实现变形、合成、动画。变换矩阵直接作用于 μ 与 Σ。调节平移、旋转、缩放观察高斯场景的实时形变。

scene-editing.svg
原始高斯 变换后高斯 变换矩阵

仿射变换 x' = R·S·x + t

对高斯施加仿射变换:μ' = R·S·μ + t,Σ' = R·S·Σ·Sᵀ·Rᵀ。平移移动场景,旋转改变朝向,缩放改变大小。相比 NeRF 的隐式表示,3DGS 的显式高斯使场景编辑、合成、动画变得直观高效。

平移 tx
0
旋转 θ
0°
缩放
1.00
高斯数
24