Spark – THREE.js 的实时 3D 高斯泼溅渲染器

它是什么

Spark 是一个开源渲染器，将 Gaussian-splatting（一种将 3D 场景表示为微小、模糊“泼溅”集合的现代技术）带入浏览器。它直接集成至热门的 THREE.js 图形库，让开发者能将高质量、视角相关的点云渲染功能加入任何网页 3D 应用程序中。

为何重要

传统的网格管线难以在交互式帧率下显示极高密度的几何图形，特别是在移动设备硬件上。高斯泼溅以紧凑的形式存储几何、颜色、不透明度甚至学习到的特征，并能在 GPU 上高效光栅化。Spark 将这种研究级渲染方法封装在一个可移植、兼容 WebGL2 的库中，让网页开发者无需原生代码或繁重的服务器端处理，即可获得尖端的视觉保真度。

核心功能（如 README 所述）

THREE.js 集成 – SparkRenderer 和 SplatMesh 是随插即用的对象，可与标准的 THREE.js 场景、摄像机和灯光并行运行。
广泛的设备支持 – 目标为 98% 以上支持 WebGL2 的浏览器，包括低功耗移动设备。
快速、实时渲染 – 泼溅在 GPU 上进行排序和光栅化，即使在普通硬件上也能实现流畅的动画。
多格式导入 – 原生加载器支持 PLY（包含压缩变体）、SPZ、SPLAT、KSPLAT 和 SOG 文件。
多视角 – 可同时渲染多个摄像机视角，适用于 VR/AR 或多窗口设置。
动态编辑 – 泼溅可在运行时进行变换、动画化、重新着色、位移或蒙皮。
着色器图形系统 – 一个 GPU 端节点编辑器，无需手动编写 GLSL 即可创建自定义泼溅着色器。

入门指南（快速启动代码）

README 提供了一个最小化的 HTML 页面，该页面：

通过指向 CDN 的 import-map 加载 THREE.js 和 Spark。
创建一个 THREE.js 场景、摄像机和 WebGL 渲染器。
实例化 SparkRenderer 并将其加入场景。
将示例 splat (butterfly.spz) 加载为 SplatMesh 并进行动画处理。

<script type="module">
  import * as THREE from "three";
  import { SparkRenderer, SplatMesh } from "@sparkjsdev/spark";
  // …场景设置…
  const spark = new SparkRenderer({renderer});
  const butterfly = new SplatMesh({url: "https://sparkjs.dev/assets/splats/butterfly.spz"});
  // 动画旋转
</script>

在浏览器中运行此代码将显示一个旋转的、GPU 加速的 splat 模型。

安装选项

CDN – 直接从 https://sparkjs.dev/releases/spark/<version>/spark.module.js 导入预先构建的模块。
npm – 使用 npm install @sparkjsdev/spark 适用于打包工具或基于 Node 的工作流程。
本地构建 – 克隆仓库，安装 Rust（用于 WebAssembly 核心），然后运行：
```
npm install
npm run build:wasm   # 编译 Rust → WASM
npm run build        # 打包 JS/TS
```
该仓库还提供了下载示例资产和启动开发服务器的脚本 (npm start)。

开发工作流程

README 列出了有用的脚本：

npm run clean – 清除生成的文件。
npm run assets:download / assets:clean – 管理示例资产。
npm run docs – 构建基于 MkDocs 的文档。
npm run site:* – 构建、服务或部署静态网站 (gh-pages)。
npm run assets:compress <file> – 将 PLY splat 压缩为 SPZ 格式。

背后团队

Spark 由 World Labs (https://www.worldlabs.ai) 开发，这是一家专注于 AI 驱动 3D 内容创作的公司。该项目采用 MIT 授权，并以 @sparkjsdev/spark 的范围包名称发布在 npm 上。

总结： Spark 是一个真正的、生产就绪的库，通过 THREE.js 将最新的高斯泼溅渲染技术带入网页。它与 AI 生成的 3D 资产、实时图形以及任何需要在浏览器中进行高质量点云可视化的项目相关。