0.3.0 • Published 2 months ago
@speridlabs/visus v0.3.0
Visus
High‑performance Gaussian Splatting (3DGS) for Three.js and React‑Three‑Fiber.
Drop in a SplatMesh
or <Splat>
component, feed it a .ply
, and render millions of splats with correct transparency and minimal overhead.
🚀 Installation
# npm
npm install @speridlabs/visus three
# yarn
yarn add @speridlabs/visus three
# pnpm
pnpm add @speridlabs/visus three
Visus treats Three.js as a peer dependency—make sure it's installed alongside.
🔑 Key Features
- Mesh‑like API:
new SplatMesh(data, options)
behaves like aTHREE.Mesh
. - React wrapper:
<Splat plyUrl="..." splatOptions={{…}} />
for R3F apps. - Web Worker sorting: non‑blocking depth sort for correct transparency.
- GPU instancing: draw hundreds of splats in a single call.
- Packed textures: compact quaternion & scale storage.
- Shader culling: early discards, premultiplied alpha.
🎯 Quickstart
Plain Three.js
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { PlyLoader, SplatMesh } from '@speridlabs/visus';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100);
camera.position.set(0, 1, 3);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
(async () => {
const data = await new PlyLoader().loadAsync('/sample.ply');
const mesh = new SplatMesh(data, { autoSort: true });
scene.add(mesh);
})();
renderer.setAnimationLoop(() => {
controls.update();
renderer.render(scene, camera);
});
React‑Three‑Fiber (R3F)
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Splat } from '@speridlabs/visus/react';
export default function App() {
return (
<Canvas camera={{ position: [0, 1, 3] }}>
<ambientLight />
<Splat plyUrl="/sample.ply" splatOptions={{ autoSort: true }} />
</Canvas>
);
}
📦 API Overview
Export | Description |
---|---|
PlyLoader | .loadAsync(url): Promise<SplatData> |
SplatData | Raw buffers of positions, rotations, scales, colors, opacities |
SplatMesh | new SplatMesh(data, options?) → a THREE.Mesh |
SplatOptions | { autoSort?: boolean; /* … */ } |
Splat | React component wrapping SplatMesh |
VERSION | Library version string |
🔧 Performance Highlights
- Off‑thread sorting via Web Worker
- Instanced draw calls for minimal CPU overhead
- Packed data textures reduce memory bandwidth
- Shader‑level early exit for invisible splats
🤝 Contributing
- Fork & clone
pnpm install
pnpm lint && pnpm build
- Open a PR!
📄 License
Apache 2.0 © Sperid Labs