学习threejs，打造原生3D高斯溅落实时渲染器

👨‍⚕️ 主页： gis分享者

👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- [1.1 ☘️Splat（高斯溅射，Gaussian Splatting）](#1.1 ☘️Splat（高斯溅射，Gaussian Splatting）)
- - [1.1.1 ☘️技术原理](#1.1.1 ☘️技术原理)
  - [1.1.2 ☘️技术优势](#1.1.2 ☘️技术优势)
  - [1.1.3 ☘️应用场景](#1.1.3 ☘️应用场景)
  - [1.1.4 ☘️局限性](#1.1.4 ☘️局限性)
  - [1.1.5 ☘️核心文件格式](#1.1.5 ☘️核心文件格式)
二、🍀打造原生3D高斯溅落实时渲染器
- [1. ☘️实现思路](#1. ☘️实现思路)
- [2. ☘️代码样例](#2. ☘️代码样例)

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用3D高斯溅落实时渲染器，实现抽象艺术特效。亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️Splat（高斯溅射，Gaussian Splatting）

Splat（高斯溅射，Gaussian Splatting）是一种基于三维高斯分布的先进3D建模与可视化技术，其核心思想是将复杂场景分解为大量微小的椭圆形高斯基元（即"高斯斑点"），通过优化这些基元的参数（位置、协方差矩阵、不透明度、颜色等）实现高质量的3D重建和新视角合成。

1.1.1 ☘️技术原理

1. 高斯基元表示：

每个高斯基元由四个关键属性定义：

位置：椭球中心的空间坐标。
协方差矩阵：控制椭球的缩放和旋转，决定其在空间中的分布形态。
不透明度：影响基元对光线的阻挡程度。
球谐函数（SH）系数：描述基元表面的颜色分布，支持复杂光照效果。

2. 渲染流程：

数据准备：通过多视角图像或视频，利用运动结构恢复（SfM）技术生成初始点云。
高斯分布生成：将点云转换为高斯基元，初始仅包含位置和颜色信息。
参数优化：通过随机梯度下降法迭代调整基元参数，最小化渲染图像与真实图像的误差。
动态致密化：根据训练需求拆分或移除基元，增强细节表现（如每100次迭代应用一次密集化过程）。

3. 实时渲染：

利用可微分高斯光栅化技术，将三维高斯基元投影为二维像素，通过混合（α-blending）实现连续表面渲染，支持实时或接近实时的帧率（如高达100 FPS）。

1.1.2 ☘️技术优势

1. 高效性：

存储与计算优化：相比多边形网格或神经网络（如NeRF），高斯溅射结构更简洁，所需存储和计算资源更少。
训练速度：场景训练时间可缩短至1小时内，显著快于NeRF（后者需数小时至数天）。

2. 渲染质量：

细节捕捉：擅长表现复杂光影效果（如反射、折射），渲染结果高度逼真。
动态场景支持：不仅可重建静态场景，还能处理移动物体，通过动态调整基元参数实现实时更新。

3. 可扩展性：

大规模场景处理：能高效处理数百万个高斯基元，性能不受显著影响。
跨领域应用：支持语义分割、内容编辑、三维生成等下游任务，结构显式且紧凑的特性使其具备良好的几何与语义理解能力。

1.1.3 ☘️应用场景

1. 三维重建：

考古与建筑：记录和分析历史遗迹、文物，创建精确建筑模型用于设计和翻新。
医学成像：可视化复杂解剖结构，辅助手术规划与模拟。
娱乐行业：生成逼真CGI和视频游戏场景，支持虚拟旅游和沉浸式体验。

2. 扩展现实（XR）：

数字孪生：通过多视角扫描渲染超逼真图像，实现实时探索与交互。
虚拟形象：提升虚拟形象的照明和纹理质量，增强远程呈现和沉浸式协作的真实感。

3. 机器人技术：

模拟与现实迁移：如SplatSim框架利用高斯溅射生成逼真模拟数据，缩小模拟与现实的差距，使机器人在现实任务中零样本迁移成功率达86.25%（接近真实数据训练的97.5%）。

1.1.4 ☘️局限性

游戏开发

1. 稀疏视图挑战：

在极端稀疏视图（如仅2-3张图像）下，重建质量可能下降，需更多图像或先验信息辅助。

2. 计算复杂度：

高斯基元数量增加时，渲染和优化计算量显著上升，需平衡精度与效率。

3. 存储需求：

早期高斯溅射文件可能比NeRF大100倍，需更多视频随机存取存储器（VRAM）和计算资源，依赖云端处理。

1.1.5 ☘️核心文件格式

1. Splat格式：

专为3D点云数据设计：Splat文件是一种二进制文件格式，相较于常见的PLY格式，它具有更高效的存储结构和更快的加载速度。
适合大规模点云数据：特别适合存储大规模点云数据，如3D扫描结果或计算机视觉算法生成的3D重建数据。
开源工具支持：如Supersplat项目已实现对Splat文件的导入和可视化功能，通过专门的二进制解析器高效读取点云数据。

2. PLY格式（针对Gaussian Splatting）：

二进制格式要求：在Gaussian Splatting技术中，PLY文件需采用二进制格式以确保渲染正确性和性能表现。
特定数据字段：包含位置、颜色、缩放和旋转等3DGS专用参数，与标准PLY格式存在显著差异。
兼容性处理：Supersplat项目通过格式验证机制，明确提示用户非标准PLY文件的缺失字段和正确操作指引。

二、🍀打造原生3D高斯溅落实时渲染器

1. ☘️实现思路

在现代 Web 图形开发中，将复杂的 3D 数据可视化到浏览器是一项极具挑战性的任务。随着 WebGL、Three.js 以及 WebAssembly 的快速发展，我们看到越来越多高性能 3D 引擎和渲染框架出现。其中一个非常有趣的开源项目便是 sparkjsdev/spark ------一个基于 Three.js 的先进 3D Gaussian Splatting 渲染器。

功能特色：

与 THREE.js 渲染管线深度集成，可将 splat 与基于 mesh 的对象无缝融合渲染
高度可移植：几乎适用于所有设备，目标覆盖 98%+ 的 WebGL2 支持环境
即使在低性能移动设备上也能保持高速渲染
支持多个 splat 对象同时渲染，并保证正确的排序
支持主流 splat 文件格式，包括：.PLY（含压缩格式）、.SPZ、.SPLAT、.KSPLAT、.SOG
支持多视角同时渲染
完全动态：每个 splat 都可进行变换和编辑，用于动画效果
支持实时 splat 颜色编辑、位移以及骨骼动画
提供 Shader Graph 系统，可在 GPU 上动态创建和编辑 splat

下面是具体代码使用样例。可以直接运行。

2. ☘️代码样例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打造原生3D高斯溅落实时渲染器</title>
    <style> body {margin: 0;} </style>
</head>
<body>
<script type="importmap">
  {
    "imports": {
      "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.178.0/three.module.js",
      "@sparkjsdev/spark": "https://sparkjs.dev/releases/spark/0.1.10/spark.module.js"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";
  import { SplatMesh } from "@sparkjsdev/spark";

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement)

  const splatURL = "https://sparkjs.dev/assets/splats/butterfly.spz";
  const butterfly = new SplatMesh({ url: splatURL });
  butterfly.quaternion.set(1, 0, 0, 0);
  butterfly.position.set(0, 0, -3);
  scene.add(butterfly);

  renderer.setAnimationLoop(function animate(time) {
    renderer.render(scene, camera);
    butterfly.rotation.y += 0.01;
  });
</script>
</body>
</html>

效果如下

参考：源码