NEURAL RENDERING · 3D VISION · NOVEL VIEW SYNTHESIS

3D 视觉与神经渲染可视化实验室

通过 8 个可交互的 SVG 可视化模块,直观理解 NeRF、高斯泼溅、点云处理、三维重建、体素八叉树、多视图几何与辐射场编辑等核心算法。从光线投射到可微光栅化,从 SfM/MVS 到辐射场重光照,零依赖、纯前端。

8 Modules SVG + Vanilla JS Zero Dependencies Single File
01NEURAL RADIANCE FIELD

NeRF 神经辐射场

将输入图像与相机位姿送入 MLP,用 5D 坐标 (位置 + 方向) 回归体密度与颜色,再通过光线投射在采样点上做 alpha 合成得到最终像素。下方可视化展示射线穿越场景、沿射线采样点与体渲染积分过程。

体渲染管线与光线投射
023D GAUSSIAN SPLATTING

Gaussian Splatting 高斯泼溅

用一组 3D 高斯(均值、协方差、不透明度、球谐颜色)表示场景,通过可微光栅化将每个高斯投影到 2D 后泼溅叠加。下方可视化展示高斯点云、椭球投影与泼溅叠加过程。

高斯点云与可微光栅化
03POINTNET / POINTNET++

点云处理

PointNet 对每个点用共享 MLP 提取特征,再通过最大池化得到全局特征;PointNet++ 引入分层分组(Set Abstraction)逐层抽象局部结构。下方可视化展示逐点特征提取、最大池化与分层采样过程。

逐点特征与对称最大池化
04STRUCTURE FROM MOTION + MVS

3D 重建流水线

从多视图图像出发,经 SfM 估计相机位姿与稀疏点云,再由 MVS 生成稠密点云,进而重建网格并贴图。下方可视化展示特征匹配、稀疏/稠密重建与网格生成阶段。

多视图重建阶段流水线
05VOXEL & OCTREE

体素与八叉树

稠密体素占用内存巨大,而八叉树只在需要的区域自适应细分。下方可视化对比稠密体素与稀疏八叉树的内存占用与分辨率分布。

稠密体素 vs 稀疏八叉树
06EPIPOLAR GEOMETRY

多视图几何

双目相机之间存在对极几何约束:一个图像点在另一视图中的对应点必在其对极线上。下方可视化展示对极线、基础矩阵与三角化过程。

对极几何与三角化
07NEURAL RENDERING BENCHMARK

神经渲染管线对比

对比 NeRF、Instant-NGP、Gaussian Splatting、Plenoxels、Mip-NeRF 在训练时间、渲染速度、质量与内存上的权衡。下方可视化展示各方法的雷达图与指标对比。

五方法多维度雷达对比
08RADIANCE FIELD EDITING

辐射场编辑

在 NeRF 表示的场景上进行重光照、重贴图、物体插入/删除等编辑。下方可视化展示编辑类型与强度如何作用于辐射场并影响最终渲染。

重光照 / 重贴图 / 物体插入删除