0.3.0 • Published 2 months ago

@speridlabs/visus v0.3.0

Weekly downloads
-
License
APACHE-2.0
Repository
-
Last release
2 months ago

Visus

Visus Demo

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 a THREE.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

ExportDescription
PlyLoader.loadAsync(url): Promise<SplatData>
SplatDataRaw buffers of positions, rotations, scales, colors, opacities
SplatMeshnew SplatMesh(data, options?) → a THREE.Mesh
SplatOptions{ autoSort?: boolean; /* … */ }
SplatReact component wrapping SplatMesh
VERSIONLibrary 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

  1. Fork & clone
  2. pnpm install
  3. pnpm lint && pnpm build
  4. Open a PR!

📄 License

Apache 2.0 © Sperid Labs

0.3.0

2 months ago

0.2.0

2 months ago

0.1.0

2 months ago