@econic/graph-3d

Bridge between graph concepts and raw rendering — manages visible nodes, HTML overlays, user interaction, and buffer orchestration.

This is Layer 2 of the Econic graph framework. It coordinates buffer communication with @econic/graph-core (WASM) and provides the foundation for @econic/graph-morph above.

Installation

pnpm add @econic/graph-3d

Usage

import { Graph3D } from '@econic/graph-3d';

const graph = new Graph3D({
  canvas: document.querySelector('canvas')!,
  interaction: { orbit: true, pan: true, zoom: true },
});

graph.setNodes([
  { id: 'a', position: [0, 0, 0] },
  { id: 'b', position: [1, 0, 0] },
]);

// Attach HTML overlays to nodes
graph.attachOverlay('a', myLabelElement);

graph.start();

Key Features

• Buffer Management: Shared Float32Array buffers for zero-copy WASM communication
• Overlay System: Position HTML elements over 3D node positions
• Camera Control: Orbit, pan, zoom with mouse/touch input
• Batch Updates: Efficient multi-node updates without intermediate renders

Documentation

See the full documentation for architecture details and API specifications.

License

MIT