Skip to content

Quick Start

Get up and running with StorySplat in minutes.

Choose Your Path

I want to embed a 3D scene in my website

Use the StorySplat Viewer npm package:

npm install storysplat-viewer

import { createViewerFromSceneId } from 'storysplat-viewer';

const viewer = await createViewerFromSceneId(
  document.getElementById('container'),
  'YOUR_SCENE_ID'
);

View full documentation →

I want to create 3D content from images/video

Use StorySplat Tools desktop application:

  1. Download from storysplat.com/tools
  2. Install and launch
  3. Drag in your images or video
  4. Export your 3D scene

View full documentation →

I want to convert between splat formats

Use the @storysplat/splat-tools CLI:

npx @storysplat/splat-tools convert input.ply output.sog

View CLI reference →

Quick Examples

Embed a Static 3D Scene

<!DOCTYPE html>
<html>
<head>
  <style>
    #viewer { width: 100%; height: 500px; }
  </style>
</head>
<body>
  <div id="viewer"></div>

  <!-- Bundled build - includes PlayCanvas, single script! -->
  <script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
  <script>
    StorySplatViewer.createViewerFromSceneId(
      document.getElementById('viewer'),
      'YOUR_SCENE_ID',
      { revealEffect: 'medium' }
    );
  </script>
</body>
</html>

Play Volumetric Video (4DGS)

import { createViewer } from 'storysplat-viewer';

const viewer = createViewer(container, {
  frameSequence: {
    frameUrls: [
      'https://cdn.example.com/frame_000.sog',
      'https://cdn.example.com/frame_001.sog',
      // ... more frames
    ],
    fps: 24,
    loop: true,
  },
});

viewer.play();

Create a Guided Tour

Scenes with waypoints are configured in the StorySplat editor:

import { createViewerFromSceneId } from 'storysplat-viewer';

const viewer = await createViewerFromSceneId(
  container,
  'YOUR_SCENE_ID',
  { autoPlay: true }  // Auto-play through waypoints
);

// Or control manually
viewer.nextWaypoint();
viewer.goToWaypoint(2);

System Requirements

StorySplat Viewer (npm package)

  • Modern browser with WebGL2 support
  • Chrome 90+, Firefox 90+, Safari 15+, Edge 90+

StorySplat Tools (desktop app)

  • Windows 10/11, macOS 11+, or Linux
  • 8GB RAM minimum (16GB recommended)
  • NVIDIA GPU recommended for AI features
  • Python 3.10+ for advanced processing

Next Steps