Implement a WebGL-based depth chart visualization for fractional token liquidity pools

[Damola-Sodiq]

Description

Replace SVG/Canvas charting with a high-performance WebGL context using Three.js to render massive fractional token liquidity depth charts smoothly.

Architecture & Context

DOM-based rendering chokes when attempting to draw thousands of micro-orders in a fractional asset liquidity pool. Offloading the coordinate math and rendering to the GPU via WebGL ensures 60 FPS performance even during extreme market volatility.

Technical Requirements

• Integrate @react-three/fiber to manage the WebGL canvas lifecycle.
• Pass live tRPC order book streams into WebGL instanced meshes or custom shader uniforms.
• Implement custom GPU raycasting for accurate mouse hover tooltip detection.

Acceptance Criteria

• The depth chart renders 10,000+ data points flawlessly at 60 FPS.
• Memory footprint is minimized via aggressive WebGL context cleanup on unmount.
• Tooltips and interactions remain perfectly responsive.