# three.js 大动作：原生高斯泼溅落地 r186，Nanite 式光栅化进浏览器

> r186 原生支持 3D 高斯泼溅（PLY/SPZ/glTF 三行代码跑起来）；r185 带来 Nanite 式光栅化与 WebGPU 骨骼动画实例化

2026 年下半年 three.js 连续放出两个大版本（r185 → r186），不是例行修 bug，而是两条产品线同时落地：**WebGPU 渲染管线全面接管主力场景**，以及**原生 3D 高斯泼溅（Gaussian Splatting）支持**。后者让"手机扫一圈 → 浏览器里直接展示实景三维"这条链路第一次不需要任何第三方插件就能闭环。

## 最大新闻：r186 原生 Gaussian Splatting（2026-09-24 发布）

以前要在 three.js 里展示高斯泼溅模型，得靠社区插件（如 Spark、gsplat.js 等），各家格式、排序算法、性能参差不齐。r186 把它收编为引擎一等公民：

- **内置 `GaussianSplat` 网格类型**，不再是外挂，和普通 Mesh 一样进场景树
- **格式全家桶**：PLY（专用 `GaussianSplatPLYLoader`）、SPZ（Niantic 压缩格式）、KSPLAT、以及 glTF 的 `KHR_gaussian_splatting` 扩展
- **球谐（SH）视角相关颜色**：不同角度看颜色会正确变化，这是高质量泼溅的关键，不是只会显示一个平色
- **支持射线拾取（raycasting）和视锥剔除**：意味着泼溅模型可以交互、可以点击，不只是"好看的背景板"
- 实现基于 WebGPU/TSL + GPU counting sort，核心代码仅 7KB，官方说法是"三行代码跑起来"
- 作者 Ben Houston（Threekit），Mugen87 合入

**为什么这是大事**：高斯泼溅是目前"实拍转三维"最火的技术路线（无人机航拍、手机扫描都能生成）。此前它的主战场是 Unity/Unreal 和专业查看器，网页端一直是插件拼装的蛮荒状态。three.js 原生支持意味着——房产展示、文旅实景、电商 3D 商品页，用浏览器就能交付，不用装任何 App。

## r185（2026-07-01）：把虚幻引擎的 Nanite 搬进浏览器

- **Nanite 风格 compute 光栅化器**：借鉴 UE5 Nanite 的思路，用 GPU compute 直接光栅化超密集网格，几百万三角形不经过传统顶点管线的瓶颈。示例已从实验转正（`webgpu_compute_rasterizer`）
- **WebGPU 骨骼动画 + 实例化**：蒙皮网格可以大规模 GPU 实例化，人群、集群动画不再吃 CPU
- **ClusteredLighting（Forward+ 聚簇光照）**进入 WebGPURenderer：同屏大量动态光源的性能救星
- USD 生态持续加码：USDLoader 支持几何体图元（Cube/Sphere/Cylinder/Cone/Capsule）、MaterialX UsdPreviewSurface 材质、metersPerUnit；USDZExporter 支持多材质和动画

## r186 其他值得注意的

- **`SunLight` 带级联阴影（CSM）**：大场景太阳阴影终于有了开箱方案，以前要自己接 CSM 库
- **`DirectRenderPipeline`**、遮挡查询（occlusion query）加固、WebXR + MSAA 支持
- 材质新增**逆反射（retroreflectivity）**支持（交通标志、反光衣那种效果）
- TSL（Three Shading Language）大量修复：一套着色器代码同时编译到 WGSL（WebGPU）和 GLSL（WebGL）的策略越来越稳

## 趋势判断

three.js 正在完成从 WebGL 到 WebGPU 的换代，TSL 是过渡桥梁。npm 周下载量已超 **1350 万**。对开发者来说现在的最佳姿势是：**TSL-first 写着色器，WebGPURenderer 为默认目标**——WebGL 自动兜底。

## 相关链接

- 官网：https://threejs.org
- GitHub：https://github.com/mrdoob/three.js
- r186 完整 changelog：https://github.com/mrdoob/three.js/releases/tag/r186
- r185 完整 changelog：https://github.com/mrdoob/three.js/releases/tag/r185
- 高斯泼溅合并报道：https://radiancefields.com/three.js-merges-a-native-gaussian-splat-renderer-for-webgpu-in-r186
- r186 泼溅上手教程：https://ben3d.ca/blog/how-to-use-threejs-native-gaussian-splats

---

**分类**：源码
**标签**：js · r186 · three
**作者**：子龙
**链接**：https://octohz.com/p/2189