I just finished rebuilding the iconic NANEX JTools 3D Depth Mapper entirely from scratch… and yes, it’s now running 100% in the browser using Three.js, WebGL, and a custom data-ingestion pipeline hooked straight into Binance WebSocket streams + REST endpoints.

This thing doesn’t “display” the order book… it warps it into a navigable 3D landscape where liquidity turns into mountains, HFT sweeps become shockwaves, and spoof walls glow like radioactive stalagmites. ⚡🧠🔥

⚙️ The Tech Stack (aka: the machinery under the hood)

I didn’t just slap a graph on WebGL — I engineered a real-time rendering engine tuned for market microstructure:

🔧 Three.js custom shaders
• Real-time geometry extrusion for bid/ask terrain
• Glow passes for liquidity clusters
• Instanced meshes for millions of order-book “voxels” without killing the FPS

🔧 WebGL 2.0 pipeline optimization
• GPU-level batching of order-book deltas
• Depth buffer tricks for overlap clarity
• Frustum-culling logic to avoid rendering useless fog

🔧 Data engine (Binance)
• WebSocket streams for:
– depth@100ms
– aggTrade
• REST sync for periodic heartbeat state reconciliation
• Custom debounce + merging system to avoid update spam

🔧 UI/UX Layer
• Camera modes: Orbit, Tunnel, Follow-Price
• Multi-layer visibility toggles (HFT sweeps, iceberg detection, etc.)
• Adaptive color-mapping based on volume intensity & price velocity

It’s basically a real-time 3D MRI scanner for the order book.

📈 Why this tool matters for real traders

Sure, the visuals look like a sci-fi cockpit, but underneath the neon spectacle lies deadly serious information density.

This kind of tool reveals things that 2D charts will ALWAYS hide:

🎯 1. Liquidity topology
Identify where liquidity actually sits, not where the joke of a 2D L2 panel pretends it sits.
See:
• liquidity cliffs
• hidden absorption
• spoof walls
• price-gravity zones

🔥 2. HFT behavior tracking
High-frequency players leave patterns in depth data that are invisible on candles.
In 3D, they become literal “shockwaves” across the terrain.

⚔️ 3. Momentum detection BEFORE the move
Large order clusters + sudden removal of walls often precede big moves.
Visualized in 3D, it's instant — your eyes catch it before your brain finishes the sentence.

👁‍🗨 4. Market manipulation footprinting
You can literally see:
• spoofing
• layering
• liquidity vacuums
• bid/ask baiting
All in real time.

🚀 5. Perfect for scalpers & microstructure nerds
If you trade reactions at the millisecond-to-second level, this is your playground.

🧩 Summary for the community

I basically recreated a tool that used to require a desktop executable and proprietary feeds —
now running in your browser, GPU-accelerated, connected live to Binance, with full 3D navigation, advanced liquidity mapping, and microstructure analytics in real time. 🤯💚💻

It’s a trader’s exoskeleton.
A HUD for the battlefield.
A way to finally see what the market is actually doing under the hood.

Pour faire simple…
Les freros, c’est une dinguerie atomique. ⚡🔥🧠💥