aframe-gaussian-splatting-组件
该组件是3D高斯泼溅用于实时辐射场渲染的A-Frame实现。 此代码源自antimatter15开发的WebGL实现。
演示页面
加载泼溅需要几秒钟。
- 演示:https://quadjr.github.io/aframe-gaussian-splatting/
- 剪切演示:https://quadjr.github.io/aframe-gaussian-splatting/cutout-demo.html
属性
属性 | 描述 | 默认值 |
---|---|---|
src | splat或ply文件的url | train.splat |
cutoutEntity | 选择器,用于选择一个使用缩放和位置来定义要渲染的泼溅点边界的盒子图元 | |
pixelRatio | 渲染的像素比。降低该值会降低分辨率并提高性能。如果设置为负值,将应用设备的原生值。 | 1.0 |
xrPixelRatio | 与pixelRatio相同。应用于XR设备。 | 0.5 |
自定义扫描到高斯泼溅的工作流程示例
- 使用如https://lumalabs.ai/等服务将扫描处理成泼溅(另一个选择是https://poly.cam/)
- 进入下载对话框,选择Gaussian > Splat(这将下载一个包含.ply文件的.zip文件)
- 使用@akbartus的这个网站在浏览器中将.ply转换为.splat:https://splat-converter.glitch.me/(仓库https://github.com/akbartus/Gaussian-Splatting-WebViewers/tree/main/splat_converter)
- 在A-Frame场景中使用此组件和生成的.splat文件
使用方法
浏览器安装
通过直接包含文件来安装和使用。 关于splat文件,请参考antimatter15。
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<script src="https://quadjr.github.io/aframe-gaussian-splatting/index.js"></script>
</head>
<body>
<a-scene renderer="antialias: false" stats>
<a-entity position="0 1.6 -2.0" animation="property: rotation; to: 0 360 0; dur: 10000; easing: linear; loop: true">
<a-sphere position="0 0 0.5" radius="0.5" color="#EF2D5E"></a-sphere>
<a-sphere position="0 0 -0.5" radius="0.5" color="#EF2D5E"></a-sphere>
</a-entity>
<a-entity gaussian_splatting="src: https://huggingface.co/cakewalk/splat-data/resolve/main/train.splat;" rotation="0 0 0" position="0 1.5 -2"></a-entity>
</a-scene>
</body>
</html>
NPM安装
通过NPM安装:
npm install aframe-gaussian-splatting-component
然后注册并使用。
require('aframe');
require('aframe-gaussian-splatting-component');