Web (Spark.js)

Use Spark to render Gaussian splats and point clouds in a React web app. Serve your files from your app's public directory.

The World Labs JavaScript client exports TaskAsset for file references and PosedRGBDAsset for calibrated RGBD frames. Each frame contains imageAsset, camera, and depth.

Gaussian splats

An .spz file is ready to render. For a TaskAsset, use its url to load the file. Install three, @react-three/fiber, @react-three/drei, and @sparkjsdev/spark in your React app:

1import { Canvas, extend, useThree } from "@react-three/fiber";2import { OrbitControls } from "@react-three/drei";3import { SparkRenderer, SplatMesh } from "@sparkjsdev/spark";45const Spark = extend(SparkRenderer);6const Splats = extend(SplatMesh);78function Scene() {9  const gl = useThree((state) => state.gl);10  return (11    <>12      <Spark args={[{ renderer: gl }]} />13      <Splats args={[{ url: "/scene.spz" }]} />14      <OrbitControls />15    </>16  );17}1819export default function Viewer() {20  return (21    <Canvas style={{ height: "100vh" }} camera={{ position: [0, 0, 5] }}>22      <Scene />23    </Canvas>24  );25}

Replace the example path with your SPZ file's URL and move the camera to frame your scene. Add a Splats element for each additional file.

Point clouds from RGBD images

A PosedRGBDAsset contains the ingredients for a colored point cloud:

• RGB (imageAsset) gives each point its color.
• Depth (depth.depthAsset for linear EXR, or depth.logDepthAsset for log-depth PNG) gives each pixel its distance along the camera's forward axis.
• Confidence (depth.confidenceAsset), when present, lets you filter unreliable points.

Use camera.intrinsics to turn depth pixels into 3D points, then apply each camera's pose to place them in the same world. See Cameras and posed images for depth decoding and coordinate conventions.

Once decoded, render the points as small spherical splats. This React component accepts world-space points with { x, y, z, r, g, b } and RGB values from 0 to 255, after any confidence filtering:

1import { useMemo } from "react";2import { extend } from "@react-three/fiber";3import { SplatMesh } from "@sparkjsdev/spark";4import * as THREE from "three";56const Splats = extend(SplatMesh);78export function PointCloud({ points, radius = 0.01 }) {9  const options = useMemo(10    () => ({11      constructSplats(splats) {12        for (const { x, y, z, r, g, b } of points) {13          splats.pushSplat(14            new THREE.Vector3(x, y, z),15            new THREE.Vector3(radius, radius, radius),16            new THREE.Quaternion(),17            1,18            new THREE.Color().setRGB(r / 255, g / 255, b / 255, THREE.SRGBColorSpace),19          );20        }21      },22    }),23    [points, radius],24  );25  return <Splats args={[options]} />;26}

In Scene, replace the SPZ Splats element with <PointCloud points={points} />; keep the Spark renderer and controls. This previews the observed surfaces in the RGBD images. For more, see Spark's React example and procedural splats.