WebGPU Accelerated Network Graph Rendering for 10K+ Node Topologies

[JamesEjembi]

Problem Statement / Feature Objective

The current Canvas 2D topology renderer drops below 10 FPS when rendering 5 000+ nodes with edge connections due to CPU-side layout calculations and draw-call overhead. Migrating the force-directed layout and rendering to WebGPU compute shaders enables smooth 60 FPS rendering at 10 000+ nodes by offloading the Barnes-Hut n-body simulation to the GPU.

---

Technical Invariants & Bounds

• Node count range: 1 000 to 10 000 (practical limit for enterprise networks)
• Edge count: up to 3 times nodes (typical connectivity)
• Target FPS: 60 (16.6 ms per frame budget)
• WebGPU compute shader workgroup size: 256
• Barnes-Hut theta threshold: 0.5
• Fallback: WebGL2 if WebGPU unavailable; Canvas 2D as last resort

---

Codebase Navigation Guide

• src/components/network/TopologyCanvas.tsx -- current Canvas 2D renderer
• src/lib/graph/layoutEngine.ts -- current CPU force-directed layout
• src/lib/webgpu/graphShaders.wgsl -- proposed compute shader source
• src/lib/webgpu/webgpuEngine.ts -- proposed WebGPU wrapper (device, queue, pipeline init)
• src/hooks/useTopologyData.ts -- existing hook feeding node/edge data

---

Implementation Blueprint

1. Create wgsl/graphShaders.wgsl with two compute shaders: (a) barnesHut -- computes node-node forces using a quadtree built in shared memory; (b) integrate -- updates velocity and position with damping.
2. Build webgpuEngine.ts that initializes a GPUDevice via navigator.gpu.requestAdapter() and adapter.requestDevice(), creates a compute pipeline from the WGSL shaders, and manages GPUBuffer pairs for position/velocity double-buffering.
3. Refactor layoutEngine.ts to detect WebGPU support via useWebGPUAvailable() hook. If available, upload initial node positions to GPU buffers, dispatch compute shaders each frame, read back positions via a staging buffer, and pass them to the renderer. If unavailable, fall through to the existing CPU path.
4. Modify TopologyCanvas.tsx to use webgpuEngine.output.positionBuffer mapped to a GPURenderPipeline for drawing circles/lines directly on the GPU (use a full-screen quad with vertex shader reading from storage buffer).
5. Implement adaptive quality: when GPU frame time exceeds 14 ms, reduce rendered nodes by 25 % (hide low-importance leaf nodes) and display a quality badge.
6. Benchmark with a synthetic 10 000-node dataset: assert FPS >= 55. Use Chrome DevTools Protocol CDP Performance.enable for automated measurement in CI.

[Oluwasuyi-Oluwatimilehin-Daniel]

Hello maintainers I'm a full stack developer experience in building scalable systems I can handle this perfectly if assigned

[obedojukwu16-jpg]

I will like to work on this issue, I know exactly what to do

[obedojukwu16-jpg]

I will like to work on this issue, I know exactly what to do

[grantfox-oss]

🦊 GrantFox — @obedojukwu16-jpg has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #59)
2. Your PR will be reviewed by the Lumina-etwork maintainers

Good luck! Track your progress on GrantFox.