【高斯泼溅】深度解析Three.js 加载3D Gaussian Splatting模型

在三维重建与实时渲染领域,3D Gaussian Splatting(以下简称 3DGS)成为近年来炙手可热的技术之一。本文将从开源框架解析 出发,剖析其核心模块与思路。

什么是3D Gaussian Splatting?

简单来说,3DGS是一种将场景用大量**3D 高斯体(ellipsoids)**来表示的显式辐射场(Radiance Field)技术。

  • 每一个Gaussian(高斯体)具备:位置(x,y,z)、协方差矩阵(描述形状/方向/尺度)、颜色(RGB)、透明度(α)等属性。
  • 渲染时,这些高斯体被 "splat"(散射/点绘)到屏幕空间:即每‐体在屏幕上投影为一个椭圆或模糊斑点,累加得出像素颜色与透明度。
  • 与传统网格(三角形)或隐式神经表示(如NeRF)相比,3DGS在实时渲染、高保真Novel View Synthesis(新视角渲染)上具备显著优势。

核心模块与实现思路

下面从架构与模块维度,拆解一个用Three.js框架加载以及渲染的过程,以理解其核心逻辑与在现代WebGL渲染体系中的落地方式。

1、数据输入与Scene初始化

目前最常见的3DGS数据格式是点云文件(.PLY)或自定义的.SPLAT/.KSPLAT

加载的流程通常包括以下步骤:

  • 解析输入数据:将每个点或点云块映射为Gaussian对象,包含属性:

  • 位置(Position)

  • 协方差矩阵(Covariance,用于描述形状与方向)

  • 颜色(RGB)

  • 透明度(α)

  • 生成初始Buffer数据:为后续GPU上传准备好线性数组或结构化纹理。

2、渲染准备与排序体系

在正式渲染之前,框架会执行一系列准备工作,用以保证透明度正确混合、绘制顺序合理及性能稳定。

(1)距离计算

每帧更新时,系统需计算Camera与每个Gaussian中心的距离(或深度Z值),作为透明排序与LOD依据。

(2)透明排序(Sorting)

高斯体通常半透明(具有α通道),因此绘制顺序直接影响最终颜色混合结果。常用做法:

  • **CPU排序:**直接在 JS 层执行快速排序,适合中小场景;
  • WASM+SIMD排序: 使用WASM模块进行距离排序,显著提升性能。

(3)剔除(Culling)

通过视锥剔除、遮挡剔除或LOD简化去除不可见或贡献极低的 Gaussian,减少渲染压力。

(4)GPU数据准备

将属性(位置、协方差、颜色、透明度等)打包为:

  • InstancedBufferAttribute
  • Texture Buffer

(5)实例化绘制(Instancing)

GPU端批量绘制高斯体实例,通常"一次Draw调用"即可渲染成千上万个 Gaussian。

(6)Shader细化

在Vertex与Fragment Shader中完成以下逻辑:

  • 将Gaussian中心投影至屏幕空间;
  • 根据协方差矩阵计算椭圆投影形状(Ellipsoid → Screen);
  • 按EWA(Elliptical Weighted Average)或近似算法进行加权混合;

3、渲染主流程

整体渲染逻辑可概括为以下步骤:

(1)从Camera获取矩阵

  • 提取ViewMatrixProjectionMatrix,传入Shader。

(2) 刷新可见列表

  • 根据相机位置、可视范围及LOD策略,生成当前帧的可见Gaussian索引。

(3)上传属性Buffer

  • 将Gaussian属性同步至GPU;
  • 如数据无变化,则复用上一帧的Buffer以减少传输。

(4)执行绘制(Instanced Draw)

  • 调用drawArraysInstanceddrawElementsInstanced
  • 在Shader中计算每个Gaussian的屏幕椭圆投影并进行混合。

Mapmost的支持

Mapmost SDK for WebGL 本身是一个高性能的地理三维可视化引擎 ,通过参考Three.js的3DGS渲染实现 ,在其原有的地理场景管理和GPU渲染框架基础上,扩展了对3DGS数据的加载与渲染支持

具体来说,框架在加载阶段解析.PLY.SPLAT文件,将点云数据转换为高斯体对象,并构建GPU Buffer;同时利用WASM模块加速相机空间距离计算与透明度排序 ,确保在高密度点云下仍能保持正确的深度混合

在GPU渲染阶段,框架通过Instanced Draw批量绘制上百万个高斯体 ,Shader层实现EWA投影与α混合 ,呈现出柔和连续的体积光照与真实的景深效果。

这一改进使得Mapmost SDK能够在WebGL环境中实现与Three.js同级的3DGS实时渲染性能,同时兼具地理坐标体系与多源数据管理能力,为地理级3D重建与在线渲染提供了完整支持。

加载效果

申请试用,请至Mapmost官网联系客服

**特别预告:**Mapmost Model Online 在线体验版 ,11月上线倒计时~

相关推荐
Mike_jia2 小时前
EMQX:开源MQTT消息中间件王者,百万级物联网连接的首选引擎
前端
xiaoxue..2 小时前
深入理解JavaScript中的深拷贝与浅拷贝:内存管理的艺术
开发语言·前端·javascript·面试
鹏多多2 小时前
详解React组件状态管理useState
前端·javascript·react.js
excel2 小时前
如何将 MP4 文件转换为 M3U8 格式并实现流媒体播放
前端
秋氘渔2 小时前
Vue基础语法及项目相关指令详解
前端·javascript·vue.js
IT_陈寒2 小时前
React性能优化实战:我用这5个技巧将组件渲染速度提升了70%
前端·人工智能·后端
邱泽贤2 小时前
uniapp 当前页调用上一页的方法
前端·javascript·uni-app
不一样的少年_2 小时前
大部分人都错了!这才是chrome插件多脚本通信的正确姿势
前端·javascript·浏览器
Moment2 小时前
Angular v21 无 Zone 模式前瞻:新特性、性能提升与迁移方案
前端·javascript·angular.js