back to examples

webgpu renderer

gpu-accelerated rendering for large graphs (10k+ nodes).

Configuration

WebGPU is not supported in this browser. Falling back to Three.js.

live preview

import React from 'react'; import { GraphResponseRenderer } from '@intellea/graph-renderer'; import type { GraphResponseV0 } from '@intellea/graph-schema'; import payload from '../payloads/graph-response-v0.json'; const graphResponse = payload as GraphResponseV0; export default function GraphPanel() { return ( <GraphResponseRenderer graphResponse={graphResponse} useWebGPU={true} /> ); }

Performance Tips

  • • WebGPU provides significant speedup for graphs with 5,000+ nodes
  • • For small graphs (< 1,000 nodes), Three.js may be equally fast
  • • Enable performance overlay (NEXT_PUBLIC_DEBUG=true) to see FPS
  • • Use Chrome 113+ or Edge 113+ for best WebGPU support