PointFlow

Benchmark	Result
FPS (WebGPU, balanced preset, 50k points)	163–166
Rolling p95 frame time	< 50 ms
Ingest throughput	20,000 pts/s
Test suite	393 passing, 0 type errors

Benchmarked on i7-13700HX · RTX 4060 Laptop · Chrome 147 · Windows 11

Render live point cloud streams in React without frame drops, memory spikes, or browser stalls — up to 1M+ points, WebGPU-accelerated, with automatic WebGL fallback.

---

What problem does this solve?

Most point cloud renderers assume static data. When data is live — LiDAR, simulation, sensor fusion, digital twin updates — naive approaches cause three failure modes: frame drops from unbounded memory growth, browser stalls from blocking ingest, and visible lag because the renderer doesn't know which incoming points matter most.

PointFlow is designed for the live-data case. It keeps memory bounded by design, keeps ingest off the main thread, and uses a unified importance function to decide both which points to evict from the buffer and which points to prioritise in the render pass.

---

Feature summary

Feature	What it gives you
Streaming ingest (WebSocket, push-based)	Continuous live data without frame drops
Bounded ring buffer with backpressure	Predictable memory regardless of stream rate
Off-main-thread ingest worker	Ingest never blocks the render loop
WebGPU default + WebGL fallback	GPU compute culling on supported browsers; safe fallback everywhere else
GPU frustum culling (WebGPU)	Only visible points drawn; compute shader compacts to drawIndirect
Auto LOD by camera distance	Render budget spent on near points; far points downsampled
Unified importance engine (M8.5)	One scalar field drives both buffer eviction and per-frame render sampling
Static file loading (<PointCloud src="..." />)	PLY, XYZ, LAS 1.0–1.4, PCD (ASCII/binary/compressed), E57 — off-thread parsing, progressive rendering
Unified static source API	src accepts string, URL, Request, File, or Blob
LAZ (compressed LAS) loading (M9b)	import { createLazLoader } from "pointflow/laz" — laz-perf WASM inlined, no extra fetch
Built-in file dropzone	<PointCloudDropzone> for drag/drop + picker workflows
Import-based config module	pointflow/config centralizes defaults with deterministic precedence
Attribute-based color mapping	Any numeric field (velocity, uncertainty, pressure) mapped to a color palette
GPU point picking (WebGPU) / CPU fallback (WebGL)	onPointPick callback; click any point to receive its world coordinates + attributes; WebGPU resolves within one frame, no O(N) CPU scan
16-bit quantized transport (M9.2)	Binary WebSocket adapter; 6 bytes/point wire cost vs 12 bytes float32
COPC streaming (M10)	<CopcPointCloud> from pointflow/copc; HTTP range requests, LRU tile cache, frustum+LOD selection
COPC prefetch strategies	prefetchStrategy: frustum-priority, depth-first, nearest, bandwidth-saver
OPFS persistent tile cache (M10.1)	Two-tier memory+disk cache; tiles survive page reload; graceful fallback
Reproducible benchmark surface	Fixed profiles, rolling p95, hitch counts, one-click export
Side-by-side comparison demo (M11.3)	"Compare" tab: FIFO vs importance engine on same stream; Copy Report button
Temporal time window (M12)	timeWindowMs prop + onTemporalStats; GPU compute shader filter; zero CPU overhead on WebGPU

---

vs. alternatives

	PointFlow	Potree	deck.gl PointCloudLayer	Three.js Points
Live streaming	Yes — purpose-built	No (static octree tiles)	Partial (batch updates)	Manual
Bounded memory	Yes — ring buffer	No (loads all tiles)	No	Manual
Static file loading	Yes — PLY, XYZ, LAS, LAZ (opt-in), PCD, E57	Yes — LAZ/LAS/COPC	Limited	Manual
WebGPU rendering	Yes	No	No	No
Importance-driven eviction + rendering	Yes — unified score	No	No	No
React-native API	Yes — hooks + components	No	Partial (layer API)	No
Off-thread ingest	Yes	N/A	No	No

---

Quick start (streaming, under 30 minutes)

1. Install

npm install pointflow

2. Stream points into a scene

import { StreamedPointCloud, type StreamedPointCloudRef } from "pointflow";
import { useRef } from "react";

export function LiveScene() {
  const api = useRef<StreamedPointCloudRef>(null);

  // Connect your data source and push chunks
  // api.current.pushChunk({ points: [{ x, y, z, attributes: { velocity: 0.8 } }] })

  return (
    <StreamedPointCloud
      maxPoints={50_000}       // hard memory ceiling — never exceeded
      colorBy="velocity"       // attribute to map to colour
      onReady={(ref) => { api.current = ref; }}
    />
  );
}

3. Push data

// From a WebSocket
ws.onmessage = (e) => {
  const chunk = JSON.parse(e.data); // { points: [{ x, y, z, attributes: {...} }] }
  api.current?.pushChunk(chunk);
};

// Or push pre-packed binary (zero allocation, best for high-rate feeds)
api.current?.pushBinary(xyzFloat32, [{ key: "velocity", values: velocityFloat32 }], count);

4. Load a static file

import { PointCloud } from "pointflow";

<PointCloud
  src="/scan.ply"         // PLY (binary or ASCII) or XYZ/CSV
  colorBy="intensity"
  autoLod                 // auto-enabled above 500k points
/>

Progressive rendering starts immediately — the scene updates as chunks are parsed, not after the full file loads.

This is the beginning of the README. Read the rest at the original. Read the full README ↗